Chrome DevTools MCP の導入方法：Codex と Claude Code で Web の Network、Console、Performance をデバッグする

Sun, 12 Jul 2026 12:13:00 +0800

Chrome DevTools MCP は、Agent に Web ページを無制限に「代わりにクリックさせる」ためのツールではありません。Chrome DevTools のネットワークリクエスト、コンソールメッセージ、スクリーンショット、パフォーマンス trace、ページ自動化を MCP 経由で coding agent に提供します。「なぜ白画面になるのか」「なぜ API が 401 を返すのか」「クリックしてもなぜ反応しないのか」「なぜ急に遅くなったのか」といった、検証可能な問題に向いています。

MCP ツール呼び出し失敗の切り分けと組み合わせてください。まず MCP プロセスと権限を確認し、その後にブラウザの実際の証拠を読みます。公式リポジトリは、ライブ Chrome 検査、自動化、デバッグ、パフォーマンス分析をサポートすると説明し、MCP クライアントがブラウザデータを閲覧できることも注意しています。公式リポジトリ

まず適用場面を確認する

次のような場合に適しています。

Agent が console error、network request、スクリーンショット、または performance trace を読む必要がある。
Chrome ですでに確認できるフロントエンド問題を再現したい。
「ページ上の現象」を、特定可能なリクエスト、セレクタ、スタック情報へ変換したい。
テストサイトとテストアカウントが本番から分離されている。

無人の本番オペレーターとして扱ってはいけません。ブラウザにはログイン状態、顧客情報、決済画面、社内システムが含まれ得ます。専用の Chrome profile と低権限のテストアカウントから始めてください。

Codex と Claude Code の最小セットアップ

Codex CLI では MCP server を追加します。

`1`	`codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`

Claude Code では次を使います。

`1`	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`

導入後は該当クライアントを再起動し、「テストページを開き、コンソールエラーと失敗したネットワークリクエストを列挙する」といった低リスクの確認を Agent に依頼します。最初から「管理画面にログインしてデータを変更する」ような仕事を渡さないでください。

Windows で npx 起動後に Chrome が見つからない、または MCP の初期化が遅い場合は、.codex/config.toml で cmd を明示し、タイムアウトを延長できます。

[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Agent に推測させず、証拠で切り分ける

次の順序を固定することを勧めます。

ページとスクリーンショット：対象環境、アカウント、ルートが開かれていることを確認する。
Console：赤い件数だけでなく、最初の error の全文と source-mapped stack を記録する。
Network：4xx、5xx、CORS、長時間 pending のリクエストを絞り、URL、リクエスト本文、レスポンス要約を確認する。
操作の再現：Agent には一度のクリックまたは入力だけをさせ、再度 network と console を確認する。
Performance：問題が安定して再現してから trace を記録し、一時的なネットワーク揺れをレンダリング問題と誤認しない。

Agent には、次のように境界を明確にしたタスクを渡せます。

http://localhost:3000 だけで「送信後にページが空白になる」を再現する。
最初にスクリーンショットを撮り、その後 console error と失敗した network request を列挙する。
ページを変更しない、フォームを送信しない、他ドメインにアクセスしない。
出力は「現象、証拠、最有力の原因、次の手動検証」の4項目で構成する。

よくある失敗と対処

現象	最初に確認すること
MCP は追加したがツールが使えない	クライアントを再起動し、`npx`、Node.js、MCP 設定が現在のスコープで有効か確認する。
既存の Chrome に接続できない	デバッグポートと `--browser-url` が一致するか確認する。すでに開いているブラウザを自動で引き継ぐとは考えない。
見るべきでないページデータを見た	直ちにその profile を閉じ、分離したテスト profile に切り替え、Agent のタスク範囲を狭める。
パフォーマンスレポートが安定しない	ページ、ネットワーク条件、再現手順を固定し、複数回採取して比較する。

公式ツールは既定で、ツール呼び出しの成功率、レイテンシ、環境などの利用統計を収集します。環境上オフにする必要があれば --no-usage-statistics を渡してください。性能分析では CrUX データを読む場合もあり、必要に応じて --no-performance-crux を使えます。これはデバッグ失敗ではなく、導入前に決めるべきプライバシーとネットワークの境界です。

まとめ

Chrome DevTools MCP は、Agent による Web デバッグを「スクリーンショットからの推測」から、console、network、trace に基づく調査へ変えます。最初にブラウザの身元を分離し、タスクを一つの環境と一つの再現手順に限定してから、Agent に修正案を求めてください。

ブラウザデバッグ on KnightLiブログ

Chrome DevTools MCP の導入方法：Codex と Claude Code で Web の Network、Console、Performance をデバッグする

まず適用場面を確認する

Codex と Claude Code の最小セットアップ

Agent に推測させず、証拠で切り分ける

よくある失敗と対処

まとめ