ブラウザでのデバッグ

より複雑なコードを書く前に、デバッグについて説明しましょう。

デバッグとは、スクリプト内のエラーを見つけて修正するプロセスです。すべての最新のブラウザとほとんどの他の環境は、デバッグツール（デバッグをはるかに容易にする開発者ツール内の特別なUI）をサポートしています。また、コードをステップバイステップでトレースして、何が起こっているかを正確に確認することもできます。

ここではChromeを使用します。十分な機能を備えており、他のほとんどのブラウザも同様のプロセスを使用しているためです。

「ソース」パネル

Chromeのバージョンによって多少異なる場合がありますが、何がそこにあるかは明らかです。

Chromeでサンプルページを開きます。
F12（Mac：Cmd+Opt+I）で開発者ツールをオンにします。
ソースパネルを選択します。

初めての場合は、次のように表示されます。

トグルボタンは、ファイルを含むタブを開きます。

クリックして、ツリービューでhello.jsを選択します。次のように表示されます。

ソースパネルは3つの部分に分かれています。

ファイルナビゲーターペインには、HTML、JavaScript、CSS、その他のファイル（画像を含む）が一覧表示されます。 Chrome拡張機能もここに表示される場合があります。
コードエディターペインには、ソースコードが表示されます。
JavaScriptデバッグペインはデバッグ用です。すぐに調べてみましょう。

同じトグルをもう一度クリックして、リソースリストを非表示にし、コードにスペースを確保できます。

コンソール

Escキーを押すと、下にコンソールが開きます。そこにコマンドを入力し、Enterキーを押して実行できます。

ステートメントが実行された後、その結果が以下に示されます。

たとえば、ここでは1 + 2の結果は3になりますが、関数呼び出しhello（ "debugger"）は何も返さないため、結果はundefinedになります。

ブレークポイント

サンプルページのコード内で何が起こっているか調べてみましょう。 hello.jsで、行番号4をクリックします。はい、コード上ではなく、数字の4を正確にクリックしてください。

おめでとうございます！ブレークポイントを設定しました。行8の番号もクリックしてください。

次のようになります（青色はクリックする場所です）。

*ブレークポイント*とは、デバッガーがJavaScriptの実行を自動的に一時停止するコードのポイントです。

コードが一時停止している間、現在の変数を調べたり、コンソールでコマンドを実行したりできます。つまり、デバッグできます。

ブレークポイントのリストは、右側のパネルにいつでも見つけることができます。これは、さまざまなファイルに多くのブレークポイントがある場合に役立ちます。それは私達にできます

（右側のパネルでクリックすることにより）コード内のブレークポイントにすばやくジャンプします。
チェックを外してブレークポイントを一時的に無効にします。
右クリックして[削除]を選択することにより、ブレークポイントを削除します。
…など。

行番号を*右クリック*すると、*条件付き*ブレークポイントを作成できます。作成時に指定する必要がある式がtruthyの場合にのみトリガーされます。

これは、特定の変数値または特定の関数パラメーターに対してのみ停止する必要がある場合に便利です。

コマンド「debugger」

次のように、コードでdebuggerコマンドを使用してコードを一時停止することもできます。

          function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- the debugger stops here

  say(phrase);
}
        

このようなコマンドは、開発ツールが開いている場合にのみ機能します。そうでない場合、ブラウザはそれを無視します。

一時停止して周りを見回す

この例では、ページの読み込み中にhello（）が呼び出されるため、デバッガーをアクティブにする最も簡単な方法（ブレークポイントを設定した後）は、ページをリロードすることです。 F5（Windows、Linux）またはCmd+R（Mac）を押してみましょう。

ブレークポイントが設定されているため、実行は4行目で一時停止します。

右側にある情報ドロップダウン（矢印でラベル付けされています）を開いてください。それらを使用すると、現在のコードの状態を確認できます。

ウォッチ–任意の式の現在の値を表示します。

プラス記号+をクリックして式を入力できます。デバッガーは、実行プロセスで自動的に再計算して、その値を表示します。
コールスタック–ネストされた呼び出しチェーンを表示します。

現時点では、デバッガーはindex.htmlのスクリプトによって呼び出されたhello（）呼び出し内にあります（そこには関数がないため、「匿名」と呼ばれます）。

スタック項目（例：「匿名」）をクリックすると、デバッガーは対応するコードにジャンプし、そのすべての変数も調べることができます。
スコープ–現在の変数。

ローカルはローカル関数の変数を表示します。ソースのすぐ上にそれらの値が強調表示されているのもわかります。

グローバルには、グローバル変数（関数外）があります。

まだ学習していないthisキーワードもありますが、すぐに学習します。

実行のトレース

それでは、スクリプトを*トレース*しましょう。

右側のパネルの上部にボタンがあります。それらを従事させましょう。

–「再開」：実行を続行します。ホットキーF8。

実行を再開します。追加のブレークポイントがない場合、実行は続行され、デバッガーは制御を失います。

クリックした後に表示される内容は次のとおりです。

実行が再開され、say（）内の別のブレークポイントに到達し、そこで一時停止しました。右側の「コールスタック」を見てください。もう1回呼び出しが増えました。今、私たちはsay（）の中にいます。

–「ステップ」：次のコマンドを実行します。ホットキーF9。

次のステートメントを実行します。今すぐクリックすると、アラートが表示されます。

これを何度もクリックすると、すべてのスクリプトステートメントを1つずつステップ実行します。

–「ステップオーバー」：次のコマンドを実行しますが、*関数には入りません*。ホットキーF10。

前の「ステップ」コマンドと似ていますが、次のステートメントが関数呼び出し（alertのような組み込みではなく、私たち自身の関数）の場合、動作が異なります。

比較すると、「ステップ」コマンドはネストされた関数呼び出しに入り、最初の行で実行を一時停止しますが、「ステップオーバー」はネストされた関数呼び出しを私たちに見えないように実行し、関数の内部をスキップします。

その後、関数呼び出しの直後に実行が一時停止します。

関数呼び出しの内部で何が起こるかを確認する必要がない場合は、これは良いことです。

–「ステップイン」、ホットキーF11。

これは「ステップ」に似ていますが、非同期関数呼び出しの場合の動作が異なります。 JavaScriptを学習し始めたばかりの場合は、非同期呼び出しはまだないため、違いを無視できます。

将来のために、「ステップ」コマンドは、後で実行されるsetTimeout（スケジュールされた関数呼び出し）などの非同期アクションを無視することに注意してください。「ステップイン」は、必要に応じてコードを待機して、コードに入ります。詳細については、開発ツールマニュアルを参照してください。

–「ステップアウト」：現在の関数の最後まで実行を続けます。ホットキーShift+F11。

実行を続行し、現在の関数の最後の行で停止します。これは、を使用してネストされた呼び出しに誤って入ったが、それが興味がなく、できるだけ早くその終わりまで続行したい場合に便利です。

–すべてのブレークポイントを有効/無効にします。

そのボタンは実行を移動しません。ブレークポイントの一括オン/オフのみです。

–エラーが発生した場合の自動一時停止を有効/無効にします。

有効にすると、開発者ツールが開いている場合、スクリプト実行中のエラーが発生すると自動的に一時停止します。その後、デバッガーで変数を分析して、何が問題だったのかを確認できます。したがって、スクリプトがエラーで停止した場合、デバッガーを開き、このオプションを有効にしてページをリロードすると、スクリプトがどこで停止し、その時点のコンテキストがわかります。

コード行を右クリックすると、「ここまで続行」という優れたオプションを含むコンテキストメニューが開きます。

これは、複数ステップをその行まで進めたいが、ブレークポイントを設定するのが面倒な場合に便利です。

ログ出力

コードからコンソールに何かを出力するには、console.log 関数があります。

たとえば、これは 0 から 4 までの値をコンソールに出力します

// open console to see
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

通常のユーザーはこの出力を見ることができません。これはコンソールにあります。表示するには、開発者ツールの[コンソール]パネルを開くか、別のパネルでEscキーを押します。これにより、下部にコンソールが開きます。

コードに十分なログがあれば、デバッガーを使用せずに、記録から何が起こっているのかを確認できます。

まとめ

ご覧のとおり、スクリプトを一時停止するには、主に3つの方法があります

ブレークポイント。
debugger ステートメント。
エラー（開発者ツールが開いていて、ボタンが「オン」になっている場合）。

一時停止すると、デバッグできます。変数を調べてコードをトレースし、実行がどこで間違っているかを確認します。

開発者ツールには、ここで説明したものよりもはるかに多くのオプションがあります。完全なマニュアルは、https://developers.google.com/web/tools/chrome-devtools にあります。

この章の情報はデバッグを開始するのに十分ですが、後で、特にブラウザ関連の作業を多く行う場合は、アクセスして開発者ツールのより高度な機能を確認してください。

また、開発者ツールのさまざまな場所をクリックして、何が表示されているかを確認することもできます。これはおそらく、開発者ツールを学ぶための最速の方法です。右クリックとコンテキストメニューを忘れないでください！