1.2 ショートカット一覧

Keyboard Shortcuts Reference

DevToolsを効率的に操作するためのキーボードショートカット一覧。マウス操作を減らし、作業スピードを向上させる。よく使うものから覚えていくと良い。
Macユーザーへ CtrlはCmdに、AltはOptionに読み替えてください。

グローバル（全体共通）

DevToolsの開閉

ショートカット 動作
F12 DevToolsを開く/閉じる
Ctrl+Shift+I DevToolsを開く/閉じる
Ctrl+Shift+J Consoleパネルを直接開く
Ctrl+Shift+C 要素検査モードで開く

パネル操作

ショートカット 動作
Ctrl+[ 前のパネルに移動
Ctrl+] 次のパネルに移動
Ctrl+Shift+D 配置位置を切り替え（右/下/別ウィンドウ）
Ctrl+Shift+M デバイスモードの切り替え
Esc Drawerの開閉
F1 設定を開く

コマンドパレット・検索

ショートカット 動作
Ctrl+Shift+P コマンドパレットを開く
Ctrl+P ファイルを開く（ファイル名検索）
Ctrl+Shift+F 全ファイルを横断検索
Ctrl+F 現在のパネル/ファイル内を検索

その他

ショートカット 動作
Ctrl++ DevToolsの拡大
Ctrl+- DevToolsの縮小
Ctrl+0 DevToolsのズームをリセット
? ショートカットヘルプを表示

Elementsパネル

ショートカット 動作
↑ / ↓ 前/次の要素を選択
→ 要素を展開
← 要素を折りたたむ
Enter 属性を編集
H 要素の表示/非表示を切り替え
Delete 要素を削除
F2 HTMLとして編集
Ctrl+Z 変更を元に戻す
Ctrl+Y 変更をやり直す

Stylesペイン

ショートカット 動作
Tab 次のプロパティ/値に移動
Shift+Tab 前のプロパティに移動
↑ / ↓ 数値を±1
Shift+↑ / ↓ 数値を±10
Ctrl+↑ / ↓ 数値を±100
Alt+↑ / ↓ 数値を±0.1

Consoleパネル

ショートカット 動作
Enter コードを実行
Shift+Enter 改行（複数行入力）
↑ / ↓ コマンド履歴を遡る/進む
Ctrl+L Consoleをクリア
Tab オートコンプリートを確定
→ オートコンプリート候補を受け入れ
Esc オートコンプリートをキャンセル
Ctrl+U 現在の行をクリア

Sourcesパネル

ファイル操作

ショートカット 動作
Ctrl+S 変更を保存
Ctrl+G 指定行に移動
Ctrl+O ファイルを開く
Ctrl+W タブを閉じる

デバッグ操作

ショートカット 動作
F8 または Ctrl+\\ 実行を再開/一時停止
F10 または Ctrl+' ステップオーバー（次の行へ）
F11 または Ctrl+; ステップイン（関数内へ）
Shift+F11 または Ctrl+Shift+; ステップアウト（関数から出る）
Ctrl+B ブレークポイントの追加/削除
Ctrl+Shift+B 条件付きブレークポイント
Ctrl+. 次のコールフレームを選択
Ctrl+, 前のコールフレームを選択

コード編集

ショートカット 動作
Ctrl+D 次の同一単語を選択に追加
Ctrl+M 対応する括弧に移動
Ctrl+/ 行コメントの切り替え
Alt+↑ / ↓ 行を上下に移動
Shift+Alt+↑ / ↓ 行を複製

Networkパネル

ショートカット 動作
Ctrl+E 記録の開始/停止
Ctrl+R ページを再読み込み
Ctrl+Shift+R キャッシュを無視して再読み込み
R 選択したリクエストを再送
C 選択したリクエストをcURLとしてコピー
H 選択したリクエストをfetchとしてコピー

Performanceパネル

ショートカット 動作
Ctrl+E 記録の開始/停止
Ctrl+Shift+E ページをリロードして記録
Ctrl+S プロファイルを保存
Ctrl+O プロファイルを読み込み
W / S ズームイン/アウト
A / D 左/右に移動
参考文献
[1] Keyboard shortcuts - Chrome DevTools. developer.chrome.com