Chrome DevTools MCP 实测：让 Agent 自己跑性能追踪

编程 Agent 写完前端代码，一般没法自己打开浏览器看效果：控制台报没报错、哪个请求 404、LCP 有多慢，它都看不到。Chrome DevTools 团队官方出的 chrome-devtools-mcp 把 DevTools 做成了一组 MCP 工具，Agent 可以开页面、看网络请求、录性能追踪、跑 Lighthouse。我们 10 月 21 日用 Python MCP 客户端把这些工具调了一遍，又接进 OpenCode 确认能连上。

它是什么

一句话：让 Agent 通过 MCP 控制、检查一个真实的 Chrome 浏览器，底层用的是 Puppeteer 和 DevTools 前端代码，不想走 MCP 也可以用它自带的命令行。

解决什么问题

Agent 改前端最大的问题是改完看不到结果，只能猜，再让人去截图。接上这个 MCP 之后，Agent 能自己复现问题：打开页面、点按钮、读控制台和请求详情、录一段性能追踪、按 Insight 找 LCP 慢在哪一段。适合的人：前端开发者、做性能和无障碍检查的人，以及想给自己的 Agent 产品加「浏览器子代理」的团队。

怎么用

// 任意 MCP 客户端的配置（OpenCode 写在 opencode.json 的 "mcp" 里）
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest",
               "--headless", "--isolated",
               "--no-usage-statistics", "--no-performance-crux"]
    }
  }
}

OpenCode 的写法是 "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", …]，command 必须是数组。配好后在 Agent 里试一句官方 README 给的提示词：「Check the performance of https://developers.chrome.com」。

实测：32 个工具，一个必填参数

环境：2026-10-21，Debian 13，Google Chrome 稳定版，Node.js 22.23.3，chrome-devtools-mcp 1.11.0，Python mcp 2.3.0（stdio 客户端）。测试对象是 developer.chrome.com 首页。

• 开页面：new_page 用 1.7 秒，返回页面列表，新页面编号 2。
• 坑：pageId 必填。不传的话，list_console_messages、list_network_requests、performance_start_trace 都返回 Input validation error … pageId: expected number。加上 "pageId": 2 就好了。用小模型的 Agent 很容易漏传这个参数。
• 控制台：2 条 issue，一条是 8 张懒加载图片没写尺寸，一条是有个表单字段没有 id 或 name。网络请求：共 67 个，分页返回，每条带状态码。
• 快照：take_snapshot 返回无障碍树，每个元素有 uid，之后 click/fill 用这个 uid 定位元素。
• 性能追踪：带 reload 自动停止，7.1 秒。LCP 452 ms，拆开是 TTFB 224 ms、加载延迟 135 ms、加载 4 ms、渲染延迟 90 ms，CLS 0.21，同时列出 LCPBreakdown、CLSCulprits 等可以继续追问的 Insight。
• Lighthouse：8.4 秒，桌面模式。无障碍 93、最佳实践 100、SEO 92，还有一项「Agentic Browsing」47 分，51 项通过、5 项失败（对比度不够、链接没有可读名称等）。这次跑出来的 CLS 是 0.081，和上面性能追踪的 0.21 不一样，两次加载情况不同，结果有波动，要多跑几次再下结论。
• 接 OpenCode：把上面的配置写进 opencode.json，opencode mcp list 显示「chrome-devtools connected」。
• 未实测：让大模型自己决定调用哪些工具（需要接一个够强的模型），--slim 模式，连接已经打开的 Chrome，Android 调试。

它把 Chrome 里的所有内容都交给了 MCP 客户端。官方的提醒是：不要在这个浏览器里放你不想让 Agent 看到的东西。

适合谁，不适合谁

还没写过 MCP 的可以先看40 行写个 MCP 服务器。

最后

把上面那段配置加进你的 Agent，四个参数一个都别删，然后让它对你自己的网站跑一次 lighthouse_audit。