デバッグ
プログラムが誤っているとき、当然ながらプログラムは動作しません。この誤りをバグと呼びます。バグを消すための操作をデバッグと呼びます。デバッグには、以前学習した開発者ツールを利用することができます。
console.log
ブラウザ上で動作するJavaScriptのプログラムでconsole.logが呼ばれると、開発者ツールのコンソールにその値が表示されます。
開発者ツールを確認してみましょう。
デバッガ
デバッガは、デバッグを支援するためのソフトウェアです。ブラウザの開発者ツールには、JavaScript向けの非常に強力なデバッガが搭載されています。
以下のコードを実行してみましょう。
Chromeの開発者ツールでは、Sourcesタブで記述されているHTMLやCSS、JavaScriptファイルの内容を表示できます。先ほど記述したscript.jsの2行目の、行番号の左側をクリックしてみましょう。丸い記号が表示されるはずです。
これは、ブレークポイントと呼ばれる、プログラムの実行を一時的に中断するための機能です。ブレークポイントが実際に動作することを確認するため、ページをリロードしてみましょう。
プログラムの実行が一時中断されました。この状態で、変数名にカーソルを合わせると、その時点での変数の値が表示されます。また、画像中では右側に表示されているパネルには、定義されている変数の一覧も表示されていることがわかります。
再生ボタンを押すと、プログラムの実行が再開されます。上記の例の場合は、次のループでもう一度2行目が実行されるため、そこでまたプログラムが中断されます。10回のループの間に、変数の値がどのように変化しているかを観察してみてください。
tip
再生ボタンの右隣にある3つのアイコンは、順にステップオーバー、ステップイン、ステップアウトです。
ステップオーバーを利用すると、プログラムの実行が次の文に移動します。ステップインの動作はステップオーバーの動作と似ていますが、実行中の文に関数が含まれる場合、その内部に移動します。ステップアウトは、現在処理している関数の処理を抜けたところまで実行します。