こんにちは！プロクラスの國府です。
JavaScript を書いていて「エラーが出て動かない！」「思った値が入ってない！」という経験はありませんか？
そんなときに強力な味方になるのが Chrome DevTools の JavaScript デバッガ です。
本記事では、簡単なサンプルコードを使いながら ブレークポイント・ステップ実行・変数確認 などの基本的なデバッグ方法を解説していきます。
計算アプリ
+結果: ?
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>デバッグ練習</title>
</head>
<body>
<h1>計算アプリ</h1>
<input type=”number” id=”num1″ value=”5″> +
<input type=”number” id=”num2″ value=”3″>
<button id=”calcBtn”>計算</button>
<p>結果: <span id=”result”>?</span></p>
<script>
document.getElementById(“calcBtn”).addEventListener(“click”, () => {
const a = document.getElementById(“num1”).value;
const b = document.getElementById(“num2”).value;
// 本当は数値の加算をしたいのに文字列連結になる
const sum = a + b;
document.getElementById(“result”).textContent = sum;
});
</script>
</body>
</html>
このプログラムは「5」と「3」を入れてボタンを押すと 53 と表示されてしまいます。
原因をデバッガを使って探してみましょう。上がブラウザ表示、下がソースです。ソースのファイル名を「js_debug.html」としています。
DevTools の開き方
-
ショートカットキー
-
Mac:
⌘ + Option + I -
Windows:
Ctrl + Shift + I
-
-
またはページ上で右クリック → 「検証」
開いたら Sources タブ に切り替えます。
Sourceタブを開いたら、左側ペインの「js_debug.html」を選択する
ブレークポイントを設定する
const sum = a + b; の行番号をクリックして赤丸を付ける
「計算」ボタンをクリックして処理を実行すると、その行で一時停止します
ステップ実行の使い方
デバッガが停止したら、画面上部の操作ボタンでコードを進められます。
Resume (F8) → 次のブレークポイントまで進む
Step Over (F10) → 次の行に進む
Step Into (F11) → 関数の中に入る
Step Out (Shift+F11) → 関数から抜ける
変数の中身を確認する
右側の Scope パネルで、変数 a と b を確認すると、どちらも “5”, “3” の 文字列 になっていることがわかります。
原因は input.value が文字列を返す からです。
修正してみましょう。
文字列を数値に変換してから足せばOKです。
const a = Number(document.getElementById(“num1”).value);
const b = Number(document.getElementById(“num2”).value);
const sum = a + b;
再度実行すると、正しく 8 が表示されます
条件付きブレークポイント
-
行番号を右クリック → 「条件付きブレークポイントを追加」
-
例:
a === "5"のときだけ停止する
大規模なコードを効率的に調べたいときに便利です。
まとめ
console.log() も便利だけど、デバッガなら実行を止めてじっくり調べられる
基本操作は「ブレークポイント」「ステップ実行」「変数確認」
慣れてきたら「条件付きブレークポイント」「XHR監視」なども活用可能
このサンプルをベースに、実際の開発でもぜひ DevTools を活用してみてください