このページは 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] セクションを使用して、コード行ブレークポイントを無効化、編集、削除します。

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

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

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

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

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

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

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

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

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

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

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

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

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

[ソース] パネルでソースファイルを開き、ブレークポイントを配置しない行を見つけます。
左側の行番号列で、ブレークが発生するステートメントの横にある行番号を右クリックします。
プルダウンメニューから [ここで一時停止しない] を選択します。行の横にオレンジ色（条件付き）のブレークポイントが表示されます。

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

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

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

DOM 変更ブレークポイント

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

DOM 変更ブレークポイントを設定する手順は、次のとおりです。

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

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

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

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

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

次のことが可能です。

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

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

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

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

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

この連携が便利な例は、ページがリクエストしている URL が間違っていて、間違ったリクエストの原因となっている AJAX または Fetch ソースコードをその場で確認したいという場合です。

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

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

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

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

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

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

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

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

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

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

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

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

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

例外ブレークポイント

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

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

[ 捕捉されない例外で一時停止する] チェックボックスをオンにします。

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

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

非同期呼び出しの例外

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

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

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

次の例は、無視対象の library.js によってスローされた例外がキャッチされ、無視対象ではない mycode.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 などのプロパティセッターです。

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

Sink Violations を確認します。

この例では、シンク違反で実行が停止します。
[ポリシー違反] を確認します。

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

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

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