🔥 DevTools (Firefox) 人気ショートカット
Firefox DevToolsの必須ショートカットを使いこなして、Web開発のデバッグ効率を劇的に向上させましょう。要素の検証、コンソール操作、デバッグ作業がスムーズに行えるようになります。
TOP 1
Ctrl+Shift+C
要素を選択
ページから要素を選択するモードを開始し、インスペクタータブを開きます。
🎯 マウスでクリックするだけで、ページ上の任意の要素を素早く選択してインスペクトできます
💡 覚え方: Choose element（要素を選ぶ）
TOP 2
Ctrl+Shift+K
Webコンソールを開く
JavaScriptコンソールとログメッセージを表示するWebコンソールを開きます。
🎯 JavaScriptのエラーやログを確認したり、コマンドを実行するコンソールを瞬時に開きます
💡 覚え方: Konsole（コンソール）
TOP 3
Ctrl+Shift+M
レスポンシブデザインモード
様々なデバイスサイズでページをプレビューするレスポンシブデザインモードを切り替えます。
🎯 様々なデバイスサイズでの表示を確認し、レスポンシブデザインの問題を素早く発見できます
💡 覚え方: Mobile（モバイル）
TOP 4
F10
ステップオーバー
現在の行を実行し、次の行へ移動します（関数の中には入りません）。
🎯 デバッグ中にコードを1行ずつ実行し、関数の詳細に入らずに処理の流れを追跡できます
💡 覚え方: F10 = 飛び越える
TOP 5
Esc
分割コンソールを切り替え
分割コンソールの表示/非表示を切り替えます（コンソールツール以外で使用可能）。
🎯 どのツールを使用中でも、Escキーで分割コンソールを表示してログを確認できます
💡 覚え方: Escape（エスケープ）
TOP 6
F2
HTMLとして編集
選択した要素をHTMLとして編集します。
🎯 選択した要素のHTMLを直接編集して、リアルタイムで変更を確認できます
💡 覚え方: F2 = 編集モード
TOP 7
Shift+↑
値を10増加
選択したCSSの数値を10増加させます。
🎯 CSSの数値を10単位で素早く調整して、スタイルの微調整を効率的に行えます
💡 覚え方: Shift + ↑ = 大きく増加