JavaScript デバッグ リファレンス

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 を一時停止しています。[Step over] を押すと、ステップオーバーする関数（B と C）のすべてのコードが実行されます。DevTools は D で一時停止します。

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

デバッグする問題に関連する関数呼び出しを含むコード行で一時停止したら、[ステップイン] をクリックして、その関数をさらに調査します。

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

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 を一時停止しています。[Step into] を押すと、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 で一時停止します。

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

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

すべての行を順番に確認できますが、これは面倒な場合があります。目的の行にコード行のブレークポイントを設定して、[Resume Script Execution] キーを押すこともできますが、より高速な方法があります。

目的のコード行を右クリックして、[Continue to here] を選択します。DevTools はその時点までのすべてのコードを実行し、その行で一時停止します。

スクリプトの実行を再開

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

スクリプトを強制的に実行する

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

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

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

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

たとえば、メイン スクリプトと Service Worker スクリプトの両方のブレークポイントで一時停止したとします。Service Worker コンテキストのローカル プロパティとグローバル プロパティを表示する必要がありますが、[Sources] パネルにはメインのスクリプト コンテキストが表示されます。[Threads] ペインで Service Worker のエントリをクリックすると、そのコンテキストに切り替えることができます。

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

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

function foo() {}

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

bar();

圧縮されている場合は、カンマ区切りの foo(),foo(),42 式が含まれます。

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

Debugger は、このような式を同じようにステップ実行します。

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

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

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

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

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

上のスクリーンショットでは、青色の枠線が [範囲] ペインになっています。

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

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

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

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

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

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

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

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

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

   

フレームの再起動の仕組みを理解するには、次のコードを考えてみましょう。

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 増分ステートメントをステップ実行します。 現在の値が value = 2 のように増えています。
5. 必要に応じて、[スコープ] ペインで値をダブルクリックして編集し、目的の値を設定します。

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

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

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

1. 次に、コールスタックの foo() フレームを再起動します。 再び値が 0 になっていることを確認します。

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

無視リストに登録したフレームを表示

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

サードパーティのフレームを含む完全なコールスタックを表示するには、[コールスタック] セクションで [無視リストに登録したフレームを表示] を有効にします。

こちらのデモページでお試しください。

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

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

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

この場合、[Call Stack] には非同期呼び出しフレームを含む通話履歴全体が表示されます。

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

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

出力の例を次に示します。

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

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

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

作成されてデプロイされたファイルをファイルツリーでグループ化する

フレームワーク（React や Angular など）を使用してウェブ アプリケーションを開発する場合、ビルドツール（webpack や Vite など）でファイルが圧縮されるため、ソースの操作が難しくなることがあります。

[Sources] > [Page] ペインでファイルを 2 つのカテゴリにグループ化して、ソースを簡単に参照できます。

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

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

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

作成したコードだけに集中できるように、[Sources] > [Page] ペインでは、 [Settings] > [Ignore List] に追加されたすべてのスクリプトまたはディレクトリがデフォルトでグレー表示されます。

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

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

スクリプトを無視してデバッグ中にスキップする。無視すると、[コールスタック] ペインでスクリプトが隠され、コードをステップ実行する際にスクリプトの関数がステップ実行されなくなります。

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

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

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

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

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

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

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

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

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

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

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

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

[Call Stack] ペインでスクリプトを無視する

[Call Stack] ペインからスクリプトを無視するには:

1. スクリプトから関数を右クリックします。
2. [無視リストにスクリプトを追加] を選択します。

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

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

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

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

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

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

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

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

• [Add Expression] をクリックして、新しい watch 式を作成します。
• [更新] をクリックして、既存のすべての式の値を更新します。値は、コードをステップ実行しながら自動的に更新されます。
• 式にカーソルを合わせて [Delete Expression] をクリックして削除します。

スクリプトの検査と編集

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

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

圧縮されたファイルを読み取れるようにする

デフォルトでは、[Sources] パネルは圧縮されたファイルをプリティ プリントします。プリティ出力されると、エディタは 1 つの長いコード行を複数行に示し、- によって行の継続であることを示します。

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

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

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

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

この動作を構成するには、 [Settings] > [Preferences] > [Sources] をご覧ください。

スクリプトを編集する

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

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

1. [Sources] パネルの [Editor] ペインでファイルを開きます。
2. [エディタ] ペインで変更を行います。

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

   

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

一時停止した関数をリアルタイムで編集する

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

• コールスタックの一番上の関数のみ編集できます。
• スタックの下位の同じ関数に対して再帰呼び出しを行わないようにします。

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

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

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

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

スクリプト内のテキストの検索と置換

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

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

見つかったテキストを置き換えるには:

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

JavaScript を無効にする

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