ブレークポイントでコードを一時停止する

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

ブレークポイントを使用して JavaScript コードを一時停止します。このガイドでは、DevTools で使用できる各種のブレークポイントと、どのような場合に使用すべきか、各タイプを設定する方法について説明します。デバッグ プロセスのインタラクティブなチュートリアルについては、Chrome DevTools で JavaScript のデバッグを開始するをご覧ください。

各ブレークポイント タイプを使用するタイミングの概要

最も一般的なタイプのブレークポイントはコード行です。ただし、コード行ブレークポイントは、特にどこを見るべきか正確にわからない場合や、大規模なコードベースを扱っている場合は、非効率になる可能性があります。他のタイプのブレークポイントをいつ、どのように使用するかを理解することで、デバッグ時間を短縮できます。

ブレークポイントのタイプ使用目的
コード行コードの正確な部分で一時停止します。
条件付きコード行他の条件が満たされている場合にのみ、正確なコード領域で一時停止します。
ログポイント実行を一時停止せずにコンソールにメッセージをログに記録します。
DOM特定の DOM ノードまたはその子を変更または削除するコードで、一時停止します。
XHRXHR URL に文字列パターンが含まれている場合は、一時停止します。
イベント リスナーclick などのイベントが発生した後に実行されるコードで一時停止します。
例外キャッチされた例外またはキャッチされなかった例外をスローしているコード行で一時停止します。
関数特定の関数が呼び出されるたびに一時停止する。
Trusted TypeTrusted Type の違反で一時停止。

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

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

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

  1. [Sources] タブをクリックします。
  2. 改行するコード行を含むファイルを開きます。
  3. コード行に移動します。
  4. コード行の左側が行番号の列です。これをクリックします。行番号列の上に青いアイコンが表示されます。

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

この例では、29 行目にコード行ブレークポイントを設定しています。

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

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

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

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

一部の条件が true の場合にのみ実行を停止する場合は、条件付きコード行ブレークポイントを使用します。

このようなブレークポイントは、特にループ内で、自分のケースとは無関係な中断をスキップしたい場合に便利です。

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

  1. [ソース] タブを開きます。
  2. 改行するコード行を含むファイルを開きます。
  3. コード行に移動します。
  4. コード行の左側が行番号の列です。右クリックします。
  5. [条件付きブレークポイントを追加] を選択します。コード行の下にダイアログが表示されます。
  6. ダイアログに条件を入力します。
  7. Enter キーを押してブレークポイントを有効にします。疑問符付きのオレンジ色のアイコンが行番号列の上に表示されます。

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

この例では、反復処理 i=6 で、x10 を超えた場合にのみ呼び出される条件付きコード行ブレークポイントを示しています。

コード行ブレークポイントをログに記録する

ログ行コード ブレークポイント(ログポイント)を使用すると、実行を一時停止することなく、また console.log() 呼び出しでコードを煩雑化することなく、コンソールにメッセージを記録できます。

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

  1. [ソース] タブを開きます。
  2. 改行するコード行を含むファイルを開きます。
  3. コード行に移動します。
  4. コード行の左側が行番号の列です。右クリックします。
  5. [ログポイントを追加] を選択します。コード行の下にダイアログが表示されます。
  6. ダイアログにログメッセージを入力します。console.log(message) 呼び出しと同じ構文を使用できます。

    たとえば、次のログを記録できます。

    "A string " + num, str.length > 1, str.toUpperCase(), obj
    

    この場合、ログに記録されるメッセージは次のようになります。

    // str = "test"
    // num = 3
    // obj = {attr: "x"}
    A string 42 true TEST {attr: 'x'}
    
  7. Enter キーを押してブレークポイントを有効にします。行番号の列の上に、2 つのドットが付いたピンク色のアイコンが表示されます。

文字列と変数値をコンソールに記録するログポイント。

この例では、文字列と変数値をコンソールに記録する 30 行目のログポイントを示しています。

コード行ブレークポイントを編集する

コード行ブレークポイントを無効化、編集、削除するには、[Breakpoints] ペインを使用します。

ブレークポイントのグループを編集する

[Breakpoints] ペインではブレークポイントがファイルごとにグループ化され、行番号と列番号順に並べられます。グループでは、次のことができます。

  • グループを折りたたむ、展開するには、その名前をクリックします。
  • グループまたはブレークポイントを個別に有効または無効にするには、グループまたはブレークポイントの横にある チェックボックス。 をクリックします。
  • グループを削除するには、グループにカーソルを合わせて 閉じる をクリックします。

この動画では、グループを折りたたんで、ブレークポイントを 1 つずつ、またはグループごとに無効または有効にする方法について説明します。ブレークポイントを無効にすると、[Sources] パネルで行番号の横のマーカーが透明になります。

グループにはコンテキスト メニューがあります。[Breakpoints] ペインでグループを右クリックして、次のいずれかを選択します。

グループのコンテキスト メニュー。

  • ファイル(グループ)内のすべてのブレークポイントを削除します。
  • ファイル内のすべてのブレークポイントを無効にします。
  • ファイル内のすべてのブレークポイントを有効にします。
  • (すべてのファイルで)すべてのブレークポイントを削除します。
  • (他のグループにある)他のブレークポイントを削除します。

ブレークポイントを編集

ブレークポイントを編集するには:

  • ブレークポイントの横にある チェックボックス。 をクリックして、有効または無効にします。ブレークポイントを無効にすると、[Sources] パネルで行番号の横のマーカーが透明になります。
  • ブレークポイントを編集し、削除するには 編集] をクリックします。 を、削除するには 閉じる をクリックします。
  • ブレークポイントを編集する際に、インライン エディタのプルダウン リストからタイプを変更します。

    ブレークポイントのタイプを変更する。

  • ブレークポイントを右クリックしてコンテキスト メニューを表示し、次のいずれかのオプションを選択します。

    ブレークポイントのコンテキスト メニュー

    • ブレークポイントを削除
    • 条件またはログポイントを編集します。
    • 場所を表示します。
    • (すべてのファイルで)すべてのブレークポイントを削除します。
    • (他のファイル内の)他のブレークポイントを削除します。

この動画を視聴して、ブレークポイントでのさまざまな編集(無効化、削除、条件の編集、メニューからの場所の表示、タイプの変更)を実際に確認します。

DOM 変更ブレークポイント

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

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

  1. [要素] タブをクリックします。
  2. ブレークポイントを設定する要素に移動します。
  3. 要素を右クリックします。
  4. [Break on] にカーソルを合わせ、[Subtree modified]、[Attribute modified]、または [Node deletion] を選択します。

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

この例は、DOM 変更ブレークポイントを作成するためのコンテキスト メニューを示しています。

DOM 変更ブレークポイントのリストは、次の場所で確認できます。

  • [要素] > [DOM ブレークポイント] ペイン
  • [ソース] > [DOM ブレークポイント] サイドペイン

[要素] パネルと [ソース] パネルに表示された DOM ブレークポイントのリスト

ここでは次の操作を行えます。

  • チェックボックス。 で有効または無効にします。
  • DOM で右クリックして、[削除] または [表示] を選択します。

DOM 変更ブレークポイントのタイプ

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

XHR/フェッチ ブレークポイント

XHR のリクエスト URL に指定された文字列が含まれている場合に処理を終了する場合は、XHR/fetch ブレークポイントを使用します。DevTools は、XHR が send() を呼び出すコード行で一時停止します。

たとえば、ページが間違った URL をリクエストしていて、正しくないリクエストの原因となっている AJAX または Fetch のソースコードをすぐに特定したい場合です。

XHR/フェッチ ブレークポイントを設定するには:

  1. [Sources] タブをクリックします。
  2. [XHR Breakpoints] ペインを開きます。
  3. [[追加] をクリックします。 Add breakpoint] をクリックします。
  4. 改行する文字列を入力します。この文字列が XHR のリクエスト URL の任意の場所に存在すると、DevTools は一時停止します。
  5. Enter キーを押して確定します。

XHR/フェッチ ブレークポイントの作成。

この例では、URL に org を含むリクエストの XHR/フェッチ ブレークポイントに XHR/フェッチ ブレークポイントを作成する方法を示しています。

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

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

  1. [Sources] タブをクリックします。
  2. [Event Listener Breakpoints] ペインを開きます。DevTools に、[アニメーション] などのイベント カテゴリのリストが表示されます。
  3. いずれかのカテゴリのイベントが発生した場合に一時停止するか、カテゴリを展開して特定のイベントを確認します。

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

次の例は、deviceorientation のイベント リスナー ブレークポイントを作成する方法を示しています。

また、Debugger は、共有ストレージ ワークレットなど、あらゆるタイプのウェブワーカーワークレットで発生したイベントで一時停止します。

デバッガは Service Worker のイベントで一時停止しました。

この例は、Service Worker で発生した setTimer イベントで Debugger が一時停止した例を示しています。

イベント リスナーのリストは、[要素] > [イベント リスナー] ペインにも表示されます。

例外ブレークポイント

例外ブレークポイントは、キャッチされた例外またはキャッチされなかった例外をスローしているコード行で一時停止する場合に使用します。Node.js 以外のデバッグ セッションで、このような両方の例外を別々に一時停止できます。

[Sources] タブの [Breakpoints] ペインで、次のオプションのいずれかまたは両方を有効にして、コードを実行します。

  • チェックボックス。 [Pause on uncaughtException] をオンにします。

    対応するチェックボックスがオンになっているときに、キャッチされない例外で一時停止します。

    この例では、キャッチされない例外で実行が一時停止されます。

  • [チェックボックス。 Pause on caughtexception](キャッチされた例外で一時停止)をオンにします。

    対応するチェックボックスが有効になっているときに、キャッチされた例外で一時停止します。

    この例では、キャッチされた例外で実行が一時停止されます。

非同期呼び出しの例外

キャッチされたチェックボックスとキャッチされなかったチェックボックスのいずれかまたは両方がオンになっている場合、デバッガは同期呼び出しと非同期呼び出しの両方で、対応する例外で一時停止を試みます。非同期の場合、Debugger は Promise 全体にわたって拒否ハンドラを調べて、停止するタイミングを決定します。

例外をキャッチしてコードを無視する

[Ignore List] をオンにすると、無視されていないフレームでキャッチされた例外、またはコールスタック内のそのようなフレームを通過した例外で Debugger が一時停止します。

次の例は、無視されていない mycode.js を通過し、無視された library.js によってスローされたキャッチされた例外でデバッガが一時停止する様子を示しています。

コールスタック内の無視されていないフレームを通過するキャッチされた例外で一時停止します。

エッジケースでの Debugger の動作の詳細については、こちらのデモページで一連のシナリオをテストしてください。

関数ブレークポイント

debug(functionName) を呼び出します。ここで、functionName はデバッグする関数です。特定の関数が呼び出されるたびに一時停止します。debug() をコードに挿入するか(console.log() ステートメントなど)、DevTools コンソールから呼び出すことができます。debug() は、関数の最初の行にコード行ブレークポイントを設定するのと同じです。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

対象の関数がスコープ内にあることを確認する

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

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

DevTools Console から debug() を呼び出す場合、対象の関数をスコープ内に定義するのが難しいことがあります。たとえば、

  1. 関数がスコープ内の任意の場所にコード行ブレークポイントを設定します。
  2. ブレークポイントをトリガーします。
  3. コード行ブレークポイントでコードを一時停止している間に、DevTools コンソールで debug() を呼び出します。

Trusted Type ブレークポイント

Trusted Type API は、クロスサイト スクリプティング(XSS)攻撃と呼ばれるセキュリティ エクスプロイトからの保護を提供します。

[Sources] タブの [Breakpoints] ペインで、[CSP Fraud Breakpoints] セクションに移動し、次のいずれかのオプションまたは両方を有効にして、コードを実行します。

  • チェックボックス。 [シンク違反] を確認します。

    対応するチェックボックスがオンになっている場合、シンク違反で一時停止します。

    この例では、シンク違反で実行が一時停止します。

  • チェックボックス。ポリシー違反をご確認ください。

    対応するチェックボックスがオンになっている場合、ポリシー違反により一時停止されます。

    この例では、ポリシー違反のため実行が一時停止されています。Trusted Type ポリシーは trustedTypes.createPolicy を使用して設定します。

API の使用方法について詳しくは、以下をご覧ください。