脱マウス宣言：DevToolsの「Command Menu」が開発の景色を変える
エンジニアの皆さん、こんにちは。現場でコードを書いていると、つい「マウスに手を伸ばす」という動作が、思考のコンテキストスイッチを邪魔していると感じることはありませんか？
特にブラウザの「DevTools」は、タブをクリックし、メニューを掘り下げ、目的のパネルを探す…という無駄な操作が多すぎます。今日紹介する「Command Menu（コマンドメニュー）」は、DevToolsを単なるデバッグツールから、あなたの「脳の拡張機能」へと進化させる魔法のインターフェースです。
これをマスターすれば、開発速度は物理的に2倍以上になります。 今日からマウスを捨てる覚悟で読み進めてください。
—
1. Command Menuとは何か？なぜ最強なのか
Command Menuは、DevToolsの全機能をキーボード操作だけで呼び出せる「司令塔」です。
VS Codeのコマンドパレット（`Ctrl/Cmd + Shift + P`）と全く同じ思想で、ブラウザの中に統合されています。
なぜこれが重要か？それは、「操作の抽象化」ができるからです。
例えば「ネットワークパネルを開いて、キャッシュを無効にして、コンソールに戻る」という手順を、マウスなら5〜6回クリックする必要がありますが、Command Menuなら数秒のキータイプで完結します。
基本の起動コマンド
- Windows / Linux: `Ctrl` + `Shift` + `P`
- macOS: `Cmd` + `Shift` + `P`
これを押した瞬間、画面上部に検索窓が出現します。これがあなたの「DevToolsのすべて」を操作する窓口です。
—
2. 現場で震えるほど役立つ「即戦力」コマンド
初心者が最初に覚えるべきは「パネル移動」と「状態変更」の二大カテゴリです。まずはここから自分の指に叩き込んでください。
パネルの瞬時切り替え（`Show [パネル名]`）
いちいちタブをクリックする必要はありません。
- `Show Network`: ネットワークタブへジャンプ
- `Show Console`: コンソールへジャンプ
- `Show Elements`: 要素検証へジャンプ
デバッグの質を上げる「魔法のコマンド」
実務で毎日使う、隠れた名コマンドを厳選しました。
1. `Screenshot`:
- `Capture area screenshot`: 選択範囲だけをスクショ。バグ報告時のエビデンス作成に必須。
- `Capture full size screenshot`: ページ全体のロングスクリーンショット。これを知るだけでデザインレビューが爆速になります。
2. `Throttling`:
- `Emulate network throttling`: 「3G低速回線」などを即座にシミュレート。低スペック環境での挙動確認に。
3. `Coverage`:
- `Show Coverage`: 読み込まれているJS/CSSのうち、実際に実行されたコードを可視化。不要なコード（デッドコード）の特定に絶大な威力を発揮します。
—
3. 実践：マウス操作をゼロにする「開発ルーティン」
では、実際にどう使うのか。現場で頻出する「APIレスポンスの確認とデバッグ」を例に、マウスに触れない操作手順を見てみましょう。
1. 起動: `Cmd + Shift + P` (全操作の起点)
2. 移動: `Show Network` と入力して `Enter`
3. 絞り込み: `Cmd + F` でフィルタ入力（XHRのみに絞る）
4. 詳細確認: 該当リクエストをクリック（これはマウスが必要ですが、キーボードの矢印キーで選択可能です）
5. 戻り: `Cmd + Shift + P` -> `Show Console` -> `Enter`
どうでしょう。ブラウザの境界線を意識せず、思考の速度でUIを操る感覚が掴めたはずです。
—
4. 精度を高める「HelloWorld」的練習設定
まずは、今日から以下の設定をDevToolsで有効にしてください。これにより、Command Menuの利便性がさらに向上します。
手順：実験的機能の解放
Command Menuの真価は「Experiments」を有効にすることで極限まで引き出されます。
1. DevToolsを開き、右上の「歯車アイコン（Settings）」をクリック。
2. 左メニューの「Experiments」を選択。
3. 以下の項目にチェックを入れてください（推奨）。
- [ ] Enable CSS overview: CSS設計の全体像を即座に把握できます。
- [ ] Focus pane on open: パネルを開いた瞬間にフォーカスが当たるため、キーボード操作が即座に効くようになります。
—
最後に：なぜ「マウスを捨てる」のか
DevToolsをキーボードだけで操作するということは、「ツールに使われる側」から「ツールを支配する側」に回るということです。
マウスを握るというわずかな動作は、脳のワーキングメモリを数ミリ秒消費します。この積み重ねが、深い集中状態（フロー状態）を破壊する要因になります。
今日から、Command Menuという武器を手に取ってください。最初は戸惑うかもしれませんが、一週間もすれば「なぜ今までマウスで操作していたんだろう？」と過去の自分を笑えるようになっているはずです。
さあ、次のコミットは、マウスに触れずに終わらせてみませんか？