Chrome DevTools MCP

Chrome DevTools MCP（chrome-devtools-mcp）は、コーディングエージェントに生きた Chrome を渡す Google の Model Context Protocol サーバーです。2026-08-21 再確認：一次リポジトリは github.com/ChromeDevTools/chrome-devtools-mcp。ライセンスは Apache 2.0。同日の GitHub は 49,501 star、3,454 fork。npm パッケージ名は chrome-devtools-mcp。作成日は 2025-09-11。

同じ採掘で r/ClaudeAI に「BEST MCP 2026」まとめがありました。エージェントが実ブラウザを開き、性能トレースを録り、コンソールを読む、という話です。

単独 IDE ではありません。Claude Code、Google Antigravity、Cursor と組み合わせてください。マルチブラウザのライブラリが欲しいなら Playwright です。

主な機能

• 本物の Chrome：README は Puppeteer と Chrome DevTools を使い、クリック、入力、スクリーンショット、結果待ちができると書く。
• 性能トレース：performance_start_trace / performance_stop_trace / performance_analyze_insight。トレースは CrUX API を呼ぶ場合があり、--no-performance-crux で止められる。
• デバッグ：ネットワーク、ソースマップ付きコンソール、Lighthouse、ヒープスナップショット（オプトイン）。
• README のクライアント一覧：Claude Code、Codex、Cursor、Antigravity、Copilot、Gemini CLI、OpenCode、JetBrains Junie など。固定する前に再確認。
• Slim モード：--slim はナビ、スクリプト、スクリーンショットの 3 ツールだけ。

制約：README はブラウザ内容が MCP クライアントに露出すると書く。ログイン済みの銀行タブを向けない。公式サポートは Google Chrome と Chrome for Testing。他の Chromium は動くかもしれないが、Google は約束しない。

再確認した仕様

利用統計は既定でオン。--no-usage-statistics または CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS でオプトアウト。Chrome 本体の統計とは別です。

使う場面

• フロントエンドエージェントが本物のページをクリックする必要がある。
• 性能デバッグ：README の最初のプロンプトは https://developers.chrome.com を調べること。
• すでに Chrome がある Antigravity / Claude Code で、二系統のブラウザを増やしたくない人。

はじめに

1. Chrome DevTools for agents を読む。
2. npx -y chrome-devtools-mcp@latest を MCP 設定に入れる。
3. 公開 URL を調べさせる。ブラウザはツールが必要になったとき起動し、MCP 接続だけでは起動しない。
4. 統計が嫌なら --no-usage-statistics を付ける。

Claude Code の一行（README）：claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest。

よくある質問

接続すると Chrome が開きますか？

いいえ。README はツールがインスタンスを必要としたときに起動すると書く。

Firefox は？

一次情報としては約束されていない。Chrome と Chrome for Testing のみ。

Playwright と同じですか？

違います。Playwright は Chromium、Firefox、WebKit。これはエージェント向け Chrome DevTools です。

代替

• Playwright：Chrome 以外も要るなら。
• Google Antigravity：Google のエージェント IDE。この MCP はそのブラウザに付けられる。
• Kitesurf：ホスト型ブラウザ / CDP。この npm パッケージではない。

コツ

1. 古いサーバーにピン留めしないよう @latest を使う。
2. チャットに貼りたくない cookie は共有しない。
3. クライアント一覧は README を再確認する。

まとめ

コーディングエージェントに実 Chrome タブが必要なら github.com/ChromeDevTools/chrome-devtools-mcp から始めてください。欲しいのがテストフレームワークなら Playwright を開いてください。