「ブラウザ開発ツール（DevTools） を使ったデバッグ」は、初心者から“実務で通用する人”へ進むための大きな一歩です。
ここでは、Chrome / Edge / Firefox に共通する操作を中心に、
「ブレークポイント」 と 「ウォッチ（変数の中身を観察）」 を、
実際に試しながら理解できるように解説します。
1. 開発ツール（DevTools）とは？
ブラウザには、JavaScript のエラーを調べたり、コードを途中で止めて中身を見たりするためのツールが内蔵されています。
Chrome / Edge なら 「F12」キー または 右クリック → 検証（Inspect）」 で開けます。
主なタブ：
| タブ名 | 役割 |
|---|---|
| Console | console.log() の出力やエラーメッセージを確認 |
| Sources | JavaScript コードを表示・編集・デバッグ |
| Network | 通信（API呼び出しなど）を確認 |
| Elements | HTML / CSS を確認・編集 |
今回は Sourcesタブ に注目します。
2. ブレークポイントとは？
📍「ブレークポイント」とは：
プログラムを“その行で一時停止”させる仕組みです。
停止中に変数や値の中身を確認できるため、バグ調査が劇的にしやすくなります。
例題で試してみよう
以下のコードを、ブラウザでHTMLとして実行してみましょう👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブレークポイント練習</title>
</head>
<body>
<h1>デバッグ練習</h1>
<script>
function greet(name) {
const message = "こんにちは、" + name + "さん！";
console.log(message);
}
function main() {
const user = { name: "Halu" };
greet(user.name);
}
main();
</script>
</body>
</html>
3. ブレークポイントの設定手順（Chromeなど）
✅ 手順
- ページを開く
F12→ 「Sources」タブをクリック- 左のファイル一覧からこのHTMLファイルを選択
<script>内のconst message = ...行の左端（行番号）をクリック
👉 青い点がつけばブレークポイント設定完了！
▶️ 実行してみる
ページをリロードすると、その行でプログラムが 一時停止 します。
この状態で：
| 操作 | 意味 |
|---|---|
| ▶（再開） | 次のブレークポイントまで実行 |
| ⏭（ステップオーバー） | 次の行へ進む |
| ⏬（ステップイン） | 呼び出された関数の中に入る |
| ⏹（停止） | デバッグを終了 |
4. ウォッチ（変数の中身を観察）
停止中は右側に「Scope（スコープ）」や「Watch」などのパネルが表示されます。
💬 主な見方
| 項目 | 内容 |
|---|---|
| Local | 現在の関数内の変数 |
| Global | 全体で使える変数（window など） |
| Watch | 自分で追加した変数を常に監視 |
使い方例：
- 右側の「Watch」欄で「＋」をクリック
nameやmessageを入力- コードを1行ずつ進めると、値の変化がリアルタイムで見える！
5. ステップ実行（1行ずつ動かす）
止まっている状態で上部のボタンを使うと、処理を“1行ずつ”進められます。
| ボタン | 操作 | 説明 |
|---|---|---|
| ▶ Resume | 実行を再開 | 次のブレークポイントまで進む |
| ⏭ Step over | 次の行へ | 関数呼び出しを中に入らずに進める |
| ⏬ Step into | 関数の中に入る | 呼び出し元を追いたいときに便利 |
| ⏹ Stop | デバッグ終了 |
6. 実践例：バグを探してみよう
次のコードには「エラー」があります👇
どこで何が起きているか、ブレークポイントを使って探してみましょう。
<script>
function addPrice(items) {
let total = 0;
for (let i = 0; i <= items.length; i++) { // ← <= に注意！
total += items[i].price;
}
return total;
}
const products = [
{ name: "りんご", price: 100 },
{ name: "みかん", price: 80 },
{ name: "ぶどう", price: 150 }
];
console.log("合計金額:", addPrice(products));
</script>
🔍 手順
F12 → Sourcesでファイルを開くtotal += items[i].price;にブレークポイントを置く- リロードして一時停止
iとitems[i]の中身をウォッチに追加して観察Step overで1行ずつ進める
🧠 気づく点
iが3のとき、items[3]はundefined- そのため
items[3].priceがTypeErrorを出す
→ 修正：ループ条件を i < items.length にする
7. 実践テクニック集（覚えると便利）
| 操作 | 説明 |
|---|---|
| 右クリック → Add conditional breakpoint | 条件付きブレークポイント（例：i === 3 のときだけ停止） |
| console.log() を使いながら確認 | 軽い調査ならログで十分 |
| 「Call stack」タブ | どの関数の中で止まっているかをツリーで表示 |
| 「Scope」タブ | 現在見える変数スコープを一覧表示 |
| 「Pause on exceptions」 | 例外が起きた瞬間に自動停止（これ超便利！） |
8. 「Pause on exceptions」を使うと一気にラク！
Console にエラーが出たけど、どこで起きたかわからない…
というときは：
- 「Sources」タブ右上の「⏸」アイコン（Pause on exceptions）をオン
- ページを再読み込み
- エラー発生時に自動で停止し、スタックや変数を確認できる
これを使うと「stackを読む前に、その場で原因を見つける」ことができます。
9. まとめ：ブラウザデバッグを使いこなそう！
| 機能 | 学ぶポイント |
|---|---|
| ブレークポイント | 処理を一時停止して原因を特定 |
| ウォッチ | 変数の値をリアルタイム観察 |
| ステップ実行 | コードを1行ずつ進めて流れを理解 |
| Call Stack | 関数の呼び出し順を把握 |
| Pause on exceptions | 例外発生時に自動停止 |
