mhJavaScript のバグ調査や処理の追跡には、console.log() では限界があります。
そこで活躍するのが「Sourcesパネル」。このパネルを使えば、コードの任意の位置で実行を一時停止し、変数の値や処理の流れを詳細に観察できます。
本章では、Sourcesパネルによる ブレークポイントの活用 と、コールスタックやスコープの調査、ウォッチ機能による変数監視を学びましょう。
6.1 ブレークポイントの種類
Sourcesパネルでは、さまざまな種類のブレークポイントを設定できます。
これにより、任意の条件でコード実行を一時停止し、状態を確認できます。
① 通常の行ブレークポイント
- コードの左側の行番号をクリック → 青いマーカーが付き、そこで一時停止
- 実行を再開するまで、その行以降のコードは実行されない
② DOM変更ブレークポイント
Elementsパネルで特定の要素を右クリック → 「ブレークポイント」→「属性の変更」「子要素の変更」などを選択- DOMの変化が起きたタイミングで停止
③ XHR（Ajax）ブレークポイント
- 「Fetch/XHR」内で任意のリクエストURLを指定
- 特定のAPI呼び出しが発生したときに停止できる
④ イベントリスナーブレークポイント
- 「Event Listener Breakpoints」パネルで
click,keydown,submitなどを選択 - 指定イベントが発生した瞬間に、対応するリスナー内で停止
💡 活用例：
- 「ボタンをクリックしても反応しない」→
clickイベントブレークポイントで、正しくイベントが発火しているか確認 - 「DOMが勝手に書き換わる」→ DOM変更ブレークポイントで、どのスクリプトが操作しているか突き止める
6.2 ステップ実行で処理を追う
ブレークポイントで停止した後は、「ステップ実行」ボタンで 1行ずつ処理を進めながら実行の流れを観察できます。
ステップ実行の種類：
- ▶️ Resume：次のブレークポイントまで一気に進む
- ⬇️ Step over（次の行へ）：関数呼び出しを飛ばして次の行へ進む
- ↪️ Step into（関数内部へ）：関数の中に入って処理を追う
- ⬆️ Step out（関数から抜ける）：今いる関数を抜けて外側へ戻る
➡ 関数のネストが深いときに特に有効！
6.3 コールスタック、スコープ、ウォッチの使い方
ブレークポイントで停止中は、画面右側に以下の情報が表示されます。
コールスタック（Call Stack）
- 現在の関数が、どの関数の中から呼ばれてきたのかを表示
- 上位の関数に遡ってコードを確認可能
スコープ（Scope）
- 現在の関数内で有効な変数（ローカル・クロージャ・グローバルなど）を一覧表示
- 変数の現在の値も確認できる
ウォッチ（Watch）
- 任意の式や変数を手動で登録
- 実行中に常に値をモニタリングできる
💡 使いどころ：
userオブジェクトが意図通りにセットされているかウォッチで確認- 関数が意図しない引数で呼ばれているときに、コールスタックをさかのぼって原因を特定
📝 まとめ
- Sourcesパネルは、本格的なステップデバッグの場であり、処理の流れやバグの原因を精密に特定できる
- ブレークポイントは、行だけでなく DOM、XHR、イベントなど多様な条件で設定可能
- コールスタックとスコープ表示を活用して、変数の状態と処理の文脈を確認できる
- ウォッチ機能で特定の値を常時監視することで、状態の変化に敏感なバグも追いやすくなる
