[Chrome] DevTools の便利機能まとめ ― 知らないと損する12個

DevTools はだいたい Elements と Console と Network しか使わない、という状態が長かったのですが、調べてみると普段の作業が明らかに短くなる機能がけっこう埋まっています。実際に使って効いたものだけ、まとめておきます。

モバイル表示の確認（デバイスモード）は別記事にしたので、こちらはそれ以外の便利機能です。

ℹ️ DevTools はバージョンによってメニュー名や場所が変わります。見つからないときは後述のコマンドメニューで検索するのが早いです。

1. コマンドメニュー（これだけは覚える）

Ctrl + Shift + P（macOS は Cmd + Shift + P）。DevTools のほぼ全機能を名前で呼び出せます。

パネルを開く（Show Coverage、Show Rendering など）
スクリーンショットを撮る（screenshot と入力）
設定を切り替える（disable javascript など）

機能の場所を覚える必要がなくなるので、この記事で紹介する残り11個も、全部これ経由で呼べます。迷ったらここ、という入口。

2. Local Overrides：本番のファイルを手元で書き換える

個人的に一番「早く知りたかった」やつ。本番サイトのCSSやJSを、ローカルの内容で差し替えて表示できます。リロードしても維持されます。

Sources パネルで Overrides を有効にして、保存先フォルダを指定
Network や Sources でファイルを編集して保存すると、以降そのファイルはローカル版が使われます

「本番のここのCSSをこう直したら解決するか」を、デプロイせずに確認できるのが強い。レスポンスヘッダーやAPIのレスポンスを差し替えて、フロント側の分岐を試すのにも使えます。

3. リクエストのブロック

Network パネルでリクエストを右クリック →ブロック。特定のJSやCSS、外部タグを読まない状態を再現できます。

広告タグや解析タグが表示崩れの原因かを切り分ける
サードパーティ製スクリプトが落ちたときの挙動を確認する
画像を止めて、代替テキストやレイアウトの保険が効いているか見る

コードを触らずに「無かったら？」を試せるので、原因の切り分けが速くなります。

4. Copy as fetch / cURL

Network パネルでリクエストを右クリック → コピー。ヘッダーやCookieを含んだ形で、そのまま再実行できるコードが手に入ります。

# Copy as cURL したものをターミナルに貼るだけ
curl 'https://example.com/api/items' \
  -H 'accept: application/json' \
  -H 'cookie: session=...'

APIの挙動を確かめるとき、Postman を開いてヘッダーを手で埋める作業が丸ごと消えます。Copy as fetch ならそのまま Console に貼って実行できます。

5. Console の小技

Console は console.log を眺めるだけの場所ではありません。

書き方	何ができる
`$0`	Elements で選択中の要素を参照。`$1` は1つ前
`$('セレクタ')` / `$$('セレクタ')`	`querySelector` / `querySelectorAll` の短縮形。`$$` は配列で返る
`copy(obj)`	値をクリップボードにコピー。長いJSONを取り出すのに便利
`console.table(arr)`	配列やオブジェクトを表形式で表示。一覧の確認が段違いに見やすい
`console.dir(el)`	DOM要素をオブジェクトとして展開

$0 と copy() の組み合わせは特によく使います。要素を選んで copy($0.outerHTML) すれば、その部分のHTMLがそのままクリップボードへ。

ℹ️ ライブ式（Console上部の目のアイコン）に document.activeElement などを入れておくと、値が常時更新されて表示されます。フォーカス移動やスクロール量を追いたいときに便利。

6. 要素の状態を強制する

Elements パネルの Styles で :hov を開くと、:hover や :focus を固定できます。

マウスを離すと消えてしまうホバー時のスタイルを、落ち着いて調整できます。:focus-visible や :active も同様。ドロップダウンの中身を調べるときの必需品です。

7. Changes：DevTools でいじった内容を差分で見る

DevTools 上でCSSを直していると、結局どこを変えたのか分からなくなるやつ。ドロワーの Changes を開くと、変更点が差分表示されます。

そのままエディタに写せるので、「画面上で調整 → 差分を見ながらコードに反映」という流れが作れます。

8. Coverage：使われていないCSS・JSを見つける

コマンドメニューから Show Coverage。ページ読み込み時に実際には使われなかったコードの割合が出ます。

未使用CSSが多いなら、読み込みを分割する余地がある
巨大なJSライブラリが丸ごと未使用なら、遅延読み込みの候補

数字で出るので、リファクタの優先順位を決める材料になります。

9. レンダリング系のエミュレーション

コマンドメニューから Show Rendering。ここは便利機能の宝庫です。

Paint flashing … 再描画された領域が光ります。無駄な再描画の発見に
Layout shift regions … レイアウトのガタつき（CLS）の発生箇所が可視化されます
prefers-color-scheme … ダークモードの見え方をOS設定を触らず確認
FPS meter … アニメーションのフレームレートを常時表示

このブログもダークモード対応なので、prefers-color-scheme の切り替えは毎回ここでやっています。

10. Recorder：操作を記録して再生・書き出し

Recorder パネルでページ操作を録画すると、そのまま再生できます。さらに、Puppeteer のスクリプトやJSONとして書き出しが可能。

再現手順が長いバグを、毎回手で操作せずに再現する
E2Eテストの下書きを、実際の操作から起こす
ステップ実行やスロー再生で、どこで壊れるか観察する

「この不具合、10ステップ操作しないと出ないんですよ」というやつが、一気に楽になります。

11. Performance の Insights

Performance パネルの Insights は、計測結果を具体的な指摘の形で出してくれます。

LCP / INP を段階ごとに分解して、どこで時間を食っているか
レンダリングブロックしているリクエストの指摘
強制同期レイアウトの検出

以前は Lighthouse を回して、そこから推測して、という手間がありましたが、その多くがパネル内で完結するようになりました。まず計測、次に Insights を上から潰す、という進め方が素直です。

12. AI アシスタントと、エージェント連携

最近の DevTools には AI アシスタントが組み込まれていて、Console のエラーやスタイルの問題について説明を求められます。「このエラーの意味は？」を、その場で聞けるのは地味に助かります。

さらに、Google から Chrome DevTools MCP（Chrome DevTools for Agents）が出ていて、コーディングエージェントに実際のブラウザの中身を見せられるようになりました。Claude Code なら、この1行で繋がります。

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

これを入れると、エージェント側が実際にページを開いて、コンソールのエラーやパフォーマンスを自分で確認できるようになります。従来は「コードは読めるが、ブラウザで何が起きているかは分からない」状態だったのが、ここで繋がった形。

ℹ️ Claude Code の設定まわりはこちらの記事で触れています。MCPサーバーを組織で使うなら、権限設定もセットで考えておくのが安全です。

ショートカット早見表

操作	Windows / Linux	macOS
DevTools を開く	`F12` / `Ctrl + Shift + I`	`Cmd + Option + I`
要素を選択して開く	`Ctrl + Shift + C`	`Cmd + Shift + C`
コマンドメニュー	`Ctrl + Shift + P`	`Cmd + Shift + P`
デバイスツールバー	`Ctrl + Shift + M`	`Cmd + Shift + M`
Console を開く（ドロワー）	`Esc`	`Esc`
ファイルを検索	`Ctrl + P`	`Cmd + P`
全文検索	`Ctrl + Shift + F`	`Cmd + Option + F`

Esc でドロワーが開閉するのは、知らないと損しているやつの筆頭。Elements を見ながら Console を出せます。

まとめ

迷ったら コマンドメニュー。場所を覚える必要がなくなります
Local Overrides と リクエストのブロックは、原因の切り分けを一気に速くする二枚看板
Copy as fetch / cURL でAPI確認の手間が消える
Coverage・Rendering・Insights は、改善対象を数字と可視化で示してくれる
Recorder は再現手順の自動化、MCP連携はエージェントにブラウザを見せる新しい選択肢

全部覚える必要はなくて、コマンドメニューから順に触ってみるのが結局いちばん早いです。