このページは Cloud Translation API によって翻訳されました。

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

Kayce Basques

Sofia Emelianova

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

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

最もよく知られているブレークポイントはコード行（line-of-code）のブレークポイントです。しかし、コード行のブレークポイントは、設定場所が正確にわからない場合や、大規模なコードベースで作業する場合は特に、非効率になる可能性があります。他の種類のブレークポイントをいつどのように使えばよいかを知っていれば、自分が行うデバッグ作業の時間を節約できます。

ブレークポイントの種類	次のような場合に使用します。
コード行	厳密なコード部分で停止します。
条件付きコード行	厳密なコード部分で、他の何らかの条件が真である場合に限って一時停止します。
ログポイント	実行を一時停止せずに、コンソールにメッセージを記録します。
DOM	特定の DOM ノードまたはその子を変更または削除するコードで一時停止します。
XHR	指定する文字列パターンが XHR URL に含まれる場合に一時停止します。
イベントリスナー	`click` などのイベントが発生した後に実行されるコードで一時停止します。
例外	捕捉された例外または捕捉されていない例外をスローするコード行で一時停止します。
ファンクション	特定の関数が呼び出されるたびに一時停止します。
信頼できるタイプ	Trusted Type 違反で一時停止します。

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

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

DevTools でコード行ブレークポイントを設定する手順は、次のとおりです。

[ソース] パネルをクリックします。
ブレークポイントを配置する対象のコード行を含むファイルを開きます。
対象のコード行に移動します。
コード行の左側に行番号列があります。これをクリックします。行番号列の上に青いアイコンが表示されます。

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

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

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

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

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

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

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

このようなブレークポイントは、ケースに関連しないブレークをスキップする場合（特にループ内）に便利です。

条件付きコード行ブレークポイントを設定する手順は、次のとおりです。

[ソース] パネルを開きます。
改行するコード行を含むファイルを開きます。
対象のコード行に移動します。
コード行の左側に行番号列があります。その列を右クリックします。
[Add conditional breakpoint] を選択します。コード行の下にダイアログが表示されます。
ダイアログに条件を入力します。
Enter キーを押してブレークポイントを有効にします。行番号列の上に疑問符が付いたオレンジ色のアイコンが表示されます。

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

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

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

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

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

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

たとえば、以下をログに記録できます。
```
"A string " + num, str.length > 1, str.toUpperCase(), obj
```
この場合、次のようなメッセージが記録されます。
```
// str = "test"
// num = 42
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}
```
Enter キーを押してブレークポイントを有効にします。行番号列の上に 2 つのドットがあるピンクのアイコンが表示されます。

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

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

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

[Breakpoints] セクションを使用して、コード行のブレークポイントを無効化、編集、削除します。

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

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

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

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

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

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

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

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

ブレークポイントの横にあるをクリックして、有効または無効にします。ブレークポイントを無効にすると、[ソース] パネルで、行番号の横のマーカーが透明になります。
ブレークポイントにカーソルを合わせ、をクリックして編集し、をクリックして削除します。
ブレークポイントを編集するときは、インラインエディタのプルダウンリストからタイプを変更します。
ブレークポイントを右クリックしてコンテキストメニューを表示し、次のいずれかのオプションを選択します。
- 場所を表示します。
- 条件またはログポイントを編集します。
- すべてのブレークポイントを有効にします。
- すべてのブレークポイントを無効にします。
- ブレークポイントを削除します。
- 他のブレークポイント（すべてのファイル内）を削除します。
- （すべてのファイルにある）すべてのブレークポイントを削除します。

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

[ここで一時停止しない] でブレークポイントをスキップする

「ここで一時停止しない」コード行のブレークポイントを使用すると、他の理由で発生する一時停止をスキップできます。これは、例外ブレークポイントを有効にしても、デバッグに関係のない特にノイズの多い例外でデバッガが停止し続ける場合に便利です。

休憩場所をミュートするには:

[Sources] パネルでソースファイルを開き、中断したくない行を探します。
左側の行番号列の、中断の原因となっているステートメントの横にある行番号を右クリックします。
プルダウンメニューから [ここで一時停止しない] を選択します。行の横にオレンジ色（条件付き）のブレークポイントが表示されます。

実行を一時停止しているときにブレークポイントをミュートすることもできます。ワークフローを学ぶには、次の動画をご覧ください。

[ここで一時停止しない] を使用すると、デバッガステートメントと、コード行ブレークポイントとイベントリスナーブレークポイントを除く他のすべてのブレークポイントタイプをミュートできます。

複数のステートメントを含む行で、一時停止しないステートメントが一時停止を引き起こすステートメントと異なる場合、ここで一時停止しないでくださいが失敗することがあります。ソースマッピングされたコードでは、すべてのブレークポイントの位置が、ブレークを引き起こす元のステートメントに対応しているわけではありません。

DOM 変更ブレークポイント

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

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

[要素] タブをクリックします。
ブレークポイントを設定する要素に移動します。
要素を右クリックします。
[Break on] の上にマウスポインターを移動し、[Subtree modifications]、[Attribute modifications]、または [Node removal] を選択します。

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

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

[Elements] > [DOM Breakpoints] ペイン。
[ソース] > [DOM ブレークポイント] サイドパネル。

[要素] パネルと [ソース] パネルの DOM ブレークポイントのリスト。

次のことができます。

で有効または無効にします。
DOM で右クリック > [削除] または [表示] を選択します。

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

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

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

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

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

XHR / フェッチブレークポイントを設定する手順は、次のとおりです。

[ソース] パネルをクリックします。
[XHR ブレークポイント] ペインを展開します。
[ ブレークポイントを追加] をクリックします。
挿入する文字列を入力します。この文字列が XHR のリクエスト URL のどこかに存在すると、DevTools は一時停止します。
Enter キーを押して確定します。

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

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

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

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

[ソース] パネルをクリックします。
[イベントリスナーブレークポイント] ペインを展開します。DevTools に、[Animation] などのイベントカテゴリのリストが表示されます。
発生したら一時停止するイベントのカテゴリにチェックを入れるか、またはカテゴリを展開して特定のイベントにチェックを入れるかします。

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

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

また、デバッガは、ウェブワーカーまたは任意のタイプのワークレット（共有ストレージワークレットを含む）で発生したイベントで停止します。

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

この例は、サービスワーカーで発生した setTimer イベントでデバッガが停止した状態を示しています。

イベントリスナーのリストは、[要素] > [イベントリスナー] ペインでも確認できます。

例外ブレークポイント

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

[ソース] パネルの [ブレークポイント] セクションで、次のいずれかのオプションまたは両方を有効にして、コードを実行します。

[Pause on un キャッチ例外] をオンにします。

この例では、捕捉されない例外で実行が一時停止します。
[ キャッチされた例外で一時停止] チェックボックスをオンにします。

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

非同期呼び出しの例外

[キャッチ] チェックボックスと [キャッチされていない] チェックボックスのいずれか、または両方をオンにすると、Debugger は、同期呼び出しと非同期呼び出しの両方で、対応する例外で一時停止しようとします。非同期の場合、Debugger は Promise 全体で拒否ハンドラを検索して、停止するタイミングを決定します。

キャッチされた例外と無視されたコード

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

次の例では、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() を呼び出す場合、ターゲット関数がスコープ内にあることを確認するのは難しい場合があります。次のような方法をとることもできます。

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

Trusted Type ブレークポイント

Trusted Type API は、クロスサイトスクリプティング（XSS）攻撃と呼ばれるセキュリティ上の脆弱性利用型不正プログラムから保護します。

キーワード: DOM ベースのクロスサイトスクリプティングは、ユーザーが制御するソース（ユーザー名や URL フラグメントから取得したリダイレクト URL など）のデータがシンクに到達したときに発生します。シンクとは、任意の JavaScript コードを実行できる eval() などの関数や .innerHTML などのプロパティセッターです。

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

シンク違反を確認します。

この例では、シンク違反により実行が一時停止されています。
[ポリシー違反] を確認します。

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

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

セキュリティを強化するには、Trusted Types で DOM ベースのクロスサイトスクリプティングの脆弱性を防ぐをご覧ください。
デバッグについては、Chrome DevTools での CSP と Trusted Types のデバッグの実装をご覧ください。