4.2 ブレークポイント

行ブレークポイント

最も基本的なブレークポイント。指定した行でコードの実行が停止する。

設定方法

ブレークポイントの管理

• 無効化: 行番号を右クリック → "Disable breakpoint"
• 削除: 青いマーカーをクリック、または右クリック → "Remove breakpoint"
• 一覧表示: Debuggerペインの「Breakpoints」セクション

条件付きブレークポイント

指定した条件がtrueの場合のみ停止するブレークポイント。

設定方法

条件式の例

// 特定の値の時だけ停止
user.id === 42

// 特定の状態の時だけ停止
items.length > 100

// エラー状態の時だけ停止
response.status !== 200

// 特定の呼び出し回数で停止
++window.debugCounter === 10

ログポイント

実行を停止せずにConsoleにメッセージを出力する。コードを変更せずにログを追加できる。

設定方法

メッセージの書式

// 変数の値を出力
'User:', user

// 複数の値を出力
'i =', i, 'total =', total

// オブジェクトを出力
'Response:', response

ログポイントはオレンジ色のマーカーで表示される。

DOMブレークポイント

DOM要素が変更された時に停止。詳細は2.1 DOM検査・編集を参照。

XHR/fetchブレークポイント

特定のURLへのリクエストが発生した時に停止。

設定方法

活用例

// APIエンドポイントへのリクエストで停止
/api/users

// 特定のパラメータを含むリクエストで停止
?page=

イベントリスナーブレークポイント

特定のイベントが発生した時に停止。

設定方法

主なイベントカテゴリ

例外ブレークポイント

例外（エラー）が発生した時に停止。

設定方法

• Debuggerペイン上部の「Pause on exceptions」ボタン（⏸アイコン）をクリック

オプション

ステップ実行

ブレークポイントで停止した後、コードを1行ずつ実行する。

Run to cursor

特定の行まで実行を進めたい場合：

• 目的の行を右クリック → "Continue to here"

変数の監視

Scopeペイン

現在のスコープで利用可能な変数が表示される。

• Local: ローカル変数
• Closure: クロージャで参照している変数
• Global: グローバル変数

Watchペイン

特定の式を監視リストに追加し、常に値を表示。

監視式の例

// 変数の値
user.name

// 配列の長さ
items.length

// 計算結果
total * 1.1

// 条件式
status === 'active'

ホバーで値を確認

停止中に変数名にマウスをホバーすると、その値がツールチップで表示される。

Consoleで評価

停止中はConsoleで現在のスコープの変数にアクセスできる。

コールスタック

Call Stackペインには、現在の実行位置に至るまでの関数呼び出し履歴が表示される。

使い方

• 各フレームをクリックすると、その関数のコードと変数が表示される
• どの関数からどの関数が呼ばれたかを追跡できる

Restart frame

フレームを右クリック → "Restart frame" で、その関数の先頭から再実行できる。

Ignore List（無視リスト）

サードパーティライブラリのコードをステップ実行から除外。

設定方法

• ファイルを右クリック → "Add script to ignore list"
• Settings → Ignore List でパターンを追加

効果

• Step intoでライブラリコードをスキップ
• コールスタックで薄く表示される
• 例外ブレークポイントで無視

デバッグのTips

debuggerステートメント

コード内にdebugger;を書くと、その位置でブレークポイントのように停止する。

function processData(data) {
    debugger; // ここで停止
    return data.map(transform);
}

ブラックボックス化したコードを一時的に見る

Call StackでIgnore Listのフレームを右クリック → "Stop ignoring"

非同期コードのデバッグ

async/awaitやPromiseのコードでも、ステップ実行で追跡可能。Call Stackには非同期境界が表示される。

Live expressions

Consoleの上部で式を常に評価し続ける機能。リアルタイムで値の変化を監視できる。