JavaScript デバッグ リファレンス

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

キーポイント: 実行が一時停止している間、現在の関数を再起動したり、ライブ編集したりすることもできます。

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

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

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

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

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

デバッグしている問題に関連しない関数を含むコード行で一時停止している場合は、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 で一時停止しています。[ステップ オーバー] を押すと、ステップオーバーする関数（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 で一時停止しています。[ステップアウト] を押すと、DevTools は getName() の残りのコード（この例では B）を実行し、C で停止します。

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

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

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

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

スクリプトの実行を再開

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

スクリプトの強制実行

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

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

Web Worker または Service Worker を操作する場合は、[スレッド] ペインに表示されているコンテキストをクリックして、そのコンテキストに切り替えます。青い矢印アイコンは、現在選択されているコンテキストを表します。

上のスクリーンショットの [スレッド] ペインは青色の枠線で囲まれています。

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

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

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

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

function foo() {}

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

bar();

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

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

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

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

• 圧縮されたコードと作成されたコードの間。
• ソースマップを使用して、元のコードに基づいて圧縮されたコードをデバッグする場合。つまり、セミコロンが表示されている場合、デバッグしている実際のソースが圧縮されている場合でも、セミコロンまでステップできることを常に想定できます。

ローカル プロパティ、クロージャ プロパティ、グローバル プロパティを表示、編集する

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

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

上のスクリーンショットの [スコープ] ペインは青色の枠線で囲まれています。

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

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

エントリをクリックすると、その関数が呼び出されたコード行に移動します。青い矢印アイコンは、DevTools で現在ハイライト表示されている関数を表します。

上のスクリーンショットの [Call Stack] ペインは青色の枠線で囲まれています。

注: コードの行で一時停止していない場合、[Call Stack] ペインは空になります。

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

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

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

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 にリセットされないのはなぜですか？

フレームの再起動では引数はリセットされません。つまり、再起動しても関数呼び出し時の初期状態は復元されません。代わりに、実行ポインタを関数の先頭に移動します。

したがって、現在の引数値は、同じ関数の再起動後もメモリに保持されます。

1. 次に、[呼び出しスタック] で foo() フレームを再起動します。 値が再び 0 になっていることに注意してください。
   キーポイント: 値が 0 にリセットされる理由

JavaScript では、引数に対する変更は関数外には表示されません（反映されません）。ネストされた関数は、メモリ内の位置ではなく値を受け取ります。1. スクリプトの実行を再開（F8）して、このチュートリアルを完了します。

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

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

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

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

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

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

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

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

キーポイント: 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 は、ビルドツールから提供されたソースマップに基づいてこれらのファイルを生成します。
• がデプロイされました。ブラウザが読み取る実際のファイル。通常、これらのファイルは圧縮されます。

グループ化を有効にするには、ファイルツリーの上部にあるその他メニューで、[] > [作成者/デプロイ別にファイルをグループ化] オプションを有効にします。

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

注: これは Chrome バージョン 106 以降で利用可能な プレビュー機能です。

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

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

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

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

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

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 式を監視できます。

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

スクリプトの検査と編集

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

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

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

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

読み込まれた最小化されたファイルを表示するには、エディタの左下にある { } をクリックします。

コードブロックを閉じる

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

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

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

スクリプトを編集する

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

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

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

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

   

   上のスクリーンショットの [エディタ] ペインは青色の枠線で囲まれています。

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

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

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

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

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

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

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

このワークフローを学ぶには、以下の動画をご覧ください。

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

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

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

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

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

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

JavaScript を無効にする

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