以上から十分情報が揃ったのでまとめる。
url: https://github.com/ChromeDevTools/chrome-devtools-mcp keywords: MCP, Chrome DevTools, coding agent, Puppeteer, performance trace oneliner: Chrome DevTools の機能をコーディングエージェントに橋渡しする MCP サーバ。Chrome を起動・操作・計測させ、デバッグや性能分析を任せられるようにする。 —
chrome-devtools-mcp は、Gemini / Claude / Cursor / Copilot などのコーディングエージェントから「本物の Chrome ブラウザ」を操作・検査できるようにする MCP（Model Context Protocol）サーバ（TypeScript/Node.js 実装、npm パッケージ公開）。Google Chrome DevTools チームが公式にメンテしている。
--slim モード（3 ツール）、MCP を介さず使える CLI、Claude Code 向けプラグイン（MCP + Skills 同梱）も用意設計原則（docs/design-principles.md）として「Agent-Agnostic」「トークン節約のため生データではなく意味的サマリを返す」「重い成果物はファイルパス/URI で返す」「自己修復できるエラーメッセージ」など、エージェント向けに最適化された API を志向している点が特徴。
「LLM エージェントがフロントエンドを“実際に動かして”検証・デバッグ・性能評価できる」 こと。既存手段との違いは次の通り。
| 比較対象 | 位置付け・違い |
|---|---|
| Puppeteer / Playwright をエージェントから直接叩く | 生 API は粒度が細かすぎ、返すデータも大きく LLM 向けでない。本ツールは意味のある粒度のツールと要約済みレスポンスを提供 |
| Playwright MCP など汎用ブラウザ自動化 MCP | 操作中心で、パフォーマンストレース・Lighthouse 監査・CrUX フィールドデータ・ヒープスナップショット・ソースマップ付きスタックトレースなど DevTools 固有の計測/解析能力が強い |
| ヘッドレス実行スクリプトや CI 計測 | 人手で書く必要があり対話的ではない。本ツールはエージェントが自律的に「このページの LCP を測って原因分析して」と依頼できる |
| Chrome DevTools の手動操作 | 人間が画面で行うため繰り返しにくい。エージェントに再現可能・連続的に回させられる |
結果として、エージェントに「実装 → ブラウザで開く → コンソールエラー拾う → 性能トレース取る → 修正」のループを任せられるのが最大の嬉しさ。
~/.claude.json や Cursor / VS Code / Codex / Windsurf 等の MCP 設定に、次を追加（npx で毎回最新を取得）
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Claude Code なら claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest、あるいは /plugin install chrome-devtools-mcp（Skills も同梱）。
--headless / --isolated（使い捨てプロファイル）/ --channel=canary / --viewport=1280x720 / --slim / --browser-url=http://127.0.0.1:9222（既存 Chrome に接続）/ --no-usage-statistics などCheck the performance of https://developers.chrome.com
new_page → navigate_page → performance_start_trace → performance_stop_trace → performance_analyze_insight などを連鎖呼び出し