ブレークポイントを使用してコードを一時停止する

  • [アーティクル]

ブレークポイントを使用して JavaScript コードを一時停止します。 この記事では、DevTools で使用できるブレークポイントの種類と、使用するタイミングと各型の設定方法について説明します。

既存の Web ページを使用した入門チュートリアルについては、「 JavaScript のデバッグを開始する」を参照してください。

各ブレークポイントの種類を使用する場合の概要

最もよく知られているブレークポイントの種類は、コード行です。 ただし、コード行のブレークポイントは、特に見る場所がわからない場合や、大規模なコードベースを使用している場合は、設定するのが非効率的な場合があります。 他の種類のブレークポイントを使用する方法とタイミングを把握することで、デバッグ時の時間を節約できます。

ブレークポイントの種類 これは、一時停止する場合に使用します。...
コード行 コードの正確な領域。
条件付きコード行 コードの正確な領域ですが、他の条件が true の場合にのみ。
Dom 特定の DOM ノードまたは子を変更または削除するコード。
Xhr XHR URL に文字列パターンが含まれている場合。
イベント リスナー など click、イベントの後に実行されるコードで を実行します。
例外 キャッチまたはキャッチされない例外をスローしているコード行。
Function 特定のコマンド、関数、またはメソッドが実行されるたびに。
Logpoints デバッガーに "中断" せず、代わりにコンソールにメッセージをログに記録するバリアント。

コード行ブレークポイント

調査する必要があるコードの正確な領域がわかっている場合は、コード行ブレークポイントを使用します。 DevTools は、このコード行が実行される前に常に一時停止します。

DevTools でコード行ブレークポイントを設定するには:

  1. [ソース] ツールを選択します。

  2. 中断するコード行を含むファイルを開きます。

  3. コード行に移動します。

  4. コード行の左側には、行番号列があります。 クリックします。 行番号列の横に赤いアイコンが表示されます。

    コード行ブレークポイント

コード内のコード行ブレークポイント

コードの ステートメントを debugger 使用して、その行で一時停止します。 これはコード 行ブレークポイントと同じですが、DevTools UI ではなくコードでブレークポイントが設定されている点が異なります。

console.log('a');
console.log('b');
debugger;
console.log('c');

上記のコード スニペットが Microsoft Edge で実行されると、DevTools は、行を実行する直前に、 ステートメントを含む debugger 行で console.log('c'); 一時停止します。

コード行の条件付きブレークポイント

調査する必要があるコードの正確な領域がわかっているが、他の条件が true の場合にのみ一時停止する場合は、条件付きコード行ブレークポイントを使用します。

条件付きコード行ブレークポイントを設定するには:

  1. [ソース] ツールを選択します。

  2. 中断するコード行を含むファイルを開きます。

  3. コード行に移動します。

  4. コード行の左側には、行番号列があります。 右クリックします。

  5. [ 条件付きブレークポイントの追加] を選択します。 コード行の下にダイアログが表示されます。

    条件付きブレークポイントを設定するときに表示されるダイアログ

  6. ダイアログに条件を入力します。

  7. Enter キーを押してブレークポイントをアクティブにします。 行番号列の横に赤いアイコンが表示されます。

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

コード行のブレークポイントを管理する

[ ブレークポイント ] ウィンドウを使用して、コード行のブレークポイントを 1 つの場所から無効または削除します。

[ブレークポイント] パネル

  • エントリの横にあるチェック ボックスをオンにして、そのブレークポイントを無効にします。

  • エントリを右クリックして、そのブレークポイントを削除します。

  • [ブレークポイント] ウィンドウ内の任意 の 場所を右クリックして、すべてのブレークポイントを削除します。

すべてのブレークポイントを無効にするには、[ 非アクティブなブレークポイント ] ([ブレークポイントの非アクティブ化] アイコン) ボタンをクリックします。

[ブレークポイントの非アクティブ化] ボタン

DOM 変更ブレークポイント

DOM ノードまたは子を変更するコードで一時停止する場合は、DOM 変更ブレークポイントを使用します。

DOM 変更ブレークポイントを設定するには:

  1. [要素] ツールを選択します。

  2. ブレークポイントを設定する要素に移動します。

  3. 要素を右クリックし、[ 中断] をクリックし、 サブツリーの変更、 属性の変更、または ノードの削除をクリックします。

    DOM 変更ブレークポイントを作成するためのコンテキスト メニュー

DOM 変更ブレークポイントの種類

  • サブツリーの変更。 現在選択されているノードの子が削除または追加されたとき、または子の内容が変更されたときにトリガーされます。 子ノード属性の変更、または現在選択されているノードへの変更ではトリガーされません。

  • 属性の変更: 現在選択されているノードで属性が追加または削除されたとき、または属性値が変更されたときにトリガーされます。

  • ノードの削除: 現在選択されているノードが削除されたときにトリガーされます。

XHR/fetch ブレークポイント

XmlHttpRequest (XHR) または Fetch 要求が発生したときに中断する場合は、XHR/フェッチ ブレークポイントを使用します。 DevTools は、XHR または Fetch 要求が発生するコード行で一時停止します。

これが役に立つ例の 1 つは、Web ページが正しくない URL を要求していて、正しくない要求の原因となっている XHR または Fetch ソース コードをすばやく見つけたい場合です。

XHR ブレークポイントを設定するには:

  1. [ソース] ツールを選択します。

  2. [XHR/fetch ブレークポイント] パネルを展開します。

  3. [ ブレークポイントの追加] をクリックします。

  4. 中断する URL のすべてまたは一部を入力します。 入力した値が XHR または Fetch 要求 URL の任意の場所に存在すると、DevTools は一時停止します。

  5. Enter キーを押して確定します。

    XHR ブレークポイントを作成する

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

イベントが発生した後に実行されるイベント リスナー コードを一時停止する場合は、イベント リスナーブレークポイントを使用します。 、、またはすべてのマウス イベントなどの clickイベントのカテゴリなど、特定のイベントを選択できます。

  1. [ソース] ツールを選択します。

  2. [ イベント リスナー ブレークポイント] パネルを展開します。 DevTools には、 アニメーションなどのイベント カテゴリの一覧が表示されます。

  3. カテゴリを選択すると、そのカテゴリのイベントが発生するたびに一時停止します。 または、カテゴリを展開し、特定のイベントを選択します。

    イベント リスナー ブレークポイントを作成する

例外ブレークポイント

キャッチまたはキャッチされない例外をスローしているコード行で一時停止する場合は、例外ブレークポイントを使用します。

  1. [ソース] ツールを選択します。

  2. コードが JavaScript 例外をスローしたときに一時停止するには、[ ブレークポイント ] ウィンドウで、[ キャッチされていない例外で一時停止 ] チェック ボックスをオンにします。

  3. ブロックによって例外がキャッチされたときなど、キャッチされた例外を一時停止するには、[キャッチされたtry/catch例外で一時停止] チェック ボックスをオンにします。

    [例外の一時停止] ボタン

関数ブレークポイント

メソッドを実行します debug(function) 。ここで function 、特定の関数が実行されるたびに一時停止する場合は、デバッグする JavaScript 関数を指定します。 (ステートメントを使用する場合など) コードに挿入 debug() することも、 console.log() DevTools コンソール ツールから メソッドを実行することもできます。

debug() は、関数の最初 の行にコード行ブレークポイント を設定することと同じです。

function sum(a, b) {
  let result = a + b; // DevTools will pause before running this line.
  return result;
}

// Call the debug method by passing a reference to the function object,
// not its name as a string.
debug(sum);

sum();

ターゲット関数がスコープ内にあることを確認する

デバッグする関数がスコープ内にない場合、DevTools は をスロー ReferenceError します。

(function () {
  function foo() {
    console.log('foo');
  }

  function bar() {
    console.log('bar');
  }

  // Here, calling debug(bar) works because
  // bar is defined in the current scope.
  debug(bar);

  bar();
})();

// Here, calling debug(foo) won't work, because foo
// isn't defined in the current scope.
debug(foo);

コンソール ツールからを呼び出debug()す場合は、ターゲット関数がスコープ内にあることを確認する手法を次に示します。

  1. 関数がスコープ内のどこかに コード行ブレークポイント を設定します。

  2. ブレークポイントをトリガーします。 コードはブレークポイントで一時停止され、現在の関数の変数はスコープ内にあります。

  3. コードがコード行ブレークポイントで一時停止している間に、DevTools コンソールで を呼び出 debug() します。

Logpoints

Logpoint は、デバッガーで "中断" するのではなく、メッセージをコンソールに直接ログに記録するブレークポイントバリアントです。 DevTools 経由でログポイントを挿入する方法は、他のブレークポイントと同じです。

ログポイントを設定するには:

  1. [ソース] ツールを選択します。

  2. ログポイントを挿入するコード行を含むファイルを開きます。

  3. 行番号列で、コード行の左側を右クリックします。

  4. [ ログポイントの追加] を選択します。 コード行の下にダイアログが表示されます。

  5. ログポイントがヒットしたときに評価されるメッセージまたは JavaScript 式を入力します。

  6. Enter キーを押して、ログポイントをアクティブにします。 行番号の横に赤いアイコンが表示されます。

詳細については、「 コンソール ツールでメッセージをログに記録する」を参照してください。

関連項目

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。