文章目录Chrome DevTools MCP让 AI 编程助手直接操控浏览器1、 它能做什么2、 怎么用3、 工具数量4、 连接已有浏览器5、 配置项6、 适合谁用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-mcplatest]}}}支持的客户端很多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-mcpchrome-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-port9222配置里写--browser-urlhttp://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 编程助手从「只能写代码」变成「能写代码、能跑代码、能看结果」。