より複雑なコードを記述する前に、デバッグについて話しましょう。
デバッグは、スクリプト内のエラーを見つけて修正するプロセスです。最新のすべてのブラウザーとその他のほとんどの環境は、デバッグ ツールをサポートしています。デバッグ ツールは、デバッグをより簡単にする開発者ツールの特別な UI です。また、コードを段階的にトレースして、何が起こっているのかを正確に確認することもできます。
ここでは Chrome を使用します。Chrome には十分な機能があり、他のほとんどのブラウザでも同様のプロセスがあるためです。
Chrome のバージョンは少し異なって見えるかもしれませんが、それでも何が含まれているかは明らかです。
Chrome でサンプル ページを開きます。
F12 (Mac: Cmd + Opt + I ) で開発者ツールをオンにします。
Sourcesパネルを選択します。
初めて行う場合は、次のことを確認する必要があります。
トグラーボタンファイルのあるタブを開きます。
それをクリックして、ツリー ビューでhello.js選択しましょう。表示される内容は次のとおりです。
[ソース] パネルには 3 つの部分があります。
ファイル ナビゲータペインには、HTML、JavaScript、CSS、およびページに添付されている画像を含むその他のファイルがリストされます。 Chrome 拡張機能もここに表示される場合があります。
コード エディターペインにソース コードが表示されます。
[JavaScript デバッグ]ペインはデバッグ用です。これについてはすぐに説明します。
同じトグラーをクリックできるようになりました再度リソースリストを非表示にし、コードにスペースを与えます。
Esc を押すと、以下のコンソールが開きます。そこにコマンドを入力し、 Enter キーを押して実行します。
ステートメントが実行された後の結果は以下に示されます。
たとえば、ここでは1+2結果は3になりますが、関数呼び出しhello("debugger")は何も返さないため、結果はundefinedなります。
サンプル ページのコード内で何が起こっているのかを調べてみましょう。 hello.jsで、行番号4をクリックします。はい、コード上ではなく、 4桁上にあります。
おめでとう！ブレークポイントを設定しました。 8行目の番号もクリックしてください。
次のようになります (青色の部分をクリックする必要があります)。
ブレークポイントは、デバッガーが JavaScript の実行を自動的に一時停止するコードのポイントです。
コードが一時停止されている間、現在の変数を調べたり、コンソールでコマンドを実行したりできます。つまり、コードをデバッグできます。
右側のパネルでいつでもブレークポイントのリストを見つけることができます。これは、さまざまなファイルに多数のブレークポイントがある場合に便利です。これにより次のことが可能になります。
コード内のブレークポイントにすばやくジャンプします (右側のパネルでブレークポイントをクリックします)。
ブレークポイントのチェックを外して、一時的にブレークポイントを無効にします。
右クリックして [削除] を選択して、ブレークポイントを削除します。
…等々。
条件付きブレークポイント
行番号を右クリックすると、条件付きブレークポイントを作成できます。これは、作成時に指定する必要がある指定された式が真実である場合にのみトリガーされます。
これは、特定の変数値または特定の関数パラメータに対してのみ停止する必要がある場合に便利です。
次のように、 debuggerコマンドを使用してコードを一時停止することもできます。
関数 hello(名前) {
let フレーズ = `こんにちは、${name}!`;
デバッガ; // <-- デバッガはここで停止します
言う(フレーズ);
}このようなコマンドは、開発ツールが開いている場合にのみ機能し、それ以外の場合、ブラウザは無視します。
この例では、ページの読み込み中にhello()が呼び出されるため、(ブレークポイントを設定した後) デバッガーをアクティブにする最も簡単な方法は、ページを再読み込みすることです。それでは、 F5 (Windows、Linux) またはCmd + R (Mac) を押してみましょう。
ブレークポイントが設定されると、実行は 4 行目で一時停止します。
右側の情報ドロップダウン (矢印のラベルが付いている) を開いてください。これらにより、現在のコードの状態を調べることができます。
Watch – 式の現在の値を表示します。
プラス+クリックして式を入力できます。デバッガーはその値を表示し、実行中に自動的に再計算します。
Call Stack – ネストされた呼び出しチェーンを表示します。
現時点では、デバッガーはhello()呼び出し内にあり、 index.html内のスクリプトによって呼び出されます (関数がないため、「匿名」と呼ばれます)。
スタック項目 (「匿名」など) をクリックすると、デバッガーは対応するコードにジャンプし、そのすべての変数も調べることができます。
Scope - 現在の変数。
Localローカル関数変数を示します。ソースのすぐ上でそれらの値が強調表示されていることも確認できます。
Global (関数外の) グローバル変数があります。
まだ勉強していないthisもありますが、それはすぐに勉強します。
次に、スクリプトをトレースします。
右側のパネルの上部にボタンがあります。彼らを巻き込みましょう。
– 「再開」: ホットキーF8 で実行を続行します。
実行を再開します。追加のブレークポイントがない場合、実行はそのまま続行され、デバッガーは制御を失います。
クリックすると次のものが表示されます。
実行が再開され、 say()内の別のブレークポイントに到達し、そこで一時停止されました。右側の「コールスタック」を見てください。あと1コール増えました。今、 say()中にいます。
– 「ステップ」: 次のコマンドを実行します (ホットキーF9 ) 。
次のステートメントを実行します。ここでクリックすると、 alert表示されます。
これを何度もクリックすると、すべてのスクリプト ステートメントが 1 つずつ実行されます。
– 「ステップオーバー」: 次のコマンドを実行しますが、関数には入らず、ホットキーF10 を押します。
前の「Step」コマンドと似ていますが、次のステートメントが関数呼び出し ( alertなどの組み込み関数ではなく、独自の関数) である場合は動作が異なります。
これらを比較すると、「ステップ」コマンドはネストされた関数呼び出しに入り、最初の行で実行を一時停止しますが、「ステップ オーバー」コマンドはネストされた関数呼び出しを目に見えずに実行し、関数内部をスキップします。
実行は、その関数呼び出しの直後に一時停止されます。
関数呼び出し内で何が起こっているかを見ることに興味がない場合は、これで十分です。
– 「ステップイン」、ホットキーF11 。
これは「ステップ」に似ていますが、非同期関数呼び出しの場合は動作が異なります。 JavaScript を学び始めたばかりの場合は、まだ非同期呼び出しがないため、違いは無視してかまいません。
将来のために、「Step」コマンドは後で実行されるsetTimeout (スケジュールされた関数呼び出し) などの非同期アクションを無視することに注意してください。 「ステップイン」はコードに入り、必要に応じて待機します。詳細については、DevTools マニュアルを参照してください。
– 「ステップアウト」: 現在の機能が終了するまで実行を継続します (ホットキーShift + F11 ) 。
実行を続行し、現在の関数の最後の行で停止します。これは、誤ってネストされた呼び出しを入力したときに便利です。 、でも興味がないので早く最後まで続けたいと思っています。
– すべてのブレークポイントを有効/無効にします。
このボタンでは実行は実行されません。ブレークポイントの一括オン/オフだけです。
– エラー発生時の自動一時停止を有効/無効にします。
有効にすると、開発者ツールが開いている場合、スクリプト実行中にエラーが発生すると自動的に一時停止されます。次に、デバッガーで変数を分析して、何が問題だったのかを確認します。したがって、スクリプトがエラーで終了した場合は、デバッガーを開いてこのオプションを有効にし、ページをリロードして、どこで終了したか、その時点でのコンテキストを確認することができます。
ここまで続けてください
コード行を右クリックすると、「ここまで続ける」という優れたオプションを含むコンテキスト メニューが開きます。
これは、その行まで複数のステップを進めたいが、ブレークポイントを設定するのが面倒な場合に便利です。
コードからコンソールに何かを出力するには、 console.log関数があります。
たとえば、これは0から4までの値をコンソールに出力します。
// コンソールを開いて確認してください
for (i = 0; i < 5; i++) {
console.log("値,", i);
}通常のユーザーにはその出力は表示されず、コンソールに表示されます。これを確認するには、開発者ツールのコンソール パネルを開くか、別のパネルでEsc キーを押します。これにより、下部にコンソールが開きます。
コードに十分なログがあれば、デバッガを使わずにレコードから何が起こっているかを確認できます。
ご覧のとおり、スクリプトを一時停止するには主に 3 つの方法があります。
ブレークポイント。
debuggerステートメント。
エラー (開発ツールが開いており、ボタンがは「オン」です）。
一時停止したら、デバッグを行うことができます。変数を調べてコードをトレースし、実行がどこで間違っているかを確認します。
開発者ツールには、ここで説明した以外にも多くのオプションがあります。完全なマニュアルは https://developers.google.com/web/tools/chrome-devtools にあります。
この章の情報はデバッグを開始するのに十分ですが、後で、特に多くのブラウザ関連の作業を行う場合は、そこにアクセスして、開発者ツールのより高度な機能を確認してください。
ああ、開発ツールのさまざまな場所をクリックして、何が表示されるかを確認することもできます。それがおそらく開発ツールを学ぶための一番の近道です。右クリックとコンテキスト メニューを忘れないでください。