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

Technical Writer, Chrome DevTools & Lighthouse

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

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

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

ブレークポイントの種類	使用に適した一時停止の対象...
コード行	厳密なコード部分。
条件付きコード行	厳密なコード部分、ただし他の何らかの条件が真であるときに限る。
DOM	特定の DOM ノードまたはその子を変更または削除するコード。
XHR	指定する文字列パターンが XHR URL に含まれる場合。
イベントリスナー	`click` などのイベントが発生した後に実行されるコード。
例外	捕捉された例外または捕捉されていない例外をスローするコード行。
関数	特定の関数が呼び出されるあらゆる場合。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DOM 変更ブレークポイント

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

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

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

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

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

XHR/Fetch ブレークポイント

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

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

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

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

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

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

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

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

例外ブレークポイント

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

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

関数ブレークポイント

特定の関数が呼び出されたあらゆる場合に一時停止するときに、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 コンソールから呼び出している場合、対象の関数がスコープ内にあるようにするには少しの手間が必要となります。次のような方法をとることもできます。

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

フィードバック

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)