こんにちは、かつコーチです。
「DevToolsを開いてください」と言われても、ショートカットも各タブの役割も分からないと戸惑いますよね。
今回は開き方とタブ構成の全体像をまとめます。
結論：まずこれをやればいい
DevToolsを開く方法は主に3つあります。
- ショートカット：Macは Command+Option+I、Windowsは F12 または Ctrl+Shift+I
- 右クリックメニュー：ページ上で右クリック →「検証」を選択
- Chromeメニュー：右上の「︙」→その他のツール→デベロッパーツール
まずはショートカットを覚えるのが一番早いです。
なぜそれで解決するのか（簡単な仕組みの補足）
DevToolsは、ページのHTML・CSS・JS・通信内容などをリアルタイムで確認・編集できる開発者向けパネルです。
上部には複数のタブが並んでいて、それぞれ役割が異なります。
- Elements：HTML構造とCSSの確認・編集
- Console：JavaScriptの実行やエラーログの確認
- Sources：JSファイルの中身確認・デバッグ
- Network：通信の一覧と読み込み速度の確認
- Application：Cookieやローカルストレージなどの確認
- Lighthouse：パフォーマンス診断
最初から全部を覚える必要はなく、まずはElementsとConsoleの2つだけ使えれば日常的な作業の大半はカバーできます。
あわせて知っておきたいこと（関連Tips・注意点）
DevToolsは画面の右側・下側・別ウィンドウなど表示位置を変更できます。
右上の「︙」（縦三点アイコン）から配置を選べるので、作業しやすい位置に固定しておくと効率が上がります。
また、開いたままにしておくとPCのメモリを消費するので、使い終わったら閉じる習慣をつけましょう。
まとめ
- DevToolsはCommand+Option+I（Mac）/ F12（Windows）で開ける
- まずはElementsとConsoleの2タブを覚えれば十分
- 配置は右上のメニューから変更可能
次は、Elementsパネルでその場でCSSを編集して確認するで実際の使い方を見てみましょう。
タグ: Chrome / 初心者向け / 実践Tips
コメント