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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

ブレークポイントを使用して 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');

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

条件付きコード行ブレークポイントは、いくつかの条件が満たされた場合にのみ実行を停止する場合に使用します。

このようなブレークポイントは、特にループ内で、状況とは無関係な中断をスキップする場合に役立ちます。

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

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

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

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

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

ログ行コード ブレークポイント（ログポイント）を使用すると、実行を一時停止したり、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 つの点が付いたピンク色のアイコンが表示されます。

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

以下の例は、文字列と変数値を Console に記録する 30 行目のログポイントを示しています。

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

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

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

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

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

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

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

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

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

ブレークポイントを編集

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

  • ブレークポイントの横にある チェックボックス。 をクリックして、有効または無効にします。ブレークポイントを無効にすると、[Sources] パネルで行番号の横にあるマーカーが透明になります。
  • ブレークポイントにカーソルを合わせ、編集] をクリックします。 をクリックして編集し、閉じる をクリックして削除します。

  • ブレークポイントを編集するときに、インライン エディタのプルダウン リストでタイプを変更します。

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

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

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

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

動画では、ブレークポイントのさまざまな編集（無効化、削除、条件の編集、メニューからの場所の表示、タイプの変更など）を実際に確認できます。

DOM 変更ブレークポイント

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

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

  1. [要素] タブをクリックします。
  2. ブレークポイントを設定する要素に移動します。
  3. 要素を右クリックします。
  4. [Break on] にカーソルを合わせ、[サブツリーの変更]、[属性の変更]、または [ノードの削除] を選択します。

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

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

DOM 変更ブレークポイントのリストは次の場所にあります。

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

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

ここでは次の操作を行うことができます。

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

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

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

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

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

たとえば、ページが誤った URL をリクエストしていて、誤ったリクエストの原因となっている AJAX または Fetch のソースコードをすぐに見つけたい場合です。

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

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

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

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

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

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

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

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

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

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

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

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

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

例外ブレークポイント

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

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

  • チェックボックス。 の [Pause on unc もらう exception] をオンにします。

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

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

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

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

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

非同期呼び出しの例外

キャッチ済みとキャッチされないいずれかのチェックボックスをオンにすると、Debugger は同期呼び出しと非同期呼び出しの両方で、対応する例外で一時停止を試みます。非同期の場合、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 コンソールから debug() を呼び出す場合、ターゲット関数がスコープ内にあることを確認するのが難しい場合があります。たとえば次のような戦略があります。

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

トラステッド タイプのブレークポイント

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

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

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

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

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

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

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

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

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