Google Chrome + DevTools キーボードショートカット

Google Chrome は 2026 年現在 65% 以上の市場シェアを持つ世界で最も使用されている Web ブラウザで、内蔵の DevTools は Web フロントエンドデバッグのデファクトスタンダードです。Chrome のショートカットは 2 層に分かれます：ブラウザレベル（Ctrl+T で新しいタブ、Ctrl+L でアドレスバー）と DevTools レベル（F12 で開く、Ctrl+Shift+P でコマンドパレット、F8 でステップオーバー、F11 でステップイン）。 本リファレンスカードは最もよく使う 80+ ショートカットを 6 つの機能別に分類しています：一般、タブとウィンドウ、アドレスバーと検索、ページ操作、DevTools（パネル）、DevTools（デバッグ）。すべてのエントリは Google の公式 Chrome + DevTools ドキュメントから転記しています。 使い方 - ページ上部でプラットフォーム（Windows / macOS）を選択。 - 任意の単語またはキーの組み合わせを検索。 - 行の「コピー」ボタンをクリックしてキー文字列を取得。 - PNG（2400×1140 横向き）を壁紙として、PDF を A4 横向き 1 ページの参考としてエクスポート。 ヒント - F12（Win）/ ⌥⌘I（Mac）で DevTools を開く — Web 開発者の最も重要なショートカット。 - DevTools 内で Ctrl+Shift+P を押すとコマンドパレット — パネル、アクション、設定を何でも検索可能。 - F8 = スクリプトの停止/再開、F10 = ステップオーバー、F11 = ステップイン、⇧F11 = ステップアウト。 - Ctrl+Shift+C / ⇧⌘C でインスペクトモード — ホバーで DOM ノードをハイライト。 - Ctrl+Shift+J / ⌥⌘J で Console を直接開く（Elements パネルをスキップ）。 なぜ vscode-shortcuts と統合しないのか？Chrome DevTools はブラウザレベル、VS Code はエディタレベル。両者には少し重複（Format Document など）がありますが、ショートカットエコシステムは分かれています。分離により各ツールがフォーカスされます。