Chrome DevTools MCP：让 AI 会查性能

一句话定位：把 Chrome 开发者工具交给编码 Agent，看性能、抓网络、查控制台。

以前让 Agent 测页面，它只能看 DOM 或截图，性能、网络、内存这些真正出问题的地方它看不到。Chrome 官方团队做的 chrome-devtools-mcp 直接接入 Chrome DevTools：能录性能 trace 并提取可行动的结论、能看网络请求与控制台错误（带 source map 堆栈）、能用 Puppeteer 驱动真实操作。它同时提供 MCP 服务器和一个 chrome-devtools CLI，仓库为各客户端准备了插件清单（Claude Code、Cursor、Kimi Code、Gemini）。

核心能力

一、性能 trace 与洞察，不只是“跑个 Lighthouse”
它用 Chrome DevTools 本身录制 trace，再抽出性能洞察（如 performance_analyze_insight），并可结合 CrUX 真实用户数据对照实验室数据。场景很具体：首页白屏、交互卡顿这类问题，截图看不出来，trace 能。不想把 trace URL 发给 Google 时，加 --no-performance-crux 关掉。

二、网络与控制台都带上下文，排查不用猜
list_network_requests / get_network_request 能看重定向链、CORS 预检、请求体处理；控制台消息带 source-mapped 堆栈，未处理的 Promise 拒绝会给出原因，Map / Set / DOM 节点 / 循环引用这类参数也有描述。修一个“接口明明返了 200 但页面是空的”问题时，这两项比任何描述都直接。

三、基于 Puppeteer 的可靠自动化，带自动等待
导航、开新页、改窗口尺寸、执行脚本、输入文字、等元素，都是现成工具，并且会自动等待动作结果。它的定位不是“又一个 Playwright”，而是“能同时看 DevTools 内部状态的自动化”，所以调试和回放能对齐到同一个会话。

四、内存快照与分析，能查泄漏
可以拍堆快照、比较两份快照，而且支持不连浏览器的离线分析，默认分页、按自持大小排序。前端长跑页面泄漏是典型场景：两份快照一比，哪些对象该回收没回收，一目了然。

五、带 7 个现成技能，不只给工具还给方法
包里带 chrome-devtools、chrome-devtools-cli、a11y-debugging、cookie-debugging、debug-optimize-lcp、memory-leak-debugging、troubleshooting 七个技能。装插件（/plugin marketplace add ChromeDevTools/chrome-devtools-mcp）会一并装好。也就是说，Agent 不仅“能用工具”，还知道查 LCP 该先看什么。

使用上手

备环境：Node.js LTS、npm，以及 Chrome 当前稳定版或更新（官方只保证 Chrome 与 Chrome for Testing，其它 Chromium 内核浏览器不保证）。
写配置：把下方 JSON 加到客户端的 MCP 配置里，它会在第一次调用需要浏览器的工具时自动拉起 Chrome。
跑验证提示：让它“检查 https://developers.chrome.com 的性能”，应该会开浏览器并录一段 trace。
按需裁剪：只要基础操作加 --slim；不想上屏加 --headless；不想上传使用统计加 --no-usage-statistics（代码库里设了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 也会自动关）。
要写脚本就用 CLI：npm i chrome-devtools-mcp@latest -g 后用 chrome-devtools navigate_page 1 --url "..."、chrome-devtools take_screenshot 1 --filePath shot.png。

优点与不足

优点：

官方 Chrome 团队维护，能看到真实的 DevTools 数据，不是模拟。
性能、网络、控制台、内存四类诊断都在一个会话里。
附 7 个技能，把“怎么查”也告诉 Agent。
同时提供 MCP 与 CLI，不强制上协议。

不足：

会把浏览器实例内容向 MCP 客户端开放（含可能敏感的数据），这一点官方直接写了警告。
默认收集使用统计，需手动关；在意隐私的人要记得加参数。
只保证 Chrome / Chrome for Testing，用 Edge 或其它 Chromium 可能出奇怪问题。
工具数量不少，小模型容易选错；用 --slim 能缓解。

适合谁

做前端性能优化，想让 Agent 自己跑 trace 并给出建议的开发者。
需要自动排查网络/控制台/内存问题，不想手点 DevTools 的测试与运维。
不适合：只需要抓取页面文本的场景（用普通抓取工具更轻）。

下载与访问

仓库：https://github.com/ChromeDevTools/chrome-devtools-mcp
npm 包：chrome-devtools-mcp
工具参考：https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md
安装插件（Claude Code）：/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

许可证与获取

项目	说明
许可证	以仓库 LICENSE 文件为准（README 未标注具体协议）
传输方式	stdio（`npx -y chrome-devtools-mcp@latest`）
配置示例	`{"mcpServers":{"chrome-devtools":{"command":"npx","args":["-y","chrome-devtools-mcp@latest"]}}}`
运行前提	Node.js LTS + Chrome 稳定版

本文属于「连接器」分类的 AI 资源专栏，更多评测见分类页。