让AI真正”看见”浏览器！Chrome DevTools MCP让编程助手拥有透视眼

你有没有过这种感觉——让 AI 写了个前端页面，想验证效果，结果只能在脑子里”想象”它长什么样？或者 AI 给你报了个 bug，你对着一堆 console.log 干瞪眼？

Chrome DevTools MCP 就是来解决这个问题的。

这是 Google 官方 ChromeDevTools 团队出品的 MCP Server，通过 Chrome DevTools Protocol（CDP）把浏览器的”眼睛”直接交给 AI 编程助手。你可以让 AI 真正”看到”并操控你的 Chrome 浏览器——不是猜测，是真真切切地操作。

它能做什么？

自动化+截图：让 AI 自动帮你填表单、点按钮、截图对比效果。做 UI 验收不用再手动刷 N 遍。

Console 监控：AI 能读取页面的 console 消息、JS 报错、source-map 还原的堆栈信息。调试效率直接翻倍。

网络请求分析：抓 4xx/5xx，追踪某个 API 请求的耗时，不用再开 Network 面板。

性能 Trace：录一段页面加载的 performance trace，AI 自动给你分析 LCP、CLS、INP 等 Core Web Vitals 问题出在哪。

模拟节流：3G 慢网、CPU 降速、地理位置模拟——AI 做体验测试时也能模拟真实网络环境。

怎么用？

两步搞定：

1. 启动 Chrome 加上调试端口：chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
2. 在 Claude Code / Cursor / Copilot 的 MCP 配置里加一个 npx chrome-devtools-mcp 条目

然后你就可以在对话里让 AI 直接操控浏览器了——”帮我截个图看看这个页面”、”跑一遍这个表单提交流程”、”分析一下为什么这个页面加载慢”。

为什么值得关注？

49,375 Stars，Google 官方维护，支持 Claude、Cursor、Copilot、Antigravity 等主流 AI 编程工具。这个量级的工具已经不是”玩具”了，是真正的生产力升级。

以前 AI 写前端是”蒙眼编程”——它不知道你页面长什么样、不知道控制台报什么错。现在有了这个 Skill，AI 终于有了”浏览器之眼”。

GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp

GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp