【JS番外編-1】脱・初心者！「動かない」を自分で直すChrome検証ツールの使い方

JavaScriptを書いていて、こんな経験はありませんか？

• 「ボタンを押しても何も起きない…」
• 「計算結果がなぜか NaN になる…」
• 「どこが間違っているのか分からなくて、何時間も悩む」

そんな時、コードをじっと睨んでも答えは出ません。
プロのエンジニアは、ブラウザに標準装備されている「検証ツール（デベロッパーツールの）」を使って、外科医のようにプログラムの中身を覗いています。

今回は、バグ修正の時間を10分の1にする魔法のツールの使い方を伝授します。

ツールを起動しよう（F12キー）

Google Chromeを使っている場合、以下の方法でツールを開けます。

• キーボードの F12 キーを押す。
• または、画面の適当なところを右クリックして「検証（Inspect）」を選ぶ。

すると、画面の右側（または下側）に、英語が書かれたパネルが出てきます。
これがエンジニアの秘密兵器です。

Consoleタブ：エラーの赤文字を読む

まず見るべきは「Console（コンソール）」タブです。

プログラムに文法ミスがある場合、ここに赤い文字でエラーが表示されます。
英語だからと閉じないでください！ここには「答え」が書いてあります。

❌ Uncaught ReferenceError: btn is not defined at index.html:25

これを読み解くと、以下のようになります。

• 何が？：btn という変数が定義されてないよ（スペルミスかも？）。
• どこで？：index.html の 25行目 だよ。

右端にあるファイル名（例：index.html:25）をクリックすると、該当箇所にジャンプできます。
これだけで、ミスの場所が即座に分かります。

Sourcesタブ：時間を止める魔法「ブレークポイント」

エラーは出ていないけど、動きがおかしい…。
そんな時は、「Sources（ソース）」タブを使います。

ここでは、動いているプログラムを「好きな行で一時停止」させることができます。

手順

1. 「Sources」タブを開く。
2. 左側のファイル一覧から、自分のJSファイル（またはHTML）を選ぶ。
3. コードが表示されるので、止めたい行の「行番号」をクリックする。
   （青いマーカーがつきます。これをブレークポイントと呼びます）
4. その状態で、画面のボタンを押すなどしてプログラムを実行する。

すると、その行で画面が「カチッ」と固まります。
この状態でマウスを変数に乗せると、「その瞬間の変数の中身」が吹き出しで見えるのです！

• 「あれ、price が 100 じゃなくて "100円" という文字になってる！」
• 「だから計算がおかしかったのか！」

という風に、console.log を大量に書かなくても原因が一発で分かります。

Elementsタブ：HTML/CSSのリアルタイム整形

最後は「Elements（エレメンツ）」タブです。
ここでは、現在のHTMLの状態を確認したり、CSSを書き換えて試したりできます。

• JavaScriptで class="active" をつけたはずなのに、ついていない？
• append したはずの要素がどこに追加された？

こういった「見た目のバグ」はここで確認します。
右側のCSS欄で色やサイズを書き換えると、リアルタイムで画面に反映されるので、デザインの微調整にも超便利です。

まとめ

やりたいこと	使うタブ
エラー（赤文字）を確認する	Console
JSを一時停止して変数を覗く	Sources
HTML構造やCSSを確認する	Elements

「エラーが出たらラッキー」と思いましょう。
検証ツールが「ここが違うよ」と教えてくれているのですから。

次回はJS番外編の第2弾！
コードが増えてきても大丈夫。ファイルを分割して管理する「import / export（モジュール）」について解説します！