ブラウザ開発者ツールでデバッグする

コードを書けば必ずバグが生まれます。画面が意図と異なる表示になったり、ボタンを押しても反応がなかったり、データが読み込まれなかったり。その時開発者が最初にすることは — **ブラウザ開発者ツール（DevTools）**を開くことです。

実験室で結果がおかしい時に顕微鏡で覗くように、Web開発で問題が起きたらDevToolsで覗きます。すべての最新ブラウザ（Chrome、Edge、Safari、Firefox）に内蔵されており、インストール不要です。

DevToolsを開く

Mac:     ⌘ + Option + I
Windows: F12 または Ctrl + Shift + I

または: Webページ上で右クリック → 「検証（Inspect）」

DevToolsが開くと複数のタブが見えます。最もよく使う3つを学びましょう。

Elementsタブ：HTML/CSS構造を見る

Elementsタブは現在のページのHTML構造とCSSスタイルをリアルタイムで表示します。実験ノートの現在の状態を覗くようなものです。

できること：

1. HTML構造の確認 — どのタグがどこにあるか、ネスト構造がどうなっているかをツリー形式で確認できます

2. CSSのリアルタイム修正 — 右側パネルでCSS値を直接変更して即座に結果を確認できます。「このpaddingを20pxに変えたらどうなる？」→ すぐ確認 → 気に入ったらコードに反映

3. 要素の選択 — DevTools左上のカーソルアイコン（または⌘ + Shift + C）を押すと、ページ上でクリックした要素がElementsタブでハイライトされます

実践例：

問題：「フォントサイズを変えたのに適用されない」

1. 該当要素を右クリック → 検証（Inspect）
2. Elementsタブで該当要素が選択される
3. 右側のStylesパネルを確認
4. 自分のCSSに取り消し線が引かれている → 他のCSSが優先度で上書きしているという意味
5. どのCSSが上書きしているか確認して修正

Consoleタブ：JavaScript実行とエラー確認

ConsoleタブはJavaScriptの顕微鏡です。2つの役割があります。

1. エラーメッセージの確認

JavaScriptでエラーが出るとConsoleに赤色で表示されます：

❌ Uncaught TypeError: Cannot read properties of undefined (reading 'length')
     at calculateGC (script.js:15:28)

このメッセージは「script.jsの15行目で、undefinedのlengthを読もうとした」という意味です。エラーメッセージを読めるだけでデバッグの半分は終わります。

2. コードの直接実行

ConsoleにJavaScriptコードを直接入力して実行できます：

// Consoleで直接タイプ
document.title
// → "Western Blot プロトコル"

document.querySelectorAll("li").length
// → 9（リスト項目数）

2 + 2
// → 4

変数の値を確認したり、DOM要素を探索したり、簡単な計算をしたい時に便利です。

ConsoleとElementsを同時に見る：

Elementsタブを見ながら下にConsoleを一緒に表示できます：

• Escキーを押すと下部にConsoleドロワーが表示される
• もう一度Escを押すと閉じる

これでHTML構造を見ながら同時にJavaScriptを実行できます。

Networkタブ：API呼び出しの追跡

Networkタブはブラウザとサーバー間のすべてのリクエストを表示します。fetchやAjaxでAPIを呼び出した時、リクエストが正しく送られたか、レスポンスが何かを確認できます。

できること：

1. リクエスト一覧の確認 — ページロード時に読み込んだすべてのファイル（HTML、CSS、JS、画像、APIレスポンス）が時系列で並びます

2. APIレスポンスの確認 — 特定のリクエストをクリックするとHeaders（リクエスト/レスポンスヘッダー）、Preview（レスポンスプレビュー）、Response（生のレスポンス）が見られます

3. ステータスコードの確認 — 200（成功）、404（見つからない）、500（サーバーエラー）などが一目で見えます

実践例：

問題：「fetchでサンプルデータを読み込んでいるのに空白画面だけ出る」

1. Networkタブを開く
2. ページを更新（⌘ + R）
3. /api/samples リクエストを探す
4. ステータスコードを確認：
   - 404 → URLが間違っているかサーバーに該当ルートがない
   - 500 → サーバーコードにエラー（サーバーログを確認）
   - 200だが空の配列 → データがないかDBクエリの問題
5. Responseタブで実際のレスポンスデータを確認

Applicationタブ：保存されたデータの確認

ApplicationタブではCookie、localStorage、セッションストレージを確認・修正できます。

auth-cookiesトピックで学んだCookieが実際にどう保存されているかこのタブで確認できます：

Application → Cookies → localhost
→ session_id: abc123
→ Path: /
→ HttpOnly: ✓

DevBenchの学習進捗もlocalStorageに保存されています。Application → Local Storageで確認できます。

デバッグ3ステップチェックリスト

問題が起きた時、この順序で確認してください：

ステップ1：Console確認（赤いエラーがあるか？）

• あれば → エラーメッセージを読む → ファイル名:行番号を確認 → 該当コードを修正
• なければ → ステップ2へ

ステップ2：Network確認（APIリクエストは成功したか？）

• 404/500なら → サーバー側の問題
• 200だがデータがおかしければ → Responseを確認
• リクエスト自体がなければ → fetchコードが実行されていない → Consoleで確認

ステップ3：Elements確認（画面に要素があるか？）

• 要素があるのに見えなければ → CSSの問題（display: none、サイズ0、透明度など）
• 要素自体がなければ → JavaScriptがDOMに追加できていない

この3ステップだけ覚えていれば、ほとんどのWeb開発の問題を診断できます。

やってみよう（Faded Example）

空欄を埋めてDevTools Consoleで実行するデバッグコードを完成させてください。

// 1. ページ上の全h2タグの数を確認
document.querySelectorAll("").length
// 2. idが"result"の要素のテキストを確認
document.("result").innerText
// 3. 特定の変数の型を確認
 odValue
// → "number"

よくあるエラーと解決法

Q: DevToolsを開いたのにNetworkタブが空です

Networkタブは開いた後のリクエストのみ記録します。DevToolsを先に開いてから、ページを更新（⌘ + R）してください。

Q: Consoleにエラーが多いのですが自分のコードのエラーかわかりません

ブラウザ拡張機能（広告ブロッカーなど）がエラーを生むことが多いです。シークレットモード（⌘ + Shift + N）で開けば拡張機能なしでテストできます。

Q: ElementsでCSSを修正したのに更新すると元に戻ります

DevToolsでの修正は一時的です。気に入った値を見つけたら実際のCSSファイルに反映する必要があります。DevToolsは「実験用」で、コードファイルが「永久保存先」です。