JavaScript デバッグ リファレンス

Kayce Basques

Sofia Emelianova

Chrome DevTools のデバッグ機能に関する包括的なリファレンスでは、新しいデバッグ ワークフローをご確認ください。

デバッグの基本については、Chrome DevTools で JavaScript のデバッグを開始するをご覧ください。

ブレークポイントを使用してコードを一時停止する

ブレークポイントを設定して、コードの実行中にコードを一時停止できるようにします。ブレークポイントを設定する方法については、ブレークポイントを使用してコードを一時停止するをご覧ください。

一時停止時の値を確認する

実行が一時停止している間、デバッガは現在の関数内のすべての変数、定数、オブジェクトをブレークポイントまで評価します。デバッガには、対応する宣言の横に現在の値がインラインで表示されます。

コンソールを使用して、評価された変数、定数、オブジェクトをクエリできます。

重要なポイント: 実行が一時停止している間、現在の関数を再起動してライブ編集できます。

ホバー時にクラスと関数のプロパティをプレビューする

実行が一時停止しているときに、クラス名または関数名にカーソルを合わせると、そのプロパティをプレビューできます。

コードをステップ実行する

コードが一時停止したら、式を 1 つずつステップ実行し、制御フローやプロパティ値を調べます。

コード行をステップオーバーする

デバッグしている問題に関連しない関数を含むコード行で一時停止している場合は、[Step over] step_over をクリックして、関数にステップインせずに実行します。

たとえば、次のコードをデバッグしているとします。

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

A で一時停止しています。step_over を押すと、ステップオーバーする関数（B と C）内のすべてのコードが実行されます。DevTools は D で一時停止します。

コード行にステップインする

デバッグしている問題に関連する関数呼び出しで一時停止したら、[Step into] をクリックしてその関数を調査します。

たとえば、次のコードをデバッグしているとします。

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

A で一時停止しています。[ステップイン] を押すと、DevTools はこの行のコードを実行し、B で停止します。

コード行からステップアウトする

デバッグしている問題に関連していない関数内で一時停止した場合は、[step_out] をクリックして、関数の残りのコードを実行します。

たとえば、次のコードをデバッグしているとします。

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

A で一時停止しています。[step_out] をクリックすると、DevTools は getName() の残りのコード（この例では B）を実行し、C で停止します。

特定の行までのすべてのコードを実行する

長い関数をデバッグする場合、デバッグしている問題に関係のないコードが多数存在することがあります。

すべての行をステップ実行することもできますが、面倒な作業になる可能性があります。関心のある行にコード行ブレークポイントを設定して再開することもできますが、もっと速い方法があります。

関心のあるコード行を右クリックして、[Continue to here] を選択します。DevTools は、その行まですべてのコードを実行し、その行で停止します。

スクリプトの実行を再開

一時停止した後でスクリプトの実行を続行するには、[再開] をクリックします。DevTools は、次のブレークポイント（存在する場合）までスクリプトを実行します。

スクリプトの強制実行

すべてのブレークポイントを無視してスクリプトの実行を強制的に再開するには、[スクリプトの実行を再開] resume を長押しして、[スクリプトの実行を強制] play_arrow を選択します。

スレッド コンテキストを変更する

ウェブワーカーまたはサービス ワーカーを操作する場合は、[スレッド] ペインに表示されているコンテキストをクリックして、そのコンテキストに切り替えます。青い矢印アイコンは、選択されているコンテキストを表します。

[スレッド] ペインが青い枠で囲まれます。

たとえば、メイン スクリプトとサービス ワーカー スクリプトの両方でブレークポイントで停止しているとします。サービス ワーカー コンテキストのローカル プロパティとグローバル プロパティを表示したいが、[ソース] パネルにメイン スクリプト コンテキストが表示されている。[スレッド] ペインでサービス ワーカーのエントリをクリックすると、そのコンテキストに切り替えることができます。

カンマ区切りの式をステップ実行する

ポイント: Chrome バージョン 108 以降では、デバッガでセミコロンで区切られた式とカンマで区切られた式の両方をステップ実行できます。

圧縮されたコードをデバッグするには、カンマ区切りの式をステップ実行します。たとえば、次のコードについて考えてみましょう。

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

圧縮すると、カンマ区切りの foo(),foo(),42 式が含まれます。

function foo(){}function bar(){return foo(),foo(),42}bar();

デバッガは、このような式も同様にステップ実行します。

したがって、ステップ動作は同じです。

• 圧縮されたコードと作成されたコードの間。
• ソースマップを使用して、元のコードに基づいて圧縮されたコードをデバッグする場合。つまり、セミコロンが見つかった場合は、デバッグ対象のソースが圧縮されている場合でも、常にステップスルーを期待できます。

ローカル プロパティ、クローズ プロパティ、グローバル プロパティの表示と編集

コードの行で停止しているときに、[スコープ] ペインを使用して、ローカル スコープ、クロージャー スコープ、グローバル スコープのプロパティと変数の値を表示、編集します。

• プロパティ値をダブルクリックして変更します。
• 列挙できないプロパティはグレー表示になります。

[スコープ] ペインが青い枠で囲まれます。

現在のコールスタックを表示する

コード行で停止しているときに、[コールスタック] ペインを使用して、このポイントに到達したコールスタックを確認します。

エントリを選択して、その関数が呼び出されたコード行にジャンプします。青い矢印アイコンは、DevTools がハイライト表示している関数を表します。

[コールスタック] ペインが青い枠で囲まれます。

注: コード行で一時停止していない場合、[コールスタック] ペインは空白になります。

呼び出しスタック内の関数（フレーム）を再起動する

デバッグ フロー全体を再起動せずに関数の動作を観察して再実行するには、この関数が一時停止しているときに単一の関数の実行を再開します。つまり、コールスタック内の関数のフレームを再起動できます。

フレームを再起動するには:

1. ブレークポイントで関数の実行を一時停止する。[コールスタック] ペインには、関数呼び出しの順序が記録されます。

2. [呼び出しスタック] ペインで関数を右クリックし、プルダウン メニューから [フレームを再起動] を選択します。

   注: コールスタック内の任意の関数フレームを再起動できます（WebAssembly、非同期、ジェネレータ関数を除く）。

フレームの再開の仕組みを理解するには、次の例について考えてみましょう。

function foo(value) {
  console.log(value);
  bar(value);
}

function bar(value) {
  value++;
  console.log(value);
  debugger;
}

foo(0);

foo() 関数は 0 を引数として受け取り、ログに記録してから bar() 関数を呼び出します。bar() 関数は、引数をインクリメントします。

次のように、両方の関数のフレームを再起動してみてください。

1. サンプルコードを新しいスニペットにコピーして実行します。実行は debugger コード行ブレークポイントで停止します。

   注意: 実行が一時停止しているときに、呼び出しスタック フレームの順序をプログラムで変更しないでください。これにより、予期しないエラーが発生する可能性があります。

2. デバッガには、関数宣言の横に現在の値 value = 1 が表示されます。

3. bar() フレームを再起動します。

4. F9 を押して、値の増分ステートメントをステップ実行します。 現在の値が value = 2 に増加していることに注意してください。

5. 必要に応じて、[スコープ] ペインで値をダブルクリックして編集し、目的の値を設定します。

6. bar() フレームを再起動して、インクリメント ステートメントをさらに数回ステップ実行してみてください。値は増加し続けます。

   キーポイント: フレームの再起動では引数はリセットされないため、値は 0 にリセットされません。つまり、再起動しても関数呼び出し時の初期状態は復元されません。代わりに、実行ポインタを関数の先頭に移動します。したがって、現在の引数値は、同じ関数の再起動後もメモリに保持されます。

7. [呼び出しスタック] で foo() フレームを再起動します。 値が再び 0 になっていることに注意してください。

   キーポイント: 値は 0 にリセットされます。JavaScript では、引数の変更は関数外には表示されません（反映されません）。ネストされた関数は、メモリ内の値を受け取ります（位置は受け取りません）。

8. スクリプトの実行を再開（F8）して、このチュートリアルを完了します。

無視リストのフレームを表示

デフォルトでは、[Call Stack] ペインにはコードに関連するフレームのみが表示され、設定 [Settings] > [Ignore List] に追加されたスクリプトは除外されます。

サードパーティ フレームを含む完全なコールスタックを表示するには、[Call Stack] セクションで [Show ignore-listed frames] を有効にします。

こちらのデモで試すことができます。

1. [ソース] パネルで、src > app > app.component.ts ファイルを開きます。
2. increment() 関数にブレークポイントを設定します。
3. [コールスタック] セクションで、[無視リストに登録されたフレームを表示] チェックボックスをオンまたはオフにして、コールスタック内の関連するフレームまたはすべてのフレームのリストを確認します。

非同期フレームを表示する

使用しているフレームワークでサポートされている場合、DevTools は非同期コードの両方の部分をリンクして、非同期オペレーションをトレースできます。

この場合、[コールスタック] には、非同期呼び出しフレームを含む呼び出し履歴全体が表示されます。

Key Point DevTools は、console.createTask() API メソッドに基づいてこの「非同期スタック タグ付け」機能を実装しています。API の実装はフレームワークに任されています。たとえば、Angular はこの機能をサポートしています。

スタック トレースをコピー

[Call Stack] ペインで任意の場所を右クリックし、[Copy stack trace] を選択して、現在の呼び出しスタックをクリップボードにコピーします。

出力の例を以下に示します。

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

ファイルツリーを操作する

[ページ] ペインを使用して、ファイルツリーを移動します。

作成およびデプロイされたファイルをファイルツリーにグループ化

試験運用版: このプレビュー機能は試験運用版であり、Chrome バージョン 104 以降で利用できます。

フレームワーク（React や Angular など）を使用してウェブ アプリケーションを開発する場合、ビルドツール（webpack や Vite など）によって生成された圧縮ファイルが原因で、ソースを移動するのが難しい場合があります。

ソースを移動しやすいように、[ソース] > [ページ] ペインでファイルを次の 2 つのカテゴリにグループ化できます。

• コードの作成者。IDE で表示するソースファイルに似ています。DevTools は、ビルドツールから提供されたソースマップに基づいてこれらのファイルを生成します。
• がデプロイされました。ブラウザが読み取る実際のファイル。通常、これらのファイルは圧縮されます。

グループ化を有効にするには、ファイルツリーの上部にあるメニューで、more_vert > [Group files by Authored/Deployed] オプションをクリックします。

無視リストのソースをファイルツリーから非表示にする

試験運用版: これは Chrome バージョン 106 で利用可能なプレビュー機能です。

作成したコードにのみ集中できるように、[ソース] > [ページ] ペインでは、デフォルトで [設定] > [無視リスト] に追加されたすべてのスクリプトまたはディレクトリがグレー表示されます。

このようなスクリプトをすべて非表示にするには、[ソース] > [ページ] > more_vert > [無視リストに登録されたソースを非表示にする] を選択します。

スクリプトまたはスクリプトのパターンを無視する

スクリプトを無視して、デバッグ中にスキップします。無視すると、スクリプトは [コールスタック] ペインで非表示になり、コードをステップ実行するときにスクリプトの関数にステップインすることはありません。

たとえば、次のコードをステップ実行するとします。

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A は、信頼できるサードパーティ ライブラリです。デバッグしている問題がサードパーティ ライブラリに関連していないと確信できる場合は、スクリプトを無視することをおすすめします。

ファイルツリーからスクリプトまたはディレクトリを無視する

個々のスクリプトまたはディレクトリ全体を無視するには:

1. [ソース] > [ページ] で、ディレクトリまたはスクリプト ファイルを右クリックします。
2. [無視リストにディレクトリ/スクリプトを追加] を選択します。

無視リストに登録されたソースを非表示にしていない場合は、ファイルツリーでそのようなソースを選択し、警告警告バナーで [無視リストから削除] または [構成] をクリックします。

非表示または無視されているディレクトリとスクリプトは、設定の [設定] > [無視リスト] でリストから削除できます。

エディタペインからスクリプトを無視する

[エディタ] ペインでスクリプトを無視するには:

1. ファイルを開きます。
2. 任意の場所を右クリックします。
3. [Add script to ignore list] を選択します。

無視リストからスクリプトを削除するには、設定の [設定] > [無視リスト] に移動します。

[コールスタック] ペインからスクリプトを無視する

[コールスタック] ペインでスクリプトを無視するには:

1. スクリプトの関数を右クリックします。
2. [Add script to ignore list] を選択します。

無視リストからスクリプトを削除するには、設定の [設定] > [無視リスト] に移動します。

設定からスクリプトを無視する

設定 [設定] > [無視リスト] をご覧ください。

任意のページからデバッグコードのスニペットを実行する

コンソールで同じデバッグコードを何度も実行している場合は、スニペットを使用することを検討してください。スニペットは、DevTools 内で作成、保存、実行できる実行可能なスクリプトです。

詳しくは、任意のページからコードのスニペットを実行するをご覧ください。

カスタム JavaScript 式の値を監視する

[ウォッチ] ペインを使用して、カスタム式の値を監視します。有効な JavaScript 式を監視できます。

• [式を追加] 追加をクリックして、新しい Watch 式を作成します。
• [更新] 更新をクリックして、既存のすべての式の値を更新します。コードをステップ実行するときに値が自動的に更新されます。
• 式にカーソルを合わせ、[式を削除] をクリックして削除します。

スクリプトを検査、編集する

[ページ] ペインでスクリプトを開くと、DevTools の [エディタ] ペインにそのコンテンツが表示されます。[エディタ] ペインで、コードを参照して編集できます。

また、ローカルでコンテンツをオーバーライドしたり、ワークスペースを作成して、DevTools で行った変更をローカル ソースに直接保存したりすることもできます。

圧縮されたファイルを読み取り可能にする

デフォルトでは、[ソース] パネルで圧縮されたファイルがプリティ プリントされます。美しく表示すると、エディタで 1 つの長いコード行が複数の行に表示され、行継続であることを示す - が付加される場合があります。

読み込まれた圧縮済みフィールドを表示するには、エディタの左下にある data_object をクリックします。

コードブロックを閉じる

コードブロックを折りたたむには、左側の列の行番号にカーソルを合わせ、arrow_drop_down [Collapse] をクリックします。

コードブロックを開くには、その横にある {...} をクリックします。

この動作を構成するには、設定 [設定] > [設定] > [ソース] をご覧ください。

スクリプトを編集する

バグを修正する際に、JavaScript の変更をテストすることがよくあります。外部ブラウザで変更を加えてページを再読み込みする必要はありません。スクリプトは DevTools で編集できます。

スクリプトを編集するには:

1. [ソース] パネルの [エディタ] ペインでファイルを開きます。
2. [エディタ] ペインで変更を加えます。

3. Command+S キー（Mac）または Ctrl+S キー（Windows、Linux）を押して保存します。DevTools は、JavaScript ファイル全体を Chrome の JavaScript エンジンにパッチします。

   

   [エディタ] ペインが青色で囲まれます。

一時停止した関数をライブで編集する

注: この機能は Chrome バージョン 105 以降で利用できます。

実行が一時停止している間、現在の関数を編集して変更をライブで適用できますが、次の制限があります。

• 編集できるのは、[コールスタック] の最上位の関数のみです。
• スタック内の下位で同じ関数を再帰的に呼び出すことはできません。

キーポイント: 変更を適用すると、デバッガは関数を再起動します。そのため、関数の再起動の制限も適用されます。WebAssembly、非同期、ジェネレータの関数は再起動できません。

関数をライブ編集するには:

1. ブレークポイントで実行を一時停止する。
2. 一時停止した関数を編集します。
3. Command / Control+S キーを押して変更を適用します。デバッガは関数を再起動します。
4. 実行を続行します。

このワークフローを動画で確認する

この例では、addend1 変数と addend2 変数は、最初は間違った string 型になっています。つまり、数値を加算するのではなく、文字列を連結します。これを修正するため、ライブ編集中に parseInt() 関数が追加されます。

スクリプトのテキストを検索して置換する

スクリプト内のテキストを検索するには:

1. [ソース] パネルの [エディタ] ペインでファイルを開きます。
2. 組み込みの検索バーを開くには、Command+F キー（Mac）または Ctrl+F キー（Windows、Linux）を押します。
3. バーにクエリを入力します。 必要に応じて、次の操作を行うこともできます。
   • [大文字と小文字を区別] をクリックして、クエリで大文字と小文字を区別します。
   • [正規表現を使用] をクリックして、正規表現で検索します。
4. Enter キーを押すと、前後の検索結果に移動するには、上矢印または下矢印を押します。

検索したテキストを置換するには:

1. 検索バーで [置換] をクリックします。
2. 置換するテキストを入力し、[置換] または [すべて置換] をクリックします。

JavaScript を無効にする

Chrome DevTools で JavaScript を無効にするをご覧ください。