【でばっがー】

デバッガー とは?

💡 プログラムを「スロー再生で観察する道具」
📌 このページのポイント
デバッガーの主要機能 ソースコード 1 let total = 0; 2 for (let i of items) { 3 total += i.price; ● ブレークポイント 4 } 5 return total; ▶ 続行 ⤵ ステップイン → 次行 変数ウォッチ total 2400 i { name: "マウス", price: 3500 } items.length 5 コールスタック ▸ calcTotal() checkout() プログラムを一時停止して内部状態を確認するツール ブレークポイント・ステップ実行・変数監視が三大機能
デバッガーのイメージ
ひよこ ひよこ

print文を入れてデバッグするのと何が違うの?

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

print文は「思った場所にしか書かない」から、予想外の場所が原因だと気づきにくい。デバッガーは止めた時点の全変数を一覧で確認できるし、「あれ、この関数の呼び出し元はどこだ?」とコールスタックも追える。

ひよこ ひよこ

どうやって使うの?

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

VSCodeなら調べたい行の行番号の左をクリックして赤い丸(ブレークポイント)を付けて、「デバッグ実行」すると、そこでプログラムが止まる。あとはサイドパネルで変数の値を確認したり、一行ずつ進めたりできる。

ひよこ ひよこ

ステップインとステップオーバーって何?

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

関数を呼び出す行で「ステップイン」すると関数の中に入って一行ずつ追える。「ステップオーバー」は関数の中には入らずその行だけ実行して次へ進む。バグが関数の中にあるかどうか怪しいときはステップインで掘り下げる。

ひよこ ひよこ

本番環境でデバッガーって使えるの?

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

基本的には使わない・使えない。本番でプログラムを止めたらサービスが止まる。本番で調査するにはログを充実させておいて、ログからバグの状況を推定するのが正攻法。ローカルや開発環境で同じ状況を再現してデバッガーで調べるのが安全。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
デバッガーって出てきたら「プログラムの動きをスロー再生して調査するツール」と思えばだいたいOK!
📖 おまけ:英語の意味
「debugger」 = バグを取り除くもの
💬 バグ(bug)を取り除く(de-bug)ツール。debugという言葉の由来は1947年にハーバードのコンピュータに実際に虫(moth)が入り込んだ事件とされる
← 用語集にもどる