この記事の要点
• F12でDevTools起動、Cmd+Shift+Cで要素検査モード
• Console・Network・Sourcesパネルのショートカットを網羅
• $0や$$('selector')などConsoleユーティリティが超便利
| ショートカット | 説明 |
|---|
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 | ストレージをクリア |
参考リソース
この技術を体系的に学びたいですか？
未来学では東証プライム上場企業のITエンジニアが24時間サポート。月額24,800円から、退会金0円のオンラインIT塾です。
メールで無料相談する
← 一覧に戻る 