DevTools (Firefox)
ブラウザ内蔵の強力な開発者ツール群。DOM操作、ネットワーク分析、パフォーマンス測定でWeb開発を革新します
Ctrl+Shift+I
開発ツールを開く
最後に使用したツールで開発ツールボックスを開きます。
💡 覚え方: Inspector（インスペクター）
Ctrl+Shift+K
Webコンソールを開く
JavaScriptコンソールとログメッセージを表示するWebコンソールを開きます。
💡 覚え方: Konsole（コンソール）
Ctrl+Shift+C
要素を選択
ページから要素を選択するモードを開始し、インスペクタータブを開きます。
💡 覚え方: Choose element（要素を選ぶ）
Ctrl+Shift+Z
デバッガーを開く
JavaScriptデバッガーを開いてコードをデバッグします。
💡 覚え方: デバッグのZ（最後の文字）
Ctrl+Shift+E
ネットワークモニターを開く
ネットワーク要求とレスポンスを監視するネットワークモニターを開きます。
💡 覚え方: Network（ネットワーク）
Ctrl+Shift+M
レスポンシブデザインモード
様々なデバイスサイズでページをプレビューするレスポンシブデザインモードを切り替えます。
💡 覚え方: Mobile（モバイル）
Ctrl+]
次のツールへ移動
開発ツール内で右方向に次のツールへ移動します。
💡 覚え方: 右方向 ]
Ctrl+[
前のツールへ移動
開発ツール内で左方向に前のツールへ移動します。
💡 覚え方: 左方向 [
F1
設定を開く
アクティブなツールと設定画面を切り替えます。
💡 覚え方: F1 = ヘルプ/設定
Esc
分割コンソールを切り替え
分割コンソールの表示/非表示を切り替えます（コンソールツール以外で使用可能）。
💡 覚え方: Escape（エスケープ）
Ctrl+J
行へ移動
指定した行番号へジャンプします。
💡 覚え方: Jump to line（行へジャンプ）
Ctrl+F
ファイル内検索
現在のファイル内でテキストを検索します。
💡 覚え方: Find（検索）
Ctrl+/
コメント切り替え
選択した行のコメント化/コメント解除を切り替えます。
💡 覚え方: / = コメント記号
Delete
ノードを削除
選択したHTML要素を削除します。
💡 覚え方: Delete（削除）
F2
HTMLとして編集
選択した要素をHTMLとして編集します。
💡 覚え方: F2 = 編集モード
H
ノードの表示/非表示
選択した要素の表示/非表示を切り替えます。
💡 覚え方: Hide（隠す）
S
要素を表示領域にスクロール
選択した要素が見えるようにページをスクロールします。
💡 覚え方: Scroll（スクロール）
↑
値を増加
選択したCSSの数値を1増加させます。
💡 覚え方: ↑ = 増加
↓
値を減少
選択したCSSの数値を1減少させます。
💡 覚え方: ↓ = 減少
Shift+↑
値を10増加
選択したCSSの数値を10増加させます。
💡 覚え方: Shift + ↑ = 大きく増加
Ctrl+↑
値を0.1増加
選択したCSSの数値を0.1増加させます。
💡 覚え方: Ctrl + ↑ = 小さく増加
F8
実行を再開
ブレークポイントで停止した実行を再開します。
💡 覚え方: F8 = 再生
F10
ステップオーバー
現在の行を実行し、次の行へ移動します（関数の中には入りません）。
💡 覚え方: F10 = 飛び越える
F11
ステップイン
現在の行を実行し、関数の中に入ります。
💡 覚え方: F11 = 中に入る
Shift+F11
ステップアウト
現在の関数の実行を完了し、呼び出し元に戻ります。
💡 覚え方: Shift + F11 = 外に出る
Ctrl+B
ブレークポイントを切り替え
現在の行にブレークポイントを設定/解除します。
💡 覚え方: Breakpoint（ブレークポイント）
Ctrl+P
スクリプトを検索
名前でスクリプトファイルを検索します。
💡 覚え方: Pick script（スクリプトを選ぶ）
Ctrl+Shift+L
コンソールをクリア
コンソールの出力内容をすべてクリアします。
💡 覚え方: Clear（クリア）
F9
履歴を逆検索
コマンド履歴の逆方向検索を開始します。
💡 覚え方: F9 = 履歴検索
Shift+Enter
改行を挿入
複数行の式を入力するために改行を追加します。
💡 覚え方: Shift + Enter = 改行
Shift+F7
スタイルエディターを開く
CSSファイルを編集するスタイルエディターを開きます。
💡 覚え方: Shift + F7 = スタイル
Ctrl+S
スタイルシートを保存
現在のスタイルシートをディスクに保存します。
💡 覚え方: Save（保存）
Ctrl++
フォントサイズを拡大
開発ツール内のフォントサイズを大きくします。
💡 覚え方: + = 拡大
Ctrl+-
フォントサイズを縮小
開発ツール内のフォントサイズを小さくします。
💡 覚え方: - = 縮小
Ctrl+0
フォントサイズをリセット
開発ツール内のフォントサイズをデフォルトに戻します。
💡 覚え方: 0 = リセット
Ctrl+Shift+D
ドッキングモードを切り替え
開発ツールのドッキングモード（下部/右側/別ウィンドウ）を切り替えます。
💡 覚え方: Docking（ドッキング）