⌘⌥I
Chrome DevToolsChrome DevTools ショートカット一覧
Chrome DevToolsの必須ショートカットを機能別に整理。Elements・Console・Network・デバッグなど、Web開発に必要なキーバインド集。
はじめに
Chrome DevToolsはWeb開発者にとって不可欠なツールです。HTML/CSSの検証、JavaScriptのデバッグ、ネットワーク解析など、あらゆる場面で使います。ショートカットを覚えることで、デバッグ作業が格段にスムーズになります。
DevToolsの起動
| 操作 | Mac | Windows |
|---|---|---|
| DevToolsを開く | Cmd + Option + I | F12 / Ctrl + Shift + I |
| Consoleを直接開く | Cmd + Option + J | Ctrl + Shift + J |
| 要素を検証 | Cmd + Option + C | Ctrl + Shift + C |
| コマンドメニュー | Cmd + Shift + P | Ctrl + Shift + P |
Elementsパネル
| 操作 | Mac | Windows |
|---|---|---|
| DOM要素の選択モード | Cmd + Shift + C | Ctrl + Shift + C |
| 兄弟要素間の移動 | ↑ / ↓ | ↑ / ↓ |
| 要素の展開/折りたたみ | → / ← | → / ← |
| 属性の編集 | Enter | Enter |
| HTMLとして編集 | F2 | F2 |
| 要素を非表示 | H | H |
Consoleパネル
| 操作 | Mac | Windows |
|---|---|---|
| Consoleをクリア | Cmd + K | Ctrl + L |
| 複数行入力 | Shift + Enter | Shift + Enter |
| 前のコマンド | ↑ | ↑ |
| オートコンプリート | Tab | Tab |
Sourcesパネル（デバッグ）
| 操作 | Mac | Windows |
|---|---|---|
| ブレークポイント設定 | Cmd + B | Ctrl + B |
| 実行再開 | Cmd + \ / F8 | F8 |
| ステップオーバー | Cmd + ' / F10 | F10 |
| ステップイン | Cmd + ; / F11 | F11 |
| ステップアウト | Cmd + Shift + ; | Shift + F11 |
| ファイル検索 | Cmd + P | Ctrl + P |
Networkパネル
| 操作 | 説明 |
|---|---|
| Cmd + E | ネットワーク記録の開始/停止 |
| Cmd + K | ログのクリア |
| フィルタ入力欄 | リクエストの絞り込み |
パネル共通操作
| 操作 | Mac | Windows |
|---|---|---|
| パネル切替 | Cmd + [ / ] | Ctrl + [ / ] |
| ドック位置変更 | Cmd + Shift + D | Ctrl + Shift + D |
| 設定を開く | F1 | F1 |
| DevToolsを閉じる | Cmd + W | Ctrl + W |
知っておくと便利な小技
- $0: Elementsパネルで選択中の要素をConsoleで参照
- copy(): Console上でオブジェクトをクリップボードにコピー
- console.table(): 配列やオブジェクトを表形式で表示
- Networkパネルのthrottle: 低速回線のシミュレーション