JavaScript デバッグ リファレンス

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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 を一時停止しています。[Step into] を押すと、DevTools によってこのコード行が実行され、一時停止する B。

コードの行から抜ける

デバッグしている問題とは無関係な関数内で一時停止したら、[ステップ ステップアウト を実行して、残りの部分を実行します。 確認します。

[ステップアウト] を選択しています。

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

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] をクリックすると、 getName(): この例では B で、C で一時停止します。

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

長い関数をデバッグする場合は、問題に関係のないコードが多数含まれている可能性があります。 説明します。

すべての行を順番に確認できますが、これは面倒な場合があります。コード行を設定することもできます。 一時停止して、[Resume Script Execution] を押す スクリプトの実行を再開 ですが、もっと早い方法があります。

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

[ここに進む] を選択します。

スクリプトの実行を再開

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

[スクリプトの実行を再開] を選択する。

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

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

[Force script execution] を選択する。

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

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

[Threads] ペイン

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

たとえば、メイン スクリプトとサービスの両方のブレークポイントで一時停止したとします。 使用することもできます。Service Worker コンテキストのローカル プロパティとグローバル プロパティを表示する必要がありますが、 [Sources] パネルには main スクリプトのコンテキストが表示されています。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() フレームを再起動します。 bar() フレームを再起動する。
  4. F9 を押して、value 増分ステートメントをステップ実行します。 現在の値を増分しています。 現在の値は value = 2 に増加しています。
  5. 必要に応じて、[スコープ] ペインで値をダブルクリックして編集し、目的の値を設定します。 [Scopes] ペインで値を編集する。

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

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

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

  1. 次に、コールスタックの foo() フレームを再開します。 foo() フレームの再起動。 ここでも値が 0 になっていることに注意してください。 ALT_TEXT_HERE

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

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

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

コールスタック。

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

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

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

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

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

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

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

作成元 / デプロイ別にファイルをグループ化します。

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

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

このようなスクリプトを完全に非表示にするには、[ソース] >ページ >その他メニュー。 >無視リストに含まれるソースを非表示 試験運用中。 にします。

無視リストに含まれるソースを非表示にする前後。

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

スクリプトを無視してデバッグ中にスキップする。無視した場合、スクリプトは [Call Stack] ペインでは非表示になり、ステップを進めるときにスクリプトの関数が 使用できます。

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

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

A は信頼できるサードパーティ ライブラリです。デバッグ対象の問題が確かに がサードパーティ ライブラリと無関係な場合は、スクリプトを無視できます。

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

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

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

ディレクトリまたはスクリプト ファイルのオプションを無視します。

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

選択した無視するファイルに [削除] ボタンと [構成] ボタンが表示されている。

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

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

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

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

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

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

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

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

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

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

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

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

設定] をタップします。 の設定をご覧ください >無視リスト。

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

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

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

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

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

[Watch] ペイン。

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

スクリプトの検査と編集

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

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

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

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

複数行に表示される、プリティ プリントされた長いコード行（「-」付き）線の継続を示します。

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

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

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

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

この動作を構成するには、設定] をタップします。 設定 >[設定] >出典。

スクリプトを編集する

バグを修正するときには、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. バーにクエリを入力します。 検索。 必要に応じて、次の操作を行うことができます。 <ph type="x-smartling-placeholder">
      </ph>
    • [大文字と小文字を区別します。 Match Case] をクリックして、クエリで大文字と小文字を区別します。
    • [[正規表現] ボタン。 正規表現を使用] をクリックして、正規表現を使用して検索します。
  4. Enter キーを押します。前または次の検索結果に移動するには、上ボタンまたは下ボタンを押します。

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

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

JavaScript を無効にする

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