プログラムが意図した通りに動かない場合に、デバッグという作業を行います。デバッグとは、バグという「プログラムの記述や動作の間違い」を見つけ、それらを排除する作業のことです。デバッグ作業では、一般的にプログラムの実行を一時停止しながら、値や挙動が意図したものになっているかを確認します。
ここでは、Chromeの開発ツールのデバッガ（デバッグ作業を支援する機能）の使用方法について簡単に見てみます。
デバッグの練習用コード
<script>
let a = 1;
let b = 2;
console.log(a+b);
</script>
このコードを記述したページで開発ツール（Ctrl+Shift+I, Console API参照）を開き、ソース（Sources）パネルを選択して、左サイドバーに表示されているファイル名、ここでは「how_to_debug_sample.html」を選択すると下図のようになります。
＞＞ Sample Page
scriptタグに記述されたコードは、ブラウザで HTMLを読み込んだ時点で実行されるため、開発ツールで画面を開いた時点ですべての処理がすでに完了しています。
上記のコードの実行を一時停止して、コードが実行される過程を見てみます。
この画像のように、２行目の行番号の左側をクリックしてブレークポイントを設置してみます。ブレークポイントを設置すると、その地点でコードの実行が一時停止することになります。
この状態でブラウザ画面を更新すると、コードの実行が２行目で一時停止し、コードが停止中の行の背景色が薄い青色で表示されます。
この一時停止した状態では、まだ２行目の let a = 1; は実行されていません。そこで、右上にあるデバッガの「Step Over」ボタン
を押すと、コードの実行が１行分だけ進みます。
これで、２行目の let a = 1; が実行されたため、変数a にはすでに 1 が代入されています。そのため、この状態では、コンソールで a と入力して変数a の中身を確認すると、その値の 1 がコンソール上に表示されます。なお、画面下部のコンソールを表示するには、開発ツールを開いた状態で「Esc」キーを押します。
このように、デバッガを使って、コードの実行状況を確認できます。また、「Step Over」を含めて４つのボタンを使用できるため、ぜひ活用してみてください。
Resume Step Over
Step In
Step Out熟練の開発者でも、複雑なコードの処理を確認するときにはデバッガを使います。意図した通りにコードが動かないときには、コンソールパネルやソースパネルを積極的に使ってみてください。