Learn how to find and fix problems in your JavaScript by checking the code step by step with Chrome DevTools.
プログラムがうまく動かないときは「バグ」があるかもしれません。バグを見つけて直す作業が「デバッグ」です。Chrome などのブラウザには、この作業を手伝う「デバッガ」という便利な道具が用意されています。ここでは ブレークポイントで止める → 一行ずつ進める（ステップ実行） → 変数の中身をコンソールで確かめる という最短ルートで、基本の流れを身につけます。
プログラムが意図した通りに動かない場合に、デバッグという作業を行います。デバッグとは、バグという「プログラムの記述や動作の間違い」を見つけ、それらを排除する作業のことです。デバッグ作業では、一般的にプログラムの実行を一時停止しながら、値や挙動が意図したものになっているかを確認します。
ここでは、Chromeの開発ツールのデバッガ（デバッグ作業を支援する機能）の使用方法について簡単に見てみます。
デバッグの練習用コード
HTML
<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を読み込んだ時点で実行されるため、開発ツールで画面を開いた時点ですべての処理がすでに完了しています。
実行タイミングを調整したい場合は、<body> の末尾に書くか、<script defer> を使うと、ページ読み込み後に確実に停止できます。
上記のコードの実行を一時停止して、コードが実行される過程を見てみます。
この画像のように、２行目の行番号の左側をクリックしてブレークポイントを設置してみます。ブレークポイントを設置すると、その地点でコードの実行が一時停止することになります。
この状態でブラウザ画面を更新すると、コードの実行が２行目で一時停止し、コードが停止中の行の背景色が薄い青色で表示されます。
この一時停止した状態では、まだ２行目の let a = 1; は実行されていません。そこで、右上にあるデバッガの「Step Over」ボタン
を押すと、コードの実行が１行分だけ進みます。
これで、２行目の let a = 1; が実行されたため、変数a にはすでに 1 が代入されています。そのため、この状態では、コンソールで a と入力して変数a の中身を確認すると、その値の 1 がコンソール上に表示されます。なお、画面下部のコンソールを表示するには、開発ツールを開いた状態で「Esc」キーを押します。
このように、デバッガを使って、コードの実行状況を確認できます。また、「Step Over」を含めて４つのボタンを使用できるため、ぜひ活用してみてください。
Resume Step Over
Step In
Step Out熟練の開発者でも、複雑なコードの処理を確認するときにはデバッガを使います。意図した通りにコードが動かないときには、コンソールパネルやソースパネルを積極的に使ってみてください。
Uncaught ReferenceError: x is not definedlet または const で変数を宣言してください。Unexpected tokenCannot read properties of undefinedconsole.log で確認してからアクセスしましょう。defer 属性を追加するか、<body> 末尾に移動してから再読込してください。console.log が呼ばれていない、または条件分岐で通っていない可能性があります。ログ位置を見直してください。defer 属性を使うと確実に止められます。