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

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

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

すべての行を順番に確認できますが、面倒な場合があります。関心のある行にコード行ブレークポイントを設定し、[スクリプトの実行を再開] を押すこともできますが、もっと速い方法があります。

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

スクリプトの実行を再開

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

スクリプトの強制実行

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

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

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

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

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

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

重要なポイント: Chrome バージョン 108 以降では、Debugger でセミコロン区切り（;）とカンマ区切り（,）の両方の式をステップ実行できるようになりました。

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

function foo() {}

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

bar();

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

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

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

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

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

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

コード行を一時停止した状態で、[スコープ] ペインを使用して、プロパティと値の表示および編集を行います。 グローバル スコープの変数を使用します。

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

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

現在の呼び出しスタックを表示する

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

エントリをクリックすると、その関数が呼び出されたコード行に移動します。青い矢印アイコン 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 増分ステートメントをステップ実行します。 現在の値が value = 2 に増加していることに注意してください。
5. 必要に応じて、[スコープ] ペインで値をダブルクリックして編集し、目的の値を設定します。

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

   重要なポイント: 値が 0 にリセットされないのはなぜですか？

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

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

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

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

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

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

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

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

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 など）でファイルが圧縮されるため、ソースの操作が難しくなることがあります。

ニュース提供元を探すには、[ソース] >[Page] ペインでは、ファイルを 2 つのカテゴリに分類できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

非表示または無視するディレクトリとスクリプトは、 [設定] >無視リスト。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スクリプトの検査と編集

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

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

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

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

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

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

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

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

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

スクリプトを編集する

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

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

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

JavaScript を無効にする

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