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

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

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

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

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

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

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

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

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

図 1: 行 29 に設定したコード行ブレークポイント

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

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

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

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

条件付きコード行ブレークポイントは、調査が必要な厳密なコード部分はわかっているが、他の一定の条件が真である場合にのみ一時停止するという場合に使用します。

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

1. [Sources] タブをクリックします。
2. ブレークポイントを配置する対象のコード行を含むファイルを開きます。
3. 対象のコード行に移動します。
4. コード行の左側に行番号列があります。 その列を右クリックします。
5. [Add conditional breakpoint] を選択します。 コード行の下にダイアログが表示されます。
6. ダイアログに条件を入力します。
7. Enter を押してブレークポイントをアクティベートします。 行番号列の上にオレンジ色のアイコンが表示されます。

図 2: 行 32 に設定した条件付きコード行ブレークポイント

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

1 つの場所のコード行ブレークポイントを無効化または削除する場合は、[Breakpoints] ペインを使用します。

図 3: 2 つのコード行ブレークポイントが表示された [Breakpoints] ペイン。get-started.js の 15 行目と 32 行目にブレークポイントが配置されている

• 無効にするブレークポイントのエントリーの横にあるチェックボックスにチェックを入れます。
• そのブレークポイントを削除する場合は、エントリー上で右クリックします。
• すべてのブレークポイントを非アクティベートする、すべてのブレークポイントを無効にする、またはすべてのブレークポイントを削除する場合は、[Breakpoints] ペインの任意の場所で右クリックします。 すべてのブレークポイントを無効にすることは、ブレークポイントのチェックを一つ一つすべて解除することに相当します。 すべてのブレークポイントを非アクティベートすると、すべてのコード行ブレークポイントを無視し、それらのブレークポイントが有効である状態は維持するよう DevTools に指示するため、再アクティベートしたときには以前と同じ状態が復元されます。

図 4: [Breakpoints] ペインで非アクティベートされたブレークポイントは無効になっており、半透明で表示されている

DOM 変更ブレークポイント

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

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

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

図 5: DOM 変更ブレークポイントの作成時に表示されるコンテキスト メニュー

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

• [Subtree modifications]: 現在選択されているノードの子が削除、追加、または子の内容が変更されたときにトリガーされます。 子ノードの属性が変更された場合、または現在選択されているノードが変更された場合はトリガーされません。

• [Attributes modifications]:現在選択されているノードに対して属性が追加または削除された場合、あるいは属性値が変更された場合にトリガーされます。

• [Node Removal]:現在選択されているノードが削除された場合にトリガーされます。

XHR/Fetch ブレークポイント

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

注: この機能は Fetch リクエストとも連携します。

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

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

1. [Sources] タブをクリックします。
2. [XHR Breakpoints] ペインを展開します。
3. [Add breakpoint] をクリックします。
4. 出現時に一時停止する文字列を入力します。 DevTools は、この文字列が XHR のリクエスト URL に出現するすべての箇所で一時停止します。
5. Enter を押して確認します。

図 6: [XHR Breakpoints] での URL に org を含むすべてのリクエストに対する XHR ブレークポイントの作成

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

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

1. [Sources] タブをクリックします。
2. [Event Listener Breakpoints] ペインを展開します。 DevTools に [Animation] といったイベント カテゴリのリストが表示されます。
3. 発生したら一時停止するイベントのカテゴリにチェックを入れるか、またはカテゴリを展開して特定のイベントにチェックを入れるかします。

図 7: deviceorientation のイベント リスナー ブレークポイントの作成

例外ブレークポイント

例外ブレークポイントは、捕捉された例外または捕捉されていない例外をスローしているコード行で一時停止する場合に使用します。

1. [Sources] タブをクリックします。
2. [Pause on exceptions] をクリックします{:.devtools-inline}。 有効になると青色に変わります。
3. (オプション) 捕捉されていないで例外に加えて捕捉された例外でも一時停止する場合は、[Pause On Caught Exceptions] チェックボックスにチェックを入れます。

図 7: 捕捉されていない例外で一時停止した状態

関数ブレークポイント

特定の関数が呼び出されたあらゆる場合に一時停止するときに、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.

debug() を DevTools コンソールから呼び出している場合、対象の関数がスコープ内にあるようにするには少しの手間が必要となります。 次のような方法をとることもできます。

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

フィードバック