mh2.1 DevToolsの起動方法とショートカット
DevToolsは、Webブラウザに標準搭載されている開発者用ツールです。
Google Chromeでは、次の方法で起動できます。
🖱️ マウス操作で起動する方法
- ページ上で右クリック
- 「検証（Inspect）」をクリック
→Elementsパネルが開きます。
⌨️ ショートカットで起動する方法
| OS | ショートカットキー |
|---|---|
| Windows / Linux | F12 または Ctrl + Shift + I |
| macOS | Command + Option + I |
また、要素を直接調査したいときは、次のショートカットが便利です。
- 要素を選択して検証：
Ctrl + Shift + C（macOSではCommand + Shift + C）
💡 ヒント：
DevToolsを開いた状態で再読み込みする場合、**「ハードリロード」**が可能になります。
右クリック → 「キャッシュの消去とハード再読み込み」は、キャッシュが絡んだバグの調査に便利です。
2.2 表示位置の切り替え
DevToolsは、表示位置を自由に切り替えられます。
- 画面下部に表示（デフォルト）
- 画面右側に表示
- 別ウィンドウで開く
切り替え方法：
ツールバー右上にある「縦に点が3つ並んだアイコン」 → 「Dock side」で変更可能です。
開発スタイルやモニターの広さに応じて最適な位置を選びましょう。
2.3 各パネル（ペイン）の概要
DevToolsは複数の「パネル」と呼ばれるタブで構成されています。
それぞれのパネルは特定の目的に特化しており、状況に応じて使い分けることが大切です。
| パネル名 | 主な用途 |
|---|---|
| Elements | ページのDOM構造とCSSの確認・編集 |
| Console | ログ出力、JSコードの一時実行、エラー確認 |
| Sources | JSファイルの構造確認、ブレークポイントを使ったデバッグ |
| Network | 通信状況、リクエスト/レスポンスの確認 |
| Performance | 描画・実行速度の分析（タイムライン） |
| Application | Cookie、Storage、Service Worker などの管理 |
| Lighthouse | ページのパフォーマンス・アクセシビリティ診断 |
| Security | SSL証明書やHTTPS設定の確認 |
🧑🏫 補足：
使用頻度が高いのは 「Elements」「Console」「Network」 の3つです。
まずはこれらの基本操作に慣れることで、開発効率が大きく向上します。
2.4 よくある操作例：最初にやってみよう
✅ サイトで特定のテキストが見つからない
→ Elements パネルで Ctrl + F を使って検索してみましょう。
✅ JavaScriptエラーが発生している
→ Console パネルで赤いエラーを探し、内容を確認します。
✅ サーバーとの通信状況を調べたい
→ Network パネルを開き、ページを再読み込みして通信ログを取得します。
📝 まとめ
DevToolsは、適切なパネルを素早く開き、問題に応じて切り替えることが鍵です。
第2章では、まずツールを**「迷わず起動して、使い始められる状態」**になることが目標です。
