JavaScript をデバッグする

Kayce Basques

Sofia Emelianova

このチュートリアルでは、DevTools で JavaScript の問題をデバッグするための基本的なワークフローについて説明します。読む するか、このチュートリアルの動画をご覧ください。

バグを再現する

バグを一貫して再現する一連のアクションを見つけることが、 説明します。

1. 新しいタブでこのデモを開きます。
2. [Number 1] ボックスに「5」と入力します。
3. [Number 2] ボックスに「1」と入力します。
4. [Add Number 1 and Number 2] をクリックします。ボタンの下に「5 + 1 = 51」というラベルがあります。結果 6 にする必要があります。これが修正するバグです。

この例では、5 + 1 の結果は 51 です。6 になっているはずです。

[Sources] パネル UI についての理解を深める

DevTools には、CSS の変更、ページのプロファイリングなど、さまざまなタスクに対応するさまざまなツールが用意されている 負荷パフォーマンス、ネットワーク リクエストのモニタリングなどです。[Sources] パネルでは、デバッグを行う 使用できます。

1. DevTools を開き、[Sources] パネルに移動します。

   

[Sources] パネルには 3 つのセクションがあります。

1. ファイルツリーが表示された [Page] タブ。そのページでリクエストされたすべてのファイルがここに表示されます。
2. [Code Editor] セクション。[Page] タブでファイルを選択すると、その内容 そのファイルがここに表示されます。

3. [Debugger] セクション。ページの JavaScript を検査するための各種ツール。

   DevTools ウィンドウの幅が広い場合、デフォルトでは [Debugger] は [Code Editor] の右側に表示されます。この場合、[Scope] タブと [Watch] タブは、[Breakpoints] タブや [Call stack] タブなどが、折りたたみ可能なセクションとして結合されます。

ブレークポイントでコードを一時停止する

このような問題をデバッグする一般的な方法は、大量の console.log() ステートメントを挿入することです。 をコードに組み込み、スクリプトの実行時に値を検査します。例:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() メソッドでも処理を完了できますが、ブレークポイントを使用すると処理を高速化できます。 ブレークポイントを使用すると、コードの実行中にコードを一時停止し、その時点ですべての値を調べることができます。 特定できますブレークポイントには、console.log() メソッドに比べて次のような利点があります。

• console.log() では、手動でソースコードを開き、関連するコードを見つけて、 console.log() ステートメントを実行してからページを再読み込みすると、 できます。ブレークポイントを使用すると、コードの状態がわからなくても、関連するコードで一時停止できます。 説明します。
• console.log() ステートメントでは、使用する各値を明示的に指定する必要があります。 検査します。ブレークポイントを使用すると、その時点でのすべての変数の値が DevTools に表示されます。 コードに影響を与える変数の中には、気付いていないものがあります。

つまり、ブレークポイントを使用すると、console.log() メソッドよりも迅速にバグを見つけて修正できます。

一歩引いてアプリの仕組みについて考えれば、 click イベント リスナーで間違った合計（5 + 1 = 51）が計算される [数字 1 と数字 2 を追加] ボタン。そのため、24 時間前までにコードを一時停止することをおすすめします。 click リスナーが実行するコードです。イベント リスナー ブレークポイントを使用すると、次のことができます。

1. [Debugger] セクションで、[Event Listener Breakpoints] をクリックして 。DevTools に、[Animation] や [App Engine] など、展開可能なイベント カテゴリのリストが表示されます。 クリップボード。
2. [マウス] イベント カテゴリの横にある arrow_right [開く] をクリックします。 DevTools に、クリックやマウスダウンなどのマウスイベントのリストが表示されます。各予定の横にはチェックボックスがあります。

3. [クリック] チェックボックスをオンにします。DevTools は、任意の click が発生すると自動的に一時停止するように設定されました。 イベント リスナーが実行されました。

   

4. デモに戻り、[Add Number 1 and Number 2] をもう一度クリックします。DevTools でデモが一時停止され、 [Sources] パネルにコード行がハイライト表示されます。DevTools は、次の行で一時停止する必要があります。 コード:

   function onClick() {
   

   別のコード行で一時停止している場合は、正しい行で一時停止するまで Resume Script Execution を再開押します。

イベント リスナー ブレークポイントは、DevTools で使用できる多くのタイプのブレークポイントの一つにすぎません。です。 すべての型を試してみる価値があります。それぞれの型は、最終的にはさまざまな型をデバッグするのに役立つからです。 迅速に進めることができます。一時停止するタイミングと方法については、ブレークポイントでコードを一時停止するをご覧ください。 使用します。

コードをステップスルーする

バグの一般的な原因の 1 つは、スクリプトが間違った順序で実行されることです。コードのステップ実行 を使用すると、コードの実行を 1 行ずつ確認して、 予想と異なる順序で実行されます今すぐ試す:

1. DevTools の [Sources] パネルで、step_into [Step in next function call] をクリックして onClick() 関数の実行を 1 行ずつステップ実行します。DevTools の次のコード行がハイライト表示されます。

   if (inputsAreEmpty()) {
   

2. [step_over] [Step over next function call] をクリックします。

   DevTools は、ステップすることなく inputsAreEmpty() を実行します。DevTools では、検索中のコメントが数行スキップされ、 できます。これは、inputsAreEmpty() が false と評価されたため、if ステートメントの コードが実行されませんでした

これが、コードをステップ実行する際の基本的な考え方です。get-started.js のコードを確認すると、 おそらく updateLabel() 関数のどこかにバグがあることがわかります。1 つずつ説明する代わりに 別の種類のブレークポイントを使用して、想定される動作に近い部分でコードを一時停止できます。 バグの場所。

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

コード行のブレークポイントは、最も一般的なタイプのブレークポイントです。特定の行を取得したら コード行ブレークポイントを使用します。

1. updateLabel() の最後のコード行をご覧ください。

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. コードの左側には、この特定のコードの行番号が表示されます。 32。[32] をクリックします。DevTools により、32 の上に青いアイコンが表示されます。つまり この行のコード行ブレークポイント。DevTools は、このコード行が呼び出される前に常に一時停止する 実行されます。

3. [resume Resume script execution] をクリックします。「 32 行目に達するまで実行されます29、30、31 行目で、DevTools の宣言の横に addend1、addend2、sum の値がインラインで表示されます。

この例では、DevTools は 32 行目のコード行のブレークポイントで一時停止します。

変数値を確認する

addend1、addend2、sum の値が不審なようです。これらは引用符で囲まれており、 文字列であることを意味します。これは、バグの原因を説明する優れた仮説です。現在 さらに情報を収集しましょうDevTools には変数を調べるための多くのツールが用意されている 使用できます。

方法 1: スコープを検査する

コード行で一時停止すると、[スコープ] タブにローカル変数とグローバル変数が表示されます。 各変数の値とともに定義されます。クロージャ変数も表示され、 適用されます。コード行を一時停止していない場合、[スコープ] タブには何も表示されません。

変数値をダブルクリックして編集します。

メソッド 2: 式を監視する

[Watch] タブでは、時間の経過に伴う変数の値をモニタリングできます。ウォッチの対象は変数だけではありません。有効な JavaScript を保存できます。 式を [Watch] タブで確認します。

今すぐ試す:

1. [見る] タブをクリックします。
2. [add ウォッチ式を追加] をクリックします。
3. タイプ typeof sum。
4. Enter キーを押します。DevTools に typeof sum: "string" が表示されます。コロンの右側にある値は、 式の結果に基づいて計算されます

このスクリーンショットは、typeof sum ウォッチを作成した後の [Watch] タブ（右下）を示しています。 表します。

疑いのとおり、sum は数値であるべきなのに、文字列として評価されています。確認が完了しました これがバグの原因であることがわかります。

方法 3: コンソール

console.log() メッセージを表示するだけでなく、コンソールを使用して任意の指標を評価することもできます。 JavaScript ステートメント。デバッグに関しては、コンソールを使用して潜在的な修正をテストできます。 検出します。今すぐ試す:

1. コンソール ドロワーを開いていない場合は、Esc キーを押して開きます。ページの下部に クリックします。
2. コンソールで「parseInt(addend1) + parseInt(addend2)」と入力します。このステートメントが機能するのは、 addend1 と addend2 がスコープ内にあるコード行で一時停止します。
3. Enter キーを押します。DevTools でステートメントが評価され、6 が出力されます。これが期待どおりの結果です。 必要があります。

次のスクリーンショットは、parseInt(addend1) + parseInt(addend2) を評価した後の [Console] ドロワーを示しています。

修正を適用

バグの修正が見つかりました。あとは、コードを編集して修正を試行し、 示されます修正を適用するために DevTools を終了する必要はありません。JavaScript コードは編集可能 直接使用できます。今すぐ試す:

1. [resume Resume script execution] をクリックします。
2. コードエディタで、31 行目の var sum = addend1 + addend2 を次の内容に置き換えます。 var sum = parseInt(addend1) + parseInt(addend2)。
3. Command+S キー（Mac）または Ctrl+S キー（Windows、Linux）を押して、変更を保存します。
4. [label_off] [ブレークポイントを無効にする] をクリックします。 有効であることを示す青色に変わります。設定されている場合、DevTools は 表示されなくなります。
5. さまざまな値でデモをお試しください。デモで正しく計算されるようになりました。

次のステップ

このチュートリアルでは、ブレークポイントを設定する 2 つの方法のみを紹介しました。DevTools には他にも多くの方法があります 含まれます。

• 指定した条件が true の場合にのみトリガーされる条件付きブレークポイント。
• キャッチされた例外またはキャッチされていない例外のブレークポイント。
• リクエストされた URL が指定した部分文字列と一致した場合にトリガーされる XHR ブレークポイント。

各タイプを使用するタイミングと方法については、ブレークポイントでコードを一時停止するをご覧ください。

コード ステッピング コントロールには、このチュートリアルでは説明されていませんが、いくつかあります。ステップ オーバーをご覧ください。 コード行をご覧ください。