Chrome 官方突然开源了一个工具,让 AI 直接帮你调试网页,程序员的时间又省了

写代码的人都经历过这种痛苦：让 AI 帮你修一个网页的 Bug，AI 给了一段代码，你粘贴进去，运行，还是出错。把报错信息复制给 AI，AI 再改，你再粘贴……这样来回折腾五六轮，才能解决一个问题。

为什么这么慢？因为 AI 是”盲”的——它只能读你粘贴过来的文字，看不到网页实际长什么样，看不到浏览器控制台里的报错，也不知道网络请求有没有成功。就像一个蒙着眼睛的修理工，只能靠你的描述来猜问题在哪。

Google Chrome 团队为此专门开发了 chrome-devtools-mcp，并于 2025 年正式开源。这个工具做了一件事：给 AI 装上一双眼睛，让它直接看到浏览器里发生的一切。

chrome-devtools-mcp 是 Chrome 官方出品的 AI 浏览器调试桥接工具。

它的原理可以打个比方：想象 Chrome 的开发者工具（F12 打开的那个界面）是一个功能强大的驾驶舱，里面有网络监控、性能分析、代码调试、DOM 检查……以前只有程序员自己能用。chrome-devtools-mcp 做的事，就是在 AI 助手和这个驾驶舱之间架了一座桥，让 AI 也能直接使用这些工具。

接入之后，你的 AI 编程助手（Claude、Cursor、GitHub Copilot、Gemini 都支持）可以：

• 自动打开网页，截图查看效果，而不是靠猜
• 读取浏览器控制台的报错信息，直接看到真实错误
• 分析网络请求，找出失败的 API 调用
• 测量页面加载速度，找到拖慢网页的元凶
• 模拟用户操作：填表单、点按钮、导航页面

用一句话总结：AI 终于不用蒙眼写代码了。

如何使用

第一步：安装

最简单的方式是一条命令：

npx chrome-devtools-mcp@latest

或者在 VS Code 里，按 Ctrl+Shift+P，搜索”Chat: Install Plugin”，粘贴 GitHub 地址安装。

第二步：在 AI 工具里配置

在你的 AI 工具配置文件（mcp.json）里加入：

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

Claude、Cursor、GitHub Copilot、Gemini CLI 均有对应的图形界面配置入口，不需要手动编辑文件。

第三步：直接对话调试

配置完成后，你就可以用自然语言调试了：

• “检查一下我的网站 LCP 分数是多少，怎么优化？”
• “帮我找出这个页面上所有失败的网络请求”
• “测试一下这个登录表单的提交功能是否正常”
• “截一张当前页面的截图，告诉我布局有没有问题”

连接到现有浏览器会话（高级用法）

如果你已经登录了某个网站，想让 AI 在不重新登录的情况下调试，可以开启”自动连接”模式（需要 Chrome 144 或更高版本），Chrome 会弹出授权确认框，点击允许即可。

软硬件要求

⚠️ 注意：该工具会让 AI 看到浏览器中的内容，不要在处理敏感账号或私人数据时使用。

使用场景

1. 前端开发加速写完代码，让 AI 直接在浏览器里验证效果，自动截图对比，发现问题立刻修复，告别来回复制粘贴的噩梦。

2. 性能优化直接说”帮我分析这个页面为什么加载慢”，AI 会实际录制性能轨迹，找出具体是哪张图片、哪段脚本拖慢了速度，给出有数据支撑的优化建议，而不是泛泛而谈。

3. 调试 API 问题遇到接口报错，不用自己打开 Network 面板慢慢翻——让 AI 帮你过滤所有非 200 状态码的请求，直接看到哪里出了问题。

4. 自动化测试让 AI 模拟真实用户流程——注册、登录、点击功能、提交表单——自动跑一遍测试，比手动测试效率高得多。

5. 设计还原检查把设计稿和实际网页让 AI 对比，指出哪里的样式和设计稿不符，省去肉眼逐像素核对的麻烦。

项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp