JavaScript デバッグ機能

この記事では、コード行ブレークポイントを設定する方法など、Microsoft Edge DevTools でデバッガー機能を使用する方法について説明します。

関連項目:

• JavaScript のデバッグを開始する - チュートリアルチュートリアル。
• ブレークポイントを使用してコードを一時停止する - さまざまな種類のブレークポイントを設定します。

JavaScript コードの表示と編集

バグを修正するときは、JavaScript コードに対する変更を試すことがよくあります。 外部エディターまたは IDE で変更を加え、ファイルをサーバーに再アップロードしてからページを更新する必要はありません。代わりに、変更をテストするために、DevTools で JavaScript コードを直接編集し、結果をすぐに確認できます。

JavaScript ファイルを表示および編集するには:

1. デバッグする Web ページを新しいウィンドウまたはタブで開きます。「 JavaScript のデバッグの概要 」デモ ページを使用できます。

2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

4. [ナビゲーター] ウィンドウで、変更するファイルを選択し、[エディター] ウィンドウで開きます。 デモ ページを使用している場合は、[ get-started.js] を選択します。

5. [エディター] ウィンドウで、ファイルを編集します。 たとえば、デモ ページの関数に onClick を追加alert("The add button was clicked");します。

6. Ctrl + S (Windows、Linux) または Command + S (macOS) を押して保存します。 DevTools は JavaScript ファイルを Microsoft Edge の JavaScript エンジンに読み込み、変更はすぐに有効になります。

   

7. 変更をテストします。 たとえば、デモ ページの [ 数値 1 と数値 2 の追加] ボタンをクリックします。 アラートが表示されます。

DevTools で行った変更は、バグ修正をすばやくテストするのに役立ちますが、一時的なものです。 変更を永続的にするには、ソース コードで変更を行い、ファイルをサーバーに再アップロードする必要があります。

Edge で Copilot を使用してソース コードを説明する

Web ページを検査するときに、[ ソース ] ツールに表示されるソース コードに関する詳細情報が必要になる場合があります。 次のコード行を説明する機能を使用すると、Edge の Copilot のソース コードに関する詳細情報を取得できます。

この機能の詳細については、「 Edge で Copilot を使用してソース コードを説明する」を参照してください。

縮小された JavaScript ファイルをプリティプリントで再フォーマットする

縮小されたファイルを人間が判読できるようにするには、エディター ウィンドウの下部にある [書式 ()] ボタンをクリックします。

ブレークポイントを設定してコードを一時停止する

ランタイムの途中でコードを一時停止するには、ブレークポイントを設定します。 最も基本的で既知の種類のブレークポイントは、コード行ブレークポイントです。

調査する必要があるコードの正確な領域がわかっている場合は、コード行ブレークポイントを使用します。 DevTools は、コードを実行する前に、常に指定されたコード行で一時停止します。

コード行ブレークポイントを設定するには:

1. デバッグする Web ページを新しいウィンドウまたはタブで開きます。「 JavaScript のデバッグの概要 」デモ ページを使用できます。

2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools の アクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

4. [ ナビゲーター ] ウィンドウで、デバッグするコード行を含むファイルを選択します。 デモ ページを使用している場合は、[ get-started.js] を選択します。

5. コード行の行番号の左側にある領域をクリックします。 または、行番号を右クリックし、[ブレークポイントの 追加] を選択します。

   次に、ブレークポイントを示す行番号の横に赤い円が表示されます。

   

コード行のブレークポイントは、特に見る場所がわからない場合や、コードベースが大きい場合は、設定が非効率的な場合があります。 デバッグ時の時間を節約するには、他の種類のブレークポイントを使用する方法とタイミングについて説明します。 「 ブレークポイントを使用してコードを一時停止する」を参照してください。

コードのステップ スルー

コードがブレークポイントで一時停止したら、コードを一度に 1 行ずつステップ実行し、途中で制御フローとプロパティ値を調査します。 ブレークポイントで一時停止する方法については、上記の「 ブレークポイントを設定する」を参照してコードを一時停止します。

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

デバッグ中の問題に関連しない関数を含むコード行で一時停止したら、[ ステップ オーバー ()] ボタンをクリックして、関数をステップインせずに実行します。

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

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2(); // B
    var sum = addend1 + addend2; // C
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value;
}
function getNumber2() {
    return inputs[1].value;
}

を一時停止しています A。 [ステップ オーバー] をクリックすると、DevTools は関数内のすべてのコードをgetNumber1()実行し、 でB一時停止します。 もう一度 [ステップ オーバー ] をクリックすると、DevTools は関数内のすべてのコードを getNumber2() 実行し、 で C一時停止します。

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

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

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

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value; // B
}
function getNumber2() {
    return inputs[1].value;
}

を一時停止しています A。 [ ステップ イン] をクリックすると、DevTools はこのコード行を実行し、 で B一時停止します。

コード行からステップ アウトする

デバッグ中の問題に関連しない関数の内部で一時停止したら、[ ステップ アウト ()] ボタンをクリックして、関数の残りのコードを実行します。

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

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty."; // B
    return;
  }

  updateLabel(); // C
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") { // A
    return true;
  } else {
    return false;
  }
}

を一時停止しています A。 [ステップ アウト] をクリックすると、DevTools は でinputsAreEmpty()コードの残りの部分を実行し、返されたtrue場合は をB一時停止し、それ以外の場合inputsAreEmptyは一C時停止します。

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

長い関数をデバッグする場合、デバッグ中の問題に関連しないコードが多数存在する可能性があります。

• 関数のすべての行を 1 つずつステップ実行するには、[ ステップ オーバー ()] ボタンを何度もクリックします。

• もう少し優れた点として、目的の行にコード行ブレークポイントを設定し、[ スクリプト実行の再開 (スクリプト実行 の)] ボタンをクリックします。

• ただし、より高速な方法があります。コード行を右クリックし、[続行] を選択 します。

  

  DevTools は、その時点まですべてのコードを実行し、その行で一時停止します。

呼び出し履歴の最上位関数を再起動する

呼び出し履歴の先頭の関数の最初の行で一時停止し、コード行で一時停止するには、[ 呼び出し履歴 ] ウィンドウを右クリックし、[ フレームの再起動] を選択します。 最上位の関数は、最後に実行された関数です。

次のコードは、手順を実行する例です。

function updateLabel() {
  var addend1 = getNumber1(); // B
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum; // A
}

を一時停止しています A。 [フレームの 再起動] を選択すると、その行に Bブレークポイントを設定し、[ スクリプト実行の再開] を選択しなくても、 が一時停止されます。

スクリプトの実行を再開する

スクリプトの一時停止後にランタイムを続行するには、[スクリプトの 実行の再開 (スクリプト実行 の)] ボタンをクリックします。 DevTools は、次のブレークポイント (ある場合) までスクリプトを実行します。

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

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

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

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

たとえば、メイン スクリプトとサービス ワーカー スクリプトの両方でブレークポイントで一時停止しているとします。 サービス ワーカー コンテキストのローカル プロパティとグローバル プロパティを表示する場合は、ソース ツールにメインスクリプト コンテキストが表示されます。 サービス ワーカー コンテキストに切り替えるには、[ スレッド ] ウィンドウでサービス ワーカー エントリをクリックします。

プロパティと変数の表示と編集

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

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

JavaScript 式の値を確認する

[ウォッチ] ウィンドウを使用して、カスタム式の値をwatchします。 任意の有効な JavaScript 式をwatchできます。

• 新しいwatch式を作成するには、[add watch expression (Add watch)] ボタンをクリックします。

• 既存のすべての式の値を更新するには、[ 更新 ()] ボタンをクリックします。 コードのステップ実行中に値が自動的に更新されます。

• watch式を削除するには、式を右クリックし、[式の削除] watch選択します。

呼び出し履歴を表示する

コード行で一時停止中に、[ 呼び出し履歴 ] ウィンドウを使用して、この時点に到達した呼び出し履歴を表示します。

エントリをクリックすると、その関数が呼び出されたコード行にジャンプします。 青色の矢印アイコンは、DevTools が現在強調表示している関数を表します。

注:

コード行で一時停止しない場合、[ 呼び出し履歴 ] ウィンドウは空です。

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

現在の呼び出し履歴をクリップボードにコピーするには、[ 呼び出し履歴 ] ウィンドウを右クリックし、[ スタック トレースのコピー] を選択します。

次のコードは、出力の例です。

getNumber2 (get-started.js:40)
inputsAreEmpty (get-started.js:24)
onClick (get-started.js:16)

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

デバッグ中にスクリプトを無視するには、スクリプトを [無視リスト] に追加します。 [ リストを無視] にスクリプトが含まれている場合、スクリプトは [呼び出し履歴 ] ウィンドウに隠され、コードをステップ実行するときにスクリプトの関数にステップインすることはありません。

たとえば、次のコード スニペットでは、line A は サードパーティライブラリである を使用 libします。 デバッグしている問題がそのサード パーティライブラリに関連していないと確信している場合は、スクリプトを 無視リストに追加するのが理にかなっています。

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

[エディター] ウィンドウから [リストの無視] にスクリプトを追加する

[エディター] ウィンドウから [無視リスト] にスクリプトを追加するには:

1. ファイルを開きます。

2. ファイル内の任意の場所を右クリックし、[スクリプトの追加] を選択 してリストを無視します。

   

[呼び出し履歴] ウィンドウから [無視リスト] にスクリプトを追加する

[呼び出し履歴] ウィンドウから [無視リスト] にスクリプトを追加するには:

• ブレークポイントでコードを一時停止します。

• [呼び出し履歴] ウィンドウで関数を右クリックし、[スクリプトの追加] を選択してリストを無視します。

  

[設定] から [リストを無視] にスクリプトを追加する

1 つのスクリプトまたはスクリプトのパターンを [設定からリストを無視] に追加するには:

1. [設定] を開くには、DevTools で [ DevTools のカスタマイズと制御] アイコン ([DevTools の) をクリックし、[ 設定 ] () をクリックします。 または、DevTools にフォーカスがある場合は、 F1 キーを押します。

2. [設定] の [リストの無視] ページに移動します。

   

3. [ パターンの追加] ボタンをクリックします。 推奨されるパターンが表示されます。 /framework\.js$

4. [ 無視リスト] に追加するスクリプト名またはスクリプト名の正規表現パターンを入力します。

5. [追加] ボタンをクリックします。

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

コンソール ツールで同じデバッグ コードを何度も実行している場合は、スニペットの使用を検討してください。 スニペットは、DevTools 内で作成、格納、および実行するランタイム スクリプトです。

「任意の Web ページで JavaScript のスニペットを実行する」を参照してください。

DevTools で評価済みコードとインライン コードに名前を付ける場合に使用 # sourceURL します

ソース ツールを含め、DevTools 全体でファイル名を持つファイルではないコード ブロックを作成するには、コメントでプラグマを# sourceURL使用します。

ファイルではないコード ブロックは次のとおりです。

• 関数を使用 eval() して実行される JavaScript コード。
• タグ内 <script> にある JavaScript コード。
• タグ内 <style> にある CSS コード。

ブラウザーで上記の種類のコードを実行すると、DevTools にはこれらのコード ブロックを表示するファイル名がなく、コードのブロックにはジェネリック名が付けられるか、まったく表示されません。

次の場所など、DevTools UI 全体にファイル名が表示されます。

• [ソース] ツールの [ナビゲーター] ウィンドウ。
• [ソース] ツールの [デバッガー] ウィンドウの [呼び出し履歴]。
• [ソース] ツールの [エディター] ウィンドウにあるファイルのタブ。
• コンソール ツールでログ、警告、エラー メッセージを 表示 します。
• パフォーマンス ツールの炎のグラフ。

プラグマ ( # sourceURL 構文 //# sourceURL=my-assigned-file-name.js または /*# sourceURL=my-assigned-file-name.css*/) は、DevTools 全体で評価およびインライン コードに仮想ファイル名を提供する特別なコメントです。

プラグマを # sourceURL 使用して、ファイルではないコード ブロックに仮想ファイル名を指定し、 ソース ツールと DevTools 全体でそのファイル名を表示します。 例:

• JavaScript の場合:

  function sum(a, b) {
    return a + b;
  }
  
  console.log(sum(1, 2));
  
  //# sourceURL=math-utilities.js
  

• CSS の場合:

  .card {
    padding: 1rem;
    border-radius: 0.5rem;
  }
  
  /*# sourceURL=card-styles.css*/
  

その結果、DevTools では、これらのコード ブロックと、指定した仮想ファイル名 (math-utilities.js と card-styles.css) が表示されます。

関連項目

• JavaScript のデバッグを開始する - 画面キャプチャを使用して、既存のコードを使用した簡単で短いチュートリアルです。
• ソース ツールの概要 - ソース ツールには、JavaScript デバッガーとエディターが含まれています。
• JavaScript を無効にします。

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。