JavaScript デバッグ リファレンス

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

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 で一時停止されています。[ステップ オーバー] を押すと、DevTools はステップ オーバー対象の関数(BC)のすべてのコードを実行します。その後、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](ステップアウト)をクリックして、関数の残りの部分を実行します。

「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 がその時点までのすべてのコードを実行し、その行で一時停止します。

[Continue to here] を選択します。

スクリプト実行を再開

一時停止後にスクリプトの実行を再開するには、[Resume Script Execution] スクリプト実行を再開 をクリックします。スクリプトは、次のブレークポイントまで実行されます(存在する場合)。

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

スクリプト実行の強制

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

[Force script execution] を選択している。

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

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

Threads ペイン

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

たとえば、メイン スクリプトと Service Worker スクリプトの両方のブレークポイントで一時停止したとします。Service Worker コンテキストのローカル プロパティとグローバル プロパティを表示する必要があるが、[ソース] パネルにはメインのスクリプト コンテキストが表示されています。[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 でも、これらの式を同じように処理します。

カンマ区切りの式を使用するステップ。

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

  • 圧縮されたコードとオーサリングされたコードの間。
  • ソースマップを使用して、圧縮されたコードを元のコードの観点からデバッグする場合。つまり、セミコロンが表示されている場合、デバッグする実際のソースが圧縮されていても、セミコロンは必ずステップ実行できるようになっています。

ローカル プロパティ、閉鎖プロパティ、グローバル プロパティを表示、編集する

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

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

[スコープ] ペイン。

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

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

コード行で一時停止した状態で、[Call Stack] ペインを使用して、この時点に至ったコールスタックを表示します。

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

[Call Stack] ペイン。

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

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

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

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

  1. ブレークポイントで関数の実行を一時停止する。[Call Stack] ペインには関数の呼び出し順序が記録されます。
  2. [Call Stack] ペインで関数を右クリックし、プルダウン メニューから [Restart フレーム] を選択します。

    プルダウン メニューから [フレームを再起動] を選択します。

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

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 increment ステートメントをステップを実行します。現在の値を増分しています。 現在の値が増加している(value = 2)。
  5. 必要に応じて、[スコープ] ペインで値をダブルクリックして編集し、目的の値を設定します。 [スコープ] ペインで値を編集する。
  6. bar() フレームを再起動して、increment ステートメントをさらに数回実行してみてください。値は増え続けます。 bar() フレームを再度再開します。

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

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

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

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

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

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

コールスタック

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

無視リストのフレームを表示します。

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

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

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

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

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

非同期呼び出しフレーム。

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

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

[Copy Stack Trace] を選択します。

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

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

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

[Page] ペインを使用してファイルツリー内を移動します。

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

フレームワーク(ReactAngular など)を使用してウェブ アプリケーションを開発する場合、ビルドツール(webpackVite など)によって生成されるファイルは圧縮されるため、ソースの移動が困難な場合があります。

ソースを見つけやすくするために、[ソース] > [ページ] ペインでは、ファイルを次の 2 つのカテゴリにグループ化できます。

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

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

作成済み / デプロイ済みでファイルをグループ化します。

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

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

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

無視リストのソースを非表示にする前と後

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

スクリプトを無視してデバッグ中にスキップする。無視されると、[Call Stack] ペインでスクリプトが不明瞭になり、コードをステップ実行する際にスクリプトの関数を使用しません。

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

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

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

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

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

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

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

無視リストに含まれるソースを非表示にしなかった場合は、ファイルツリーで該当するソースを選択し、事前警告です。 警告バナーで [無視リストから削除] または [設定] をクリックします。

選択した無視されるファイルには、[Remove] ボタンと [Configure] ボタンが表示されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Watch] ペイン

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

スクリプトの検査と編集

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

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

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

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

複数の行で表示される、プリティ プリントされた長いコード行。行の続きであることを示す「-」。

圧縮されたファイルを読み込んだときに表示するには、[Editor] の左下にある { } をクリックします。

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

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

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

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

スクリプトを編集する

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

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

  1. [ソース] パネルの [エディタ] ペインでファイルを開きます。
  2. [エディタ] ペインで変更を加えます。
  3. Command+S キー(Mac)または Ctrl+S キー(Windows、Linux)を押して保存します。DevTools により、JS ファイル全体が Chrome の JavaScript エンジンにパッチが適用されます。

    [Editor] ペイン。

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

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

実行の一時停止中も、現在の関数を編集し、次の制限のもとで変更を適用できます。

  • [コールスタック] の最上位にある関数のみ編集できます。
  • スタックの下位にある同じ関数を繰り返し呼び出してはいけません。

関数をライブエディットするには:

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

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

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

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

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

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

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

JavaScript を無効にする

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