Javascriptのデバッグ-Chrome Developers

このチュートリアルでは、DevToolsでJavaScriptの問題をデバッグするための基本的なワークフローを説明します。以下、このチュートリアルのビデオ版を読むか、見てください。

#ステップ1:バグを再現する

バグを一貫して再現する一連のアクションを見つけることは、常にデバッグの最初のステップです。

[デモを開く]をクリックします。デモが新しいタブで開きます。

デモを開く
[番号1]テキストボックスに5と入力します。
[番号2]テキストボックスに1と入力します。
番号1と番号2を追加をクリックします。ボタンの下のラベルには5 + 1 = 51と書かれています。結果は6になります。これはあなたが修正しようとしているバグです。

図1. 5+1の結果は51です。それは6でなければなりません。

# ステップ2:ソースパネルのUIに慣れる

DevToolsには、CSSの変更、ページの読み込みパフォーマンスのプロファイリング、ネットワーク要求の監視など、さまざまなタスクに対応するさまざまなツールが用意されています。 [ソース]パネルでは、JavaScriptをデバッグします。

Command+Option+I（Mac）またはControl+Shift+I（Windows、Linux）を押してDevToolsを開きます。このショートカットは、コンソールパネルを開きます。

図2。コンソールパネル
“ソース”タブをクリックします。

図3。ソースパネル

ソースパネルUIには3つの部分があります。

図4。ソースパネルUI

ファイルナビゲータペインの3つの部分。ページが要求するすべてのファイルがここに一覧表示されます。
コードエディタペイン。ファイルナビゲータペインでファイルを選択すると、そのファイルの内容がここに表示されます。
JavaScriptデバッグペイン。ページのJavaScriptを検査するためのさまざまなツール。 DevToolsウィンドウが広い場合、このペインはコードエディタペインの右側に表示されます。

# ステップ3:ブレークポイントでコードを一時停止

このような問題をデバッグする一般的な方法は、スクリプトの実行時に値を検査するために、コードに多くの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()メソッドよりも速くバグを見つけて修正するのに役立ちます。

一歩下がってアプリの動作を考えると、誤った合計(5 + 1 = 51)がclickイベントリスナーで計算され、[番号1と番号2の追加]ボタンに関連付けられていると推測でしたがって、おそらく、clickリスナーが実行される頃にコードを一時停止する必要があります。イベントリスナブレークポイントでは、それを正確に行うことができます:

JavaScriptデバッグペインで、イベントリスナブレークポイントをクリックしてセクションを展開します。 DevToolsでは、アニメーションやクリップボードなどの拡張可能なイベントカテゴリのリストが表示されます。
マウスイベントカテゴリの横にある[Expand]をクリックします。 DevToolsは、clickやmousedownなどのマウスイベントのリストを表示します。各イベントの横にチェックボックスがあります。
クリックチェックボックスをオンにします。 DevToolsは、clickイベントリスナーが実行されたときに自動的に一時停止するように設定されました。

図5. クリックチェックボックスが有効になっています
デモに戻って、もう一度番号1と番号2を追加をクリックします。 DevToolsはデモを一時停止し、ソースパネルのコード行を強調表示します。 DevToolsは、このコード行で一時停止する必要があります:
```
function onClick() {
```
別のコード行で一時停止している場合は、正しい行で一時停止するまでResume Script Executionを押します。

注:別の行で一時停止した場合は、訪問するすべてのページにclickイベントリスナーを登録するブラウザ拡張機能があります。拡張機能のclickリスナーで一時停止しました。シークレットモードを使用してプライベートでブラウズすると、すべての拡張機能が無効になり、毎回正しいコード行で一時停止することがわかります。

イベントリスナブレークポイントは、DevToolsで利用できる多くのタイプのブレークポイントの一つにすぎません。各タイプは、最終的には可能な限り迅速に異なるシナリオをデバッグするのに役立つため、すべての異なるタイプを記憶する価値があります。各型をいつ、どのように使用するかについては、”ブレークポイントを使用してコードを一時停止する”を参照してください。

#ステップ4:コードをステップ実行

バグの一般的な原因の一つは、スクリプトが間違った順序で実行されるときです。コードをステップ実行することで、コードの実行を一度に1行ずつ実行し、予想とは異なる順序で実行されている場所を正確に把握できます。今すぐ試してみてください:

DevToolsのソースパネルで、次の関数呼び出しへのステップをクリックして、onClick()関数の実行を一度に1行ずつステップ実行 DevToolsでは、次のコード行を強調表示しています:
```
if (inputsAreEmpty()) {
```
次の関数呼び出しのステップオーバーをクリックします. DevToolsはinputsAreEmpty()をステップインせずに実行します。 DevToolsが数行のコードをスキップする方法に注意してください。これは、inputsAreEmpty()がfalseと評価されたため、ifステートメントのコードブロックが実行されなかったためです。

これがコードをステップ実行する基本的な考え方です。 get-started.jsのコードを見ると、バグはおそらくupdateLabel()関数のどこかにあることがわかります。コードのすべての行をステップ実行するのではなく、別の種類のブレークポイントを使用して、バグの可能性のある場所に近いコードを一時停止するこ

#ステップ5: コード行ブレークポイントの設定

コード行ブレークポイントは、最も一般的なタイプのブレークポイントです。一時停止する特定のコード行がある場合は、コード行ブレークポイントを使用します:

のコードの最後の行を見てくださいupdateLabel():
```
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
```
コードの左側には、この特定のコード行の行番号（32）が表示されます。 32をクリックします。 DevToolsでは、32の上に青いアイコンが表示されます。これは、この行にコード行のブレークポイントがあることを意味します。 DevToolsは、このコード行が実行される前に常に一時停止するようになりました。
スクリプトの実行の再開をクリックします。スクリプトは32行目に達するまで実行を続けます。 29行目、30行目、31行目では、DevToolsは各行のセミコロンの右側にaddend1、addend2、sumの値を出力します。

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

# ステップ6：変数値のチェック

addend1、addend2、およびsumの値が疑わしいように見えます。これは文字列であることを意味します。これは、バグの原因を説明するための良い仮説です。今ではより多くの情報を収集する時間です。 DevToolsには、変数値を調べるための多くのツールが用意されています。

#方法1:スコープペイン

コード行で一時停止すると、スコープペインには、各変数の値とともに、現在定義されているローカル変数とグローバル変数が表示されままた、該当する場合は、クロージャ変数も表示されます。変数値をダブルクリックして編集します。コード行で一時停止していない場合、スコープペインは空になります。

図7。スコープペイン

#方法2:式の監視

式の監視タブでは、時間の経過とともに変数の値を監視できます。名前が示すように、ウォッチ式は変数だけに限定されません。任意の有効なJavaScript式をウォッチ式に格納できます。今すぐ試してみてください:

[ウォッチ]タブをクリックします。
“式の追加”をクリックします。
タイプtypeof sum。
Enterキーを押します。 DevToolsはtypeof sum: "string"を表示します。コロンの右側の値は、ウォッチ式の結果です。

図8。 typeof sumウォッチ式を作成した後、ウォッチ式ペイン(右下)。 DevToolsウィンドウが大きい場合は、Watch Expressionペインが右側のEvent Listener Breakpointsペインの上にあります。

疑われるように、sumは数値である必要があるときに文字列として評価されています。これで、これがバグの原因であることが確認されました。

#メソッド3: コンソール

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

コンソールの引き出しが開いていない場合は、Escapeキーを押して開きます。 DevToolsウィンドウの下部に開きます。
コンソールで、parseInt(addend1) + parseInt(addend2)と入力します。このステートメントは、addend1とaddend2がスコープ内にあるコード行で一時停止しているために機能します。
Enterキーを押します。 DevToolsはステートメントを評価し、デモが生成すると予想される結果である6を出力します。

図9。 parseInt(addend1) + parseInt(addend2)を評価した後、コンソールの引き出し。

# ステップ7:修正を適用する

バグの修正が見つかりました。残っているのは、コードを編集してデモを再実行して修正を試すことだけです。修正を適用するためにDevToolsを離れる必要はありません。 DevTools UI内でJavaScriptコードを直接編集できます。今すぐ試してみてください:

スクリプトの実行の再開をクリックします。
コードエディターで、31行目のvar sum = addend1 + addend2をvar sum = parseInt(addend1) + parseInt(addend2)に置き換えます。Command+S(Mac)またはControl+S(Windows、Linux)を押して変更を保存します。
ブレークポイントを無効にするをクリックします。青色に変わり、アクティブであることを示します。これが設定されている間、DevToolsは設定したブレークポイントを無視します。
異なる値でデモを試してみてください。デモが正しく計算されるようになりました。

注意

注意: このワークフローは、ブラウザーで実行されているコードにのみ修正を適用します。ページにアクセスするすべてのユーザーのコードは修正されません。これを行うには、サーバー上のコードを修正する必要があります。

おめでとう！これで、JavaScriptをデバッグするときにChrome DevToolsを最大限に活用する方法がわかりました。このチュートリアルで学んだツールと方法は、数え切れないほどの時間を節約できます。

このチュートリアルでは、ブレークポイントを設定する2つの方法のみを示しました。 DevToolsは、以下を含む他の多くの方法を提供しています:

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

ブレークポイントを使用してコードを一時停止するを参照して、各型をいつどのように使用するかを確認してください。

このチュートリアルでは説明されていないコードステッピングコントロールがいくつかあります。詳細については、”コード行のステップオーバー”を参照してくださ