Chrome DevTools

2025.12.05

DevTools起動

ショートカット説明
F12DevToolsを開く
Cmd/Ctrl + Shift + IDevToolsを開く
Cmd/Ctrl + Shift + JConsoleパネルを開く
Cmd/Ctrl + Shift + C要素を検査モードで開く
Cmd/Ctrl + Option/Alt + IDevToolsを開く(Mac/Win)

パネル切り替え

ショートカット説明
Cmd/Ctrl + ]次のパネルへ
Cmd/Ctrl + [前のパネルへ
Cmd/Ctrl + Shift + Mデバイスモード切替
EscConsoleドロワー表示/非表示
Cmd/Ctrl + Shift + Pコマンドメニューを開く

Elements パネル

ショートカット説明
↑/↓要素を選択
←/→要素の展開/折りたたみ
Enter属性を編集
H要素の表示/非表示切替
Delete要素を削除
Cmd/Ctrl + Z変更を取り消し
F2HTMLとして編集

Console パネル

ショートカット説明
Cmd/Ctrl + Lコンソールをクリア
Tabオートコンプリート
↑/↓コマンド履歴を表示
Shift + Enter複数行入力
Cmd/Ctrl + U行をクリア

Console コマンド

コマンド説明
$0選択中の要素を参照
$_最後の評価結果
$('selector')querySelector
$$('selector')querySelectorAll
$x('xpath')XPathで要素選択
copy(object)クリップボードにコピー
clear()コンソールをクリア
dir(object)オブジェクトのプロパティ表示
table(data)テーブル形式で表示
monitor(fn)関数呼び出しを監視
monitorEvents(el)イベントを監視

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キャッシュを無視して再読み込み

Network フィルター

フィルター説明
XHRXMLHttpRequest/Fetchのみ
JSJavaScriptファイルのみ
CSSCSSファイルのみ
Img画像ファイルのみ
Docドキュメントのみ
is:running進行中のリクエスト
larger-than:100k100KB以上のファイル
-domain:example.com特定ドメインを除外

Performance パネル

ショートカット説明
Cmd/Ctrl + E記録の開始/停止
Cmd/Ctrl + Sプロファイルを保存
Cmd/Ctrl + Shift + Eページ読み込み記録

Application パネル

機能説明
Local Storageローカルストレージの確認・編集
Session Storageセッションストレージの確認・編集
CookiesCookieの確認・編集・削除
Cache Storageキャッシュの確認
IndexedDBIndexedDBの確認
Clear storageストレージをクリア
← 一覧に戻る