ブラウザのデベロッパーツール（Chrome DevTools）を使った効率的なバグ調査方法

要素の構造とスタイルの確認（Elementsパネル）

HTML構造とCSSスタイルの確認はバグ調査の第一歩です。

基本操作

• Elements パネルで該当要素をクリックすると、右側にCSSが表示されます。
• :hover などの擬似クラスも [ :hov ] ボタンで手動適用できます。

よくある調査例

<div class="button">クリックしてね</div>

ボタンのデザインが崩れている場合：

• .button クラスに margin が効いていない → !important が競合している？
• 階層構造で overflow: hidden が影響していないかチェック

---

コンソールでエラーを確認（Consoleパネル）

Console パネルは JavaScript のエラー発見に欠かせません。

よくある表示

• Uncaught ReferenceError
• TypeError: Cannot read properties of null
• Mixed Content: The page at...

効率的な使い方

• エラー行をクリックすると対象のスクリプトへジャンプ
• console.log() で変数や関数の値を出力し、流れを追跡

console.log('クリックされたID:', elementId);

---

ネットワーク通信を調べる（Networkパネル）

API通信の不具合は Network パネルで確認しましょう。

調査ポイント

• ステータスコード（200/404/500など）
• レスポンスボディの中身
• リクエストヘッダーと送信データ

例：fetchでデータが取得できない

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

→ Network で 404 Not Found ならURLミス、CORS エラーならサーバー設定を要確認。

---

ブレークポイントで処理を止める（Sourcesパネル）

Sources パネルでは JavaScript の任意の行で処理を一時停止できます。

設定方法

1. スクリプトを開く
2. 行番号をクリックしてブレークポイント設定
3. 変数の中身を確認したり、ステップ実行可能

function submitForm() {
  const form = document.querySelector('form');
  // この行でブレークポイント
  form.submit();
}

補足

• 条件付きブレークポイント：右クリック →「条件付きブレークポイント」
• DOM変更ブレークポイント：要素に対して「属性変更時に停止」なども可能

---

モバイル表示や表示崩れを再現（Device Mode）

画面サイズによるバグ調査は Device Toolbar を活用しましょう。

使い方

• Ctrl + Shift + M（Macでは Cmd + Shift + M）でモバイル表示に切り替え
• 特定の機種（iPhone/Pixelなど）や回線速度をシミュレート可能
• 横幅ごとの表示崩れ、メディアクエリの効き具合をチェック

---

ローカルストレージ・Cookie・キャッシュの確認（Applicationパネル）

Application パネルでは、状態管理やセッションまわりのバグ調査に使えます。

調査ポイント

• LocalStorage / SessionStorage の内容
• Cookie の有効期限や属性（Secure / HttpOnly）
• キャッシュされているリソースの確認と削除

localStorage.setItem('token', 'abcd1234');
console.log(localStorage.getItem('token'));

---

まとめ：Chrome DevToolsを使いこなして調査時間を短縮しよう

Chrome DevTools は、HTML/CSS/JS/API通信など多岐にわたるバグの特定に役立ちます。特に以下のようにパネルを使い分けることで、調査がスムーズに進みます。

• Elements：レイアウト崩れの調査
• Console：JSエラーやログ出力
• Network：APIエラーやCORSの確認
• Sources：ステップ実行でバグの流れを把握
• Device Mode：レスポンシブ確認
• Application：状態管理・キャッシュの確認

実際のバグに遭遇したら、ぜひこの記事を参考に「どのパネルで」「何をチェックするか」を意識して効率的に調査を進めてみてください。