让 AI 编程助手控制浏览器 - Chrome 调试新玩法

把你的 AI 编程助手变成浏览器调试大师，它能自动截图、分析性能、抓网络请求、甚至看 console 报错。开发者写代码时再也不用手动切到 DevTools 了。

什么场景下需要用？

场景 1：让 AI 帮你调试前端 bug

你在 Claude Code 里跟 AI 说"帮我看看为什么这个页面加载这么慢"，AI 就能自动打开 Chrome DevTools、录一段性能 Trace、分析出瓶颈在哪。不用你手动切到 DevTools 去找。

场景 2：自动化网页测试和截图

你要检查 20 个页面的 UI 是否正常，或者要截一批页面截图做文档。让 AI 控制 Chrome 自动导航、截图、比对。比 Puppeteer 写脚本简单太多。

场景 3：网络请求分析和排错

后端接口返回了奇怪的数据，前端报了个诡异的错。让 AI 直接拦截 Chrome 的网络请求、看请求体和响应体、对比期望值。比手动在 Network 面板里翻快多了。

怎么用？

安装

用 npx 一行搞定（需要 Node.js）：

# 在 Claude Code 中配置
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

快速开始

配置好之后，你只需要在聊天里说：

"打开 https://my-app.com，截图首页"
"分析这个页面的加载性能，给我优化建议"
"看看控制台有没有报错"

AI 会自动调用 Chrome DevTools 去执行这些操作，然后把结果和分析一起返回给你。

进阶用法

在 Cursor、Codex、Copilot 等工具中也能用，配置方式类似：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

支持 50+ 个工具，包括：页面导航、表单填写、性能分析、网络拦截、内存快照、设备模拟、无障碍检测等。

注意事项

• • 需要安装 Node.js LTS 版本
• • 需要 Chrome 浏览器（普通版或 Chrome for Testing 都行）
• • 首次连接会启动一个新 Chrome 实例
• • 默认无头模式运行，看不到界面但不影响功能

总结

如果你日常用 Claude Code、Cursor、Codex 等 AI 编程助手写前端代码，这个工具能让你直接在聊天框里调试浏览器，省去手动翻 DevTools 的时间。装一个试试，写前端效率直接翻倍。