このチートシートで確認できること
Chrome DevTools は、画面表示、JavaScript、通信、保存データ、パフォーマンスをブラウザ上で調べるための開発者ツールです。このページでは、まず覚えるショートカット、Console、Elements、Sources、Network、Performance、Application の見方を確認できます。
初学者は、最初に Cmd/Ctrl + Shift + I、Cmd/Ctrl + Shift + C、Console の $0、Network の再読み込み、Application の Storage 確認を覚えると、Webページの不具合を切り分けやすくなります。
| ショートカット | 説明 |
|---|
F12 | DevToolsを開く |
Cmd/Ctrl + Shift + I | DevToolsを開く |
Cmd/Ctrl + Shift + J | Consoleパネルを開く |
Cmd/Ctrl + Shift + C | 要素を検査モードで開く |
Cmd/Ctrl + Option/Alt + I | DevToolsを開く（Mac/Win） |
パネル切り替え
| ショートカット | 説明 |
|---|
Cmd/Ctrl + ] | 次のパネルへ |
Cmd/Ctrl + [ | 前のパネルへ |
Cmd/Ctrl + Shift + M | デバイスモード切替 |
Esc | Consoleドロワー表示/非表示 |
Cmd/Ctrl + Shift + P | コマンドメニューを開く |
Elements パネル
| ショートカット | 説明 |
|---|
↑/↓ | 要素を選択 |
←/→ | 要素の展開/折りたたみ |
Enter | 属性を編集 |
H | 要素の表示/非表示切替 |
Delete | 要素を削除 |
Cmd/Ctrl + Z | 変更を取り消し |
F2 | HTMLとして編集 |
Console パネル
| ショートカット | 説明 |
|---|
Cmd/Ctrl + L | コンソールをクリア |
Tab | オートコンプリート |
↑/↓ | コマンド履歴を表示 |
Shift + Enter | 複数行入力 |
Cmd/Ctrl + U | 行をクリア |
ポイント: $0はElements パネルで選択中の要素を参照できます。要素を選択してConsoleで即座に操作できる、デバッグの必須テクニックです。
Console コマンド
| コマンド | 説明 |
|---|
$0 | 選択中の要素を参照 |
$_ | 最後の評価結果 |
$('selector') | querySelector |
$$('selector') | querySelectorAll |
$x('xpath') | XPathで要素選択 |
copy(object) | クリップボードにコピー |
clear() | コンソールをクリア |
dir(object) | オブジェクトのプロパティ表示 |
table(data) | テーブル形式で表示 |
monitor(fn) | 関数呼び出しを監視 |
monitorEvents(el) | イベントを監視 |
実践メモ: Cmd/Ctrl + Shift + PのコマンドメニューはVS Codeと同じ操作感。スクリーンショット撮影やネットワーク条件の変更など、隠れた機能にアクセスできます。
Sources パネル（デバッグ）
| ショートカット | 説明 |
|---|
F8 / Cmd/Ctrl + \ | 一時停止/再開 |
F10 / Cmd/Ctrl + ' | ステップオーバー |
F11 / Cmd/Ctrl + ; | ステップイン |
Shift + F11 | ステップアウト |
Cmd/Ctrl + B | ブレークポイント設定/解除 |
Cmd/Ctrl + G | 行へ移動 |
Cmd/Ctrl + O | ファイルを開く |
Cmd/Ctrl + Shift + O | 関数へ移動 |
Network パネル
| ショートカット | 説明 |
|---|
Cmd/Ctrl + E | 記録の開始/停止 |
Cmd/Ctrl + R | ページを再読み込み |
Cmd/Ctrl + Shift + R | キャッシュを無視して再読み込み |
注意: Cmd/Ctrl + Shift + R（キャッシュ無視リロード）とCmd/Ctrl + R（通常リロード）を混同しないように。キャッシュの問題を調査するときは必ずShift付きを使いましょう。
Network フィルター
| フィルター | 説明 |
|---|
XHR | XMLHttpRequest/Fetchのみ |
JS | JavaScriptファイルのみ |
CSS | CSSファイルのみ |
Img | 画像ファイルのみ |
Doc | ドキュメントのみ |
is:running | 進行中のリクエスト |
larger-than:100k | 100KB以上のファイル |
-domain:example.com | 特定ドメインを除外 |
| ショートカット | 説明 |
|---|
Cmd/Ctrl + E | 記録の開始/停止 |
Cmd/Ctrl + S | プロファイルを保存 |
Cmd/Ctrl + Shift + E | ページ読み込み記録 |
実践メモ: Networkパネルのlarger-than:100kフィルタで大きなリソースを特定し、パフォーマンス改善の糸口を見つけましょう。
ポイント: ブレークポイントはCmd/Ctrl + Bで設定。条件付きブレークポイント（右クリック）を使えば、特定条件のときだけ停止できます。
Application パネル
| 機能 | 説明 |
|---|
| Local Storage | ローカルストレージの確認・編集 |
| Session Storage | セッションストレージの確認・編集 |
| Cookies | Cookieの確認・編集・削除 |
| Cache Storage | キャッシュの確認 |
| IndexedDB | IndexedDBの確認 |
| Clear storage | ストレージをクリア |
まとめ
Chrome DevTools は、Console だけでなく、Elements、Network、Application を組み合わせて見ると原因を切り分けやすくなります。まずは「要素を見る」「Consoleで値を見る」「Networkで通信を見る」「Storageで保存状態を見る」の4つを押さえてください。
キャッシュ、Cookie、Local Storage を削除する操作は、ログイン状態や検証条件を変えるため、作業前に何を消すのかを確認します。
参考リソース
← 一覧に戻る 
