Chrome でのデバッグ

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

デバッギングはスクリプト内のエラーを見つけ、修正するプロセスです。すべてのモダンブラウザと他の環境のほとんどはデバッギングツール（デバッグを簡単に行えるようにする開発者ツールのUI）をサポートしています。また、コードをステップ毎に追跡して正確に起きていることを確認することもできます。

ここでは、恐らくこの観点では最も機能が充実している Chrome を使います。

“sources” パネル

Chromeのバージョンによっては少し違って見えるかもしれませんが、何があるかは明白でしょう。

• Chromeの example page を開きます。
• F12 (Mac: Cmd+Opt+I) で開発者ツールをONにします。
• source パネルを選択します。

この画面を見るのが初めてであれば、見ておくべきものがあります:

トグルボタン はファイルを表示するタブを開きます。

それをクリックして、index.html 、次にツリービューの hello.js を選択しましょう。ここで表示される内容は次の通りです:

ここでは3つの領域が確認できます:

1. ファイルナビゲータ ペインには、HTML、JavaScript、CSSや、ページに紐付いているイメージなどを含むファイルがリストされます。Chromeの拡張機能もここに表示されることがあります。
2. コードエディタ ペインは、ソースコードを表示します。
3. JavaScript デバッギング ペインはデバッグのためのもので、この後見ていきます。

同じトグル を再びクリックすること、リソースの一覧やコードを隠すことができます。

コンソール

Esc を押すとコンソールが下に表示されます。そこでコマンドを入力し、Enter を押すとコマンドを実行することができます。

実行結果は下に表示されます。

例えば、ここでは 1+2 は 3 になり、hello("debugger") は何も返さないので、結果は undefined です:

ブレイクポイント

example page のコードの中で何が起こっているのか見てみましょう。hello.js で、行番号 4 をクリックします。コードではなく、左側にある数字の "4" です。

これでブレイクポイントがセットできました。行 8 の数字もクリックしましょう。

このようになるはずです(青はあなたがクリックした場所です):

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

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

右のペインでは、常にブレイクポイントの一覧を見ることができます。色々なファイルで多くのブレイクポイントを設定しているときに役に立ちます。それらは次のようなことができます:

• コード中のブレイクポイントに素早く移動する(右ペインで移動したいブレイクポイントをクリック)
• チェックを外すことで、一時的にブレイクポイントを無効にする
• 右クリックから削除を選択することで、ブレイクポイントを削除する
• …など

デバッガコマンド

次のように、debugger コマンドを使うことでもコードを停止することができます:

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

  debugger;  // <-- デバッガはここで止まります

  say(phrase);
}

これは、コードエディタで作業中、ブラウザに切り替えて開発者ツールを起動し、ブレイクポイントをセットするために開発者ツールでスクリプトを探すなどという手間をかけたくない場合にとても便利です。

一時停止して見回す

今回の例では、hello() はページ読み込み中に呼び出されるので、デバッガを起動する最も簡単な方法はページを再読み込みすることです。なので、 F5 (Windows, Linux)または Cmd+R (Mac) を押しましょう。

ブレイクポイントがセットされているので、実行は4行目で一時停止します。:

右側にある情報のドロップダウンを開いてください(矢印のラベルがついています)。現在のコードの状態を調べることができます:

1. Watch – 任意の式の現在の値を表示します。

   + をクリックし、式を入力することができます。デバッガは、常にその値を表示し、実行中に自動的に再計算を行います。

2. Call Stack – ネストされた呼び出しのチェーンを表示します。

   現時点では、デバッガは hello() 呼び出しの内側におり、index.html のスクリプト(そこに関数はないので、 “anonymous” と呼ばれます)によって呼び出されました。

   スタックの項目をクリックすると、デバッガは該当のコードにジャンプし、すべての変数も同様に調べられます。

3. Scope – 現在の変数。

   Local はローカル関数の変数を表示します。また、ソース上でもハイライト表示されたそれらの値を見ることができます。

   Global はグローバル変数を持っています

   そこには我々がまだ学んでいない this キーワードもありますが、もうすぐ学びます。

実行を追跡する

スクリプトを 追跡 してみましょう。

右ペインの上部にそのボタンがあります。

– “再開”: 実行の継続, ホットキー F8.

実行を再開します。もしも他にブレイクポイントがなければ、そのまま実行が継続され、デバッガの制御から外れます。

次の図は、それを行った後に見える画面です:

実行は再開され、say() の中の別のブレイクポイントに到達し、そこで一時停止します。右の “Call stack” を見てください。もう一度呼び出すことで増えています。私たちは、今 say() の中にいます。

– “ステップ”: 次のコマンドを実行します, ホットキー F9.

次の文を実行します。クリックすると、alert が表示されます。

これを何度もクリックすることで、1つずつスクリプト文が実行されます。

– “ステップオーバー”: 次のコマンドを実行しますが、関数の中には入りません, ホットキー F10。

上の “ステップ” コマンドと同じですが、次の文が関数呼び出しの場合に振る舞いが異なります。つまり、alert のような組み込みではなく、我々自身が作成した関数です。

“ステップ” コマンドはその中に入り、その最初の行で実行を一時停止します。一方 “ステップオーバー” はネストされた関数呼び出しを目に見えない状態で実行し、関数の内部をスキップします。

その後、その関数の直後で実行が一時停止されます。

これは、関数呼び出しの内部で起きていることに興味がない場合に便利です。

– “ステップイン”, ホットキー F11.

“ステップ” と同じですが、非同期関数呼び出しで振る舞いが異なります。もし JavaScript を学び始めたばかりであれば、まだ非同期呼び出しは取り扱ってないのでこの違いは無視してください。

将来的には、“ステップ” コマンドは、後で実行される setTimeout (スケジューリングされた関数呼び出し) のような非同期アクションを無視することに注意してください。“ステップイン” はそれらのコードに入り、必要に応じてそれらを待ちます。詳細については開発者マニュアル を参照してください。

– “ステップアウト”: 現在の関数の最後まで実行を継続します、ホットキー Shift+F11。

実行は現在の関数の最後の行で停止します。これは を使ってネストされた呼び出しに誤って入ってしまい、早く関数の終わりまで進めたい場合に便利です。

– すべてのブレイクポイントの有効/無効

このボタンは単にブレイクポイントの on/off を切り替えるもので、実行の状態は変わりません。

– エラー発生時の自動一時停止の有効/無効

有効にして開発者ツールを開いている場合、スクリプトエラーが起きると実行が自動で一時停止します。そして、何が間違っていたかを知るために変数を分析することができます。なので、スクリプトがエラーで死んだ場合は、どこで死んでその時どんなコンテキストであるかを確認するため、デバッガを起動しこのオプションを有効にしてページを再読込しましょう。

ロギング

コンソールに何かを出力するために console.log 関数があります。

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

// 見るにはコンソールを開いてください
for (let i = 0; i < 5; i++) {
  console.log("value", i);
}

コンソールの中なので、通常のユーザはその出力を見ることはありません。見るためには、開発者ツールのコンソールタブを開くか、開発者ツールの別のタブで Esc を押します。 :下にコンソールが表示されます。

コードに十分なログを仕込んでいれば、デバッガなしで何が行われているか知ることができます。

サマリ

これまで見てきた通り、スクリプトを一時停止するには主に3つの方法があります。

1. ブレイクポイント
2. debugger 文
3. エラー (開発者ツールを開き、ボタン を ON にしている場合)

これらにより変数を検査し実行が間違っている場所を確認することができます。

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

このチャプターの情報はデバッグを始めるには十分ですが、今後、特にブラウザの作業が多い場合は、上記のサイトを見て開発者ツールのより高度な機能を調べてください。

また、開発者ツールの色んな場所をクリックすることで何が表示されるかを見ることが出来ます。恐らくそれは開発者ツールを学ぶのに最も近道です。同様に右クリックも忘れないように!