debugger 文とブレークポイント - JavaScript

console.log をたくさん書いてデバッグするのは非効率です。debugger 文とブレークポイントを使えば、コードの実行を一時停止して変数の中身を確認したり、ステップ実行で処理の流れを追ったりできます。

debugger 文の基本

コードに debugger と書くと、DevTools が開いている状態でその行に到達したときに実行が一時停止します。

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger; // ここで停止
    total += item.price * item.quantity;
  }
  return total;
}

ループの各繰り返しで停止するため、変数の変化を追跡できます。

ブレークポイントの設定

DevTools の Sources パネルでコードを開き、行番号をクリックするとブレークポイントを設定できます。debugger 文と同じ効果ですが、コードを編集する必要がありません。

停止中にできること

実行が停止すると、以下のことが可能になります。

ステップ実行

停止後は、以下のボタン（またはショートカット）で実行を制御できます。

Step Over は関数を呼び出す行で使うと、その関数の中には入らず、結果だけを得て次の行に進みます。

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

特定の条件を満たすときだけ停止させることも可能です。行番号を右クリックして「Add conditional breakpoint」を選びます。

for (let i = 0; i < 1000; i++) {
  processItem(i); // i === 500 のときだけ停止したい
}

条件式に i === 500 と入力すると、500 回目のループでだけ停止します。大量のデータを扱うときに便利です。

ログポイント

ブレークポイントの代わりに、停止せずにログだけを出力する「ログポイント」も設定できます。行番号を右クリックして「Add logpoint」を選びます。

// ログポイントに "現在のインデックス: {i}" と設定
for (let i = 0; i < 100; i++) {
  processItem(i);
}

コードを変更せずに console.log 相当のことができます。

DOM ブレークポイント

HTML 要素に対して、変更があったときに停止するブレークポイントも設定できます。Elements パネルで要素を右クリックし、「Break on」から選択します。

「なぜか DOM が書き換わる」という原因不明のバグを追跡するのに役立ちます。

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

Sources パネルの「Event Listener Breakpoints」で、特定のイベントが発火したときに停止させることもできます。

どのコードがイベントを処理しているかを特定できます。

debugger 文の注意点

debugger 文を本番コードに残さないよう注意してください。DevTools が開いていなければ無視されますが、セキュリティやパフォーマンスの観点から、本番前に削除するのが良い習慣です。ESLint などのリンターで警告を出す設定にしておくと安心です。