给 AI 接上 Chrome DevTools：chrome-devtools-mcp 接入记录
让 AI 改前端样式，改完一刷新，白屏。问它原因，回答是：请把控制台报错截图发给我。
问题出在 AI 看不见浏览器内部。Chrome 官方团队开源的 chrome-devtools-mcp 解决了这一点——它让 AI 编码助手直接操作真实 Chrome。项目目前在 GitHub 上约 5.06 万 star（数据以仓库页面为准）。
MCP 是模型上下文协议，相当于给 AI 插外设。以前插的是文件读写、终端执行，这次插上的是整套 Chrome DevTools。
接入后 AI 能做的 3 件事
- 看运行时报错：console 报错带 source-map 还原的堆栈，AI 顺着堆栈定位到具体出问题的行，不用对着“页面白屏”四个字猜。
- 查网络请求：自动打开 Network 面板，看哪些接口 500、哪些资源加载失败、耗时多少，再结合返回体判断是前端传参问题还是后端逻辑问题。
- 录性能并给结论：调用 DevTools trace 能力，记录页面加载与交互完整时间线，再结合 CrUX 真实用户数据分析瓶颈。
截图、点击、填表单等自动化操作底层走 puppeteer，动作执行后会等页面反应，不是无脑 sleep。
接上之后的调试路径大致是：复现 → 看报错 → 改代码 → 刷新验证，跟人肉调试的路径一致。
接入：两步配置
环境要求：Node LTS + 官方 Chrome（或 Chrome for Testing）。支持 Claude Code、Cursor、Copilot。
在 MCP 客户端配置里加这一段：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
保存重启后，直接让它执行：检查一下 http://localhost:3000 这个页面的性能。能自己打开浏览器并录 trace，说明配置通了。
几个有用的启动开关：
- 只读页面、截图等轻量任务：加
--slim --headless，走精简无头模式 - 不上报使用统计：加
--no-usage-statistics - trace 不上报 CrUX 数据：加
--no-performance-crux
注意事项
- 不要直接连登录着个人账号的 Chrome。MCP 会读取浏览器里的全部内容，AI 也能看到登录态和私人数据。单独开一个 Chrome for Testing 实例更干净。
- 只认官方 Chrome。README 写得很明确：其他 Chromium 内核浏览器能用但不保证，出问题先换回官方 Chrome 再排查。
- 进阶用法是连已打开的浏览器。通过远程调试端口接上，让 AI 操作正在调试的页面，适合联调场景，官方还支持 Android 真机调试。
不写前端的后端程序员也用得上：前端说“接口没问题是你页面的事”时，直接让 AI 打开页面，把真实请求和报错拉出来，问题归属一眼就看清楚，省去扯皮。
AI 生成代码本身已经不是瓶颈，真正卡住它的是拿不到运行反馈。这个工具做的事情，是让 AI 能自己看页面、点页面、测页面，从“盲写”变成“看见再写”。