こんにちは。現場の最前線でコードと格闘する皆さんに、今日は「デバッグの常識」を根底から覆す話をしましょう。
多くのエンジニアがバグと戦う際、`console.log()`を大量に仕込んだり、ブレークポイントで止まった後、何度も「Resume（再開）」ボタンを連打して目的のタイミングを探したりしています。もし、あなたの指先がその「連打」で疲れているのなら、それはデバッガを「監視員」ではなく「道具」としてしか使えていない証拠かもしれません。
今日は、Chrome DevToolsの「Sources」パネルにある「条件付きブレークポイント（Conditional Breakpoints）」という最強の武器を授けます。これを使いこなせば、無限ループの迷宮からも、数万回の反復処理の中にある「たった1回の不具合」も、一瞬で捕獲できるようになります。
—
1. なぜ「条件付きブレークポイント」なのか？
デバッガの真の役割は「プログラムを止めること」ではありません。「プログラムが暴走する瞬間の文脈（コンテキスト）を切り取ること」です。
通常のブレークポイントは、その行に到達するたびに処理を停止させます。しかし、もしその行が1秒間に100回実行されるとしたら？ 100回も「Resume」ボタンを押すのは、エンジニアの貴重な脳のリソースをドブに捨てるようなものです。
「条件付きブレークポイント」は、「特定の条件が真（true）になった時だけ停止する」という賢いフィルターです。これにより、ゴミ情報に埋もれることなく、バグが顕在化するピンポイントな瞬間だけを抽出できます。
—
2. 現場で震えるほど役立つ「セットアップと実践」
特別なインストールは不要です。今開いているブラウザが、そのまま最強のデバッガになります。
ステップ1：デバッグ対象のコード（検証用）
以下のコードをブラウザのコンソールに貼り付けるか、適当なHTMLに埋め込んでみてください。わざと「1000回目に不具合が起きる」ような無限ループを模したコードです。
function processData(items) {
for (let i = 0; i < items.length; i++) {
// 擬似的な不具合：1000回目のインデックスでデータがnullになる
const item = (i === 1000) ? null : { id: i, value: 'data' };
// ここでデバッグしたい！でも1000回繰り返すのは避けたい
console.log(`Processing ${i}`);
// 不具合のトリガー
if (!item.value) {
throw new Error(`Critical Error at index ${i}`);
}
}
}
// 実行
processData(Array(2000).fill({}));
ステップ2：条件付きブレークポイントの仕掛け方
1. Chromeで「F12」を押し、DevToolsを開きます。
2. 「Sources」パネルに移動し、上記のコードが表示されている行（`const item = …` の行など）の行番号を右クリックします。
3. 「Add conditional breakpoint…」を選択します。
4. 入力欄に、以下の条件式を入力してください。
// 行番号の右側に現れる入力欄に記述
i === 1000
ステップ3：魔法の瞬間
これで準備完了です。プログラムを再実行（F5）してみてください。
通常なら処理が完了するかエラーで止まるはずですが、デバッガは「iが1000になった瞬間」だけを狙い撃ちして停止します。
このとき、スコープ内の変数を確認してください。`item` が `null` になっているのが見えるはずです。これこそが、バグの犯行現場です。
—
3. なぜこれで開発効率が爆上がりするのか？
このテクニックがなぜ伝説級のアーキテクトに愛されるのか。理由は3つあります。
1. ノイズの遮断: 成功している999回の正常な処理を無視し、失敗する1回だけに集中できるため、精神的な疲労が激減します。
2. 変数の「予知」: `i === 1000` だけでなく、`item === null` や `user.role !== ‘admin’` といった、「バグが起きる論理的境界条件」をそのまま条件式にできるため、コードの意図とバグの挙動を脳内で直接リンクさせられます。
3. 汚さないコード: `console.log` を埋め込んで確認し、後で消し忘れてデプロイする…という、エンジニアの「あるある」な事故を物理的に防げます。
—
4. 先輩エンジニアからのアドバイス
条件付きブレークポイントは、単なるバグ追跡ツールではありません。「コードの挙動を制御する実験室」です。
もし、さらに高度なデバッグが必要なら、ブレークポイントを右クリックして「Edit breakpoint」から「Logpoint（ログポイント）」に変えてみてください。プログラムを止めずに、特定の条件でログだけを出力させることも可能です。
「どうして止まらないんだろう？」「どこで値が壊れたんだろう？」と悩む時間は、今日で終わりにしましょう。ツールに踊らされるのではなく、ツールを操ってコードの真実を暴く。その爽快感を味わったとき、あなたはまた一つ、エンジニアとして上のステージに登ったことになります。
毎日のコーディングが、少しでも楽で、そしてエキサイティングな冒険になりますように。応援していますよ。