開発時のデバッグ（debugger ステートメント） — debugger
JavaScript には debugger ステートメントという特別な命令があります。
初心者は「ここでプログラムを一時停止して、開発ツールで中身を確認できる」と覚えると理解しやすいです。
基本のコード例
function calc(x, y) {
const result = x + y;
debugger; // ← ここで処理が止まる
return result;
}
calc(2, 3);
debugger;を書いた場所でプログラムが一時停止。- ブラウザの 開発者ツール（DevTools） や Node.js の デバッガを開いていると、そこで変数の値や処理の流れを確認できる。
よく使うテンプレート集
関数の途中で止める
function greet(name) {
const msg = `Hello, ${name}`;
debugger; // msg の中身を確認したい
return msg;
}
greet("Aki");
ループの中で止める
for (let i = 0; i < 5; i++) {
debugger; // i の値を毎回確認できる
console.log(i);
}
条件付きで止める
function checkAge(age) {
if (age < 18) {
debugger; // 未成年のときだけ止める
}
return age >= 18;
}
checkAge(16);
例題: バグ調査に使う
function divide(a, b) {
const result = a / b;
if (b === 0) {
debugger; // ここで停止して b の値を確認
}
return result;
}
divide(10, 0);
- 効果: エラーが出る前に処理を止めて、変数の状態を確認できる。
実務でのコツ
- 開発中だけ使う: 本番コードには残さない。
debuggerがあるとユーザー環境で止まってしまう。 - ブラウザの DevTools と併用: Chrome, Edge, Firefox などで「Sources」タブを開くと、
debuggerで止まった場所が見える。 - Node.js でも使える:
node inspectや VSCode のデバッグ機能と組み合わせると便利。
ありがちなハマりポイントと対策
- 開発ツールを開いていないと意味がない:
debuggerはツールが開いていないと無視される。 - 残しっぱなしに注意: 本番環境に
debuggerが残っていると、ユーザーが操作できなくなる。
練習問題（配列処理のデバッグ）
function sumArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
debugger; // 各ステップで sum の値を確認
}
return sum;
}
sumArray([1, 2, 3, 4]);
直感的な指針
debugger= 「ここで止まって中身を見たい」ための命令。- 開発者ツールと組み合わせて使う。
- 本番コードには残さない。
- 初心者は「関数途中」「ループ」「条件付き」で練習すると理解が深まる。
これを覚えれば「コードの途中で止めて変数や処理を確認」できるようになり、バグ調査がぐっと楽になります。