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

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

Kayce Basques

Sofia Emelianova

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

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

最も有名なブレークポイントのタイプはコード行です。ただし、コード行のブレークポイントは特に、どこを見ればよいかわからない場合や、構築できます。もう 1 つの API をいつどのように使えばよいのかを知ることで、デバッグの時間を節約できます。あります。

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

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

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

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

[ソース] パネルをクリックします。
改行するコード行を含むファイルを開きます。
コードの行に移動します。
コード行の左側には行番号の列があります。これをクリックします。画面に青いアイコンが表示されます。行番号の列の先頭に表示されます。

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

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

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

コードから debugger を呼び出して、その行で一時停止します。これはコード行に相当します。ブレークポイントをご覧ください。ただし、ブレークポイントは DevTools UI ではなくコードの中で設定します。

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

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

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

このようなブレークポイントは、特にループで、ケースとは無関係なブレークをスキップする場合に有用です。

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

[ソース] パネルを開きます。
改行するコード行を含むファイルを開きます。
コードの行に移動します。
コード行の左側には行番号の列があります。右クリックします。
[条件付きブレークポイントを追加] を選択します。コード行の下にダイアログが表示されます。
ダイアログに条件を入力します。
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] パネルで行番号の横にあるマーカーが透明になります。

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

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

ブレークポイントを編集

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

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

この動画では、無効化、削除、条件の編集、メニューからの場所の表示、タイプの変更など、ブレークポイントのさまざまな編集がどのように行われているかをご確認ください。

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

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

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

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

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

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

一時停止すべきでないステートメントが一時停止を発生させるステートメントと異なる場合、複数のステートメントがある行に「ここで一時停止しない」が失敗することがあります。ソースマップコードでは、すべてのブレークポイントの位置が、中断の原因となった元のステートメントに対応しているわけではありません。

DOM 変更ブレークポイント

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

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

[Elements] タブをクリックします。
ブレークポイントを設定する要素に移動します。
要素を右クリックします。
[ブレークオン] にカーソルを合わせて、[サブツリーの変更]、[属性の変更]、または ノードの削除。

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

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

Elements >[DOM Breakpoints] ペイン
出典 >[DOM Breakpoints] サイドペイン。

[Elements] パネルと [Sources] パネル内の DOM ブレークポイントのリスト。

次のことができます。

で有効または無効にします。
右クリック >DOM でそれらを削除または表示します。

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

サブツリーの変更。現在選択されているノードの子が削除されたか、ノードの子が削除されたときにトリガーされます子のコンテンツが変更された場合です。子ノードの属性の変更時にトリガーされない変更が加えられるたびに適用されます。
属性の変更: Google Chat で属性が追加または削除されたときにトリガーされます。ノードまたは属性値が変更されたときに行われます。
ノードの削除: 現在選択されているノードが削除されるとトリガーされます。

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

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

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

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

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

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

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

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

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

[ソース] パネルをクリックします。
[Event Listener Breakpoints] ペインを開きます。DevTools に表示されるイベントカテゴリのリスト Animation として作成されます。
これらのカテゴリのいずれかを選択すると、そのカテゴリのイベントが発生したときに一時停止するか、展開します。特定のイベントをチェックします。

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

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

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

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

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

イベントリスナーのリストは、Elements >[Event Listeners] ペイン。

例外ブレークポイント

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

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

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

この例では、キャッチされていない例外で実行が一時停止されます。
[Pause on キャッチ例外] をオンにします。

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

非同期呼び出しの例外

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

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

[Ignore List] をオンにすると、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 API: セキュリティから保護するこれは、クロスサイトスクリプティング（XSS）攻撃と呼ばれるエクスプロイトです。

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

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

のシンク違反を確認してください。

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

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

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

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