ブレークポイントの設定と確認 | デバッガツールの使用 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

ブレークポイントとは？

ブレークポイントとは、JavaScriptコードの特定の行でプログラムの実行を一時停止し、その時点の状態を確認するためのデバッグ機能です。

ブレークポイントを設定すると、プログラムは指定した行で停止し、変数の値や関数の呼び出し状況、現在の処理の流れなどを確認できます。console.log()だけでは分かりにくい問題も、ブレークポイントを使うことで原因を見つけやすくなります。

現在では、Google ChromeやMicrosoft Edgeなどのブラウザに搭載されているDevTools（開発者ツール）を使ってデバッグする方法が一般的です。

ブレークポイントの基本的な設定方法

主要なブラウザでは、開発者ツールから簡単にブレークポイントを設定できます。

ブラウザ 設定方法
Google Chrome F12キーでDevToolsを開き、「Sources」タブで行番号をクリックする。
Microsoft Edge F12キーでDevToolsを開き、「Sources」タブで行番号をクリックする。
Mozilla Firefox F12キーでDeveloper Toolsを開き、「デバッガ」タブで行番号をクリックする。
Safari 開発メニューからWebインスペクタを開き、対象ファイルの行番号をクリックする。

Chrome DevToolsでブレークポイントを設定する

Google Chromeでは、以下の手順でブレークポイントを設定できます。

設定手順

  1. ChromeでデバッグしたいWebページを開く。
  2. F12キーを押してDevToolsを開く。
  3. 「Sources」タブを開く。
  4. 対象のJavaScriptファイルを選択する。
  5. 停止させたい行の行番号をクリックする。
  6. ページを操作すると、その行で実行が停止する。

停止すると、その時点の変数や実行中の関数を確認できます。

Firefox Developer Toolsで設定する

Firefoxでも同様の方法でブレークポイントを設定できます。

設定手順

  1. FirefoxでF12キーを押してDeveloper Toolsを開く。
  2. 「デバッガ」タブを開く。
  3. JavaScriptファイルを選択する。
  4. 停止したい行番号をクリックする。
  5. ページを操作すると、その位置で実行が停止する。

Chromeと基本的な使い方はほぼ同じです。

ブレークポイントを設定してみる

例えば、次のようなコードがあるとします。

function add(a, b) {
    const result = a + b;

    return result;
}

const total = add(10, 20);

console.log(total);

const result = a + b;の行にブレークポイントを設定すると、その行でプログラムが停止します。

停止中は、次のような情報を確認できます。

  • aの値
  • bの値
  • resultがまだ作成されていないこと
  • どの関数から呼び出されたか

ブレークポイントで確認できる情報

ブレークポイントで停止すると、さまざまな情報を確認できます。

  • 変数の現在の値
  • ローカル変数・グローバル変数
  • 関数の呼び出し履歴（コールスタック）
  • オブジェクトの内容
  • 現在実行されているコード
  • 次に実行される処理

これらを確認することで、想定と異なる値になっている箇所や、処理の流れを把握できます。

ステップ実行を活用する

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

操作 内容
Step Over 現在の行を実行し、次の行へ進む。
Step Into 関数の中へ入って処理を確認する。
Step Out 現在の関数を最後まで実行して呼び出し元へ戻る。
Resume 次のブレークポイントまで通常実行する。

これらを使うと、処理の流れを少しずつ追跡できます。

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

通常のブレークポイントでは毎回停止しますが、条件付きブレークポイントを使うと、指定した条件を満たした場合だけ停止できます。

設定方法

  1. 行番号を右クリックする。
  2. 「Add Conditional Breakpoint（条件付きブレークポイント）」を選択する。
  3. 条件式を入力する。

例えば、ループの100回目だけ停止したい場合は、次のような条件を設定できます。

i === 100

これにより、100回目だけ停止するため、大量のループでも効率よくデバッグできます。

debugger文を使う方法

JavaScriptには、コード内からブレークポイントを設定できるdebugger文があります。

function calculate(value) {
    debugger;

    return value * 2;
}

calculate(10);

DevToolsが開かれている状態でこのコードを実行すると、debugger;の行で自動的に停止します。

一時的なデバッグには便利ですが、本番公開前には削除するようにしましょう。

ブレークポイントの活用場面

ブレークポイントは、次のような場面で特に役立ちます。

  • 変数の値が想定通りに変化しているか確認したい。
  • ループの途中で問題が起きる原因を調べたい。
  • 特定の関数が呼び出されたときの動作を確認したい。
  • 非同期処理の流れを確認したい。
  • エラーが発生する直前の状態を確認したい。

console.log()との使い分け

方法 向いている場面
console.log() 簡単に値を確認したい場合。
ブレークポイント 処理を停止して詳しく状態を調べたい場合。
debugger コード内から一時的に停止したい場合。

簡単な確認ならconsole.log()でも十分ですが、複雑な処理ではブレークポイントの方が効率的です。

まとめ

  • ブレークポイントは、指定した行でプログラムを一時停止するデバッグ機能です。
  • 停止中は、変数の値やオブジェクト、コールスタックなどを確認できます。
  • ChromeやEdgeでは、DevToolsの「Sources」タブから簡単に設定できます。
  • Step OverやStep Intoを使うと、1行ずつ処理を追跡できます。
  • 条件付きブレークポイントを使うと、特定の条件だけで停止できます。
  • debugger文を使うと、コードから停止位置を指定することもできます。
  • console.log()と使い分けることで、効率よくデバッグできます。

スポンサーリンク