【ぶれーくぽいんと】

ブレークポイント とは?

💡 プログラムに仕掛ける「一時停止ボタン」
📌 このページのポイント
ブレークポイント ― 実行を一時停止してデバッグ 1 let total = 0; 2 for (let i = 0; i < 10; i++) 3 total += data[i]; 4 } 5 console.log(total); ⏸ 一時停止中 変数ウォッチ i = 3 total = 6 data[3] = 4 コールスタック main() → calculate() → line 3 ● ブレークポイントで止めて変数の値を確認できる
ブレークポイントによるデバッグ
ひよこ ひよこ

ブレークポイントを設定すると何が起きるの?

ペンギン先生 ペンギン先生

その行にプログラムが到達した瞬間、実行がフリーズして制御がデバッガーに移る。その時点での全変数の値、コールスタック、メモリの状態などを自由に確認できる。確認したら「続行」して次のブレークポイントまで進める。

ひよこ ひよこ

条件付きブレークポイントって何?

ペンギン先生 ペンギン先生

「変数iが100のときだけ止まる」みたいに条件を設定できるブレークポイント。1000回ループするコードで99回目だけ止めたい、みたいなシナリオで便利。ブレークポイントの上で右クリック→「条件を編集」で設定できる。

ひよこ ひよこ

ログポイントって何?

ペンギン先生 ペンギン先生

プログラムを止めずにログだけ出力する」ブレークポイントの亜種。本番に近い環境でデバッガーを起動できないけど変数の値を確認したいとき、print文を追加せずに使える。VSCodeだと「ログポイントを追加」で設定できる。

ひよこ ひよこ

ブレークポイントをたくさん設定しすぎると何か問題ある?

ペンギン先生 ペンギン先生

デバッグ効率が下がる。多すぎると「どこで止まったかわからない」状態になる。まず大きな粒度で2〜3個設定して「どのエリアに問題があるか」を絞り込み、そこに集中的に追加していくのがコツ。二分探索的なアプローチが効果的。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
ブレークポイントって出てきたら「デバッガープログラムを止める場所の指定」と思えばだいたいOK!
📖 おまけ:英語の意味
「breakpoint」 = 中断点、停止点
💬 プログラムの「流れを断ち切る(break)点(point)」という直訳がそのまま意味になっている
← 用語集にもどる