JavaScript デバッグ リファレンス

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

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

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

カーソルを合わせてクラスまたは関数のプロパティをプレビューする

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

コードをステップスルーする

コードが一時停止したら、一度に 1 つの式を実行し、その過程で制御フローとプロパティ値を調べます。

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

デバッグする問題とは無関係な関数を含むコード行で一時停止したら、[ステップ オーバー] をクリックすると、関数を実行せずに実行できます。

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

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 を一時停止しています。[Step out] を押すと、DevTools は getName() の残りのコード（この例では B）を実行し、C で一時停止します。

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

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

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

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

スクリプトの実行を再開

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

スクリプトの強制実行

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

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

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

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

たとえば、メイン スクリプトとサービス ワーカー スクリプトの両方でブレークポイントで停止しているとします。Service Worker コンテキストのローカル プロパティとグローバル プロパティを表示したいが、[ソース] パネルにメイン スクリプト コンテキストが表示されている。[Threads] ペインで 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();

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

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

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

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

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

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

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

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

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

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

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

注: コード行で一時停止しないと、[Call Stack] ペインには何も表示されません。

コールスタック内の関数（フレーム）を再起動する

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

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

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

2. [Call Stack] ペインで関数を右クリックし、プルダウン メニューから [Restart frame] を選択します。

   

   注: コールスタック内の任意の関数フレームを再起動できます（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 は、ビルドツールから提供されたソースマップに基づいてこれらのファイルを生成します。
• がデプロイされました。ブラウザが読み取る実際のファイル。通常、これらのファイルは圧縮されます。

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

無視リストに含まれるソースをファイルツリーで非表示にする

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

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

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

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

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

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

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

A は、信頼できるサードパーティ ライブラリです。デバッグしている問題がサードパーティ ライブラリとは無関係であることが確実な場合は、このスクリプトを無視してください。

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

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

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

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

それ以外の場合は、 [設定] > [無視リスト] のリストから、非表示または無視するディレクトリやスクリプトを削除できます。

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

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

1. ファイルを開きます。
2. 任意の場所を右クリックします。
3. [無視リストにスクリプトを追加] を選択します。

[設定] > [無視リスト] の無視リストからスクリプトを削除できます。

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

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

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

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

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

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

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

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

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

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

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

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

スクリプトの検査と編集

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

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

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

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

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

コードブロックを折りたたむ

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

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

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

スクリプトを編集する

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

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

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

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

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

JavaScript を無効にする

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