Chrome DevTools MCP：让 AI 编程助手直接操控浏览器

Chrome DevTools MCP 在 GitHub 上拿到了 4.4 万 Star。

谷歌开源了这个工具，核心功能就一个：让 AI 编程助手直接控制和检查 Chrome 浏览器。

它基于 MCP 协议，把 Chrome DevTools 的完整能力开放给 Claude、Cursor、Copilot 这类 AI 编程工具。自动化操作、深度调试、性能分析，全都覆盖。

1、 它能做什么

简单说，就是给你的 AI 编程助手装上浏览器。

以前 AI 助手写完代码，你得自己打开浏览器去测试。现在它能自己打开页面、点击按钮、填表单、截图检查结果。

具体能力分几大块：

性能分析：录制性能追踪，提取可操作的优化建议。Lighthouse 审计也能跑。

调试：查看网络请求、控制台消息、截图，还能做堆快照分析内存问题。

自动化：基于 puppeteer，支持点击、拖拽、填表、文件上传、键盘操作，自动等待页面响应。

2、 怎么用

配置很简单，在 MCP 客户端里加一段 JSON：

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

支持的客户端很多：Claude Code、Cursor、VS Code Copilot、Gemini CLI、JetBrains、Windsurf、Warp，主流的基本都覆盖了。

Claude Code 用户还能装成插件，额外获得 Skills 指导：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

装好之后，直接对 AI 说「检查一下这个网站的性能」，它就会自动打开浏览器、录制追踪、给出报告。

3、 工具数量

总共 45 个工具，按类别分：

输入自动化 10 个（点击、拖拽、填表、上传等），导航 6 个（新开页面、切换标签、关闭页面等），模拟 2 个（设备模拟、窗口缩放），性能 3 个，网络 2 个，调试 8 个（截图、控制台、堆快照等），内存分析 9 个，扩展管理 5 个，还有第三方工具和 WebMCP 各 2 个。

如果只需要基础功能，加个 --slim 参数就行，只暴露导航、脚本执行、截图这 3 个工具。

4、 连接已有浏览器

默认情况下，MCP 服务器会启动一个新的 Chrome 实例。但有些场景需要连接已经在运行的浏览器：

手动登录过的网站，需要保持登录状态。

沙箱环境里跑 AI，但浏览器在宿主机上。

这时候有两种方式。

自动连接（Chrome 144+）：在 Chrome 里打开 chrome://inspect/#remote-debugging 启用远程调试，然后配置里加 --autoConnect。

手动连接：启动 Chrome 时加 --remote-debugging-port=9222，配置里写 --browser-url=http://127.0.0.1:9222。

5、 配置项

选项很多，挑几个常用的：

--headless：无头模式，不显示浏览器界面。

--isolated：用临时用户数据目录，关闭后自动清理。

--viewport：设置窗口大小，比如 1280x720。

--slim：精简模式，只保留 3 个基础工具。

--channel：指定 Chrome 版本通道，可选 canary、dev、beta、stable。

--no-usage-statistics：关闭使用数据收集。

所有配置都通过 args 数组传入，多个参数可以组合使用。

6、 适合谁用

用 AI 编程工具写前端代码、需要频繁在浏览器里验证结果的开发者。

做自动化测试、想让 AI 帮忙跑 E2E 测试的团队。

需要分析网页性能、想用 AI 辅助做 Lighthouse 审计的人。

搭 Agent 系统、需要让 Agent 具备浏览器操作能力的场景。

这个工具把 Chrome DevTools 的能力完整地暴露给了 AI，让 AI 编程助手从「只能写代码」变成「能写代码、能跑代码、能看结果」。

系统、需要让 Agent 具备浏览器操作能力的场景。

这个工具把 Chrome DevTools 的能力完整地暴露给了 AI，让 AI 编程助手从「只能写代码」变成「能写代码、能跑代码、能看结果」。