夜雨聆风你好，这里是郭震AI测评！
这两天我在看 GitHub 上最新一批 AI 编 程项目，`ChromeDevTools/chrome-devtools-mcp` 很值得单独写。
它不是又一个“帮你写代码”的 Agent，而是把真实 Chrome 浏览器和 DevTools 能力接给 AI 编程工具。
项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp
截至 2026-06-10，我在 GitHub 页面看到它已经约 4.32 万星；npm 包最新版本是 `1.2.0`，发布时间是 2026-06-08。
1 这个项目到底解决什么问题
很多前端问题，AI 只看代码其实很难判断。
比如按钮点了没反应，是事件没绑上、接口挂了、Console 报错，还是样式盖住了？只靠猜，很容易来回改错地方。
`chrome-devtools-mcp` 的价值就在这里：它让 AI 编程助手能控制和检查一个真实 Chrome。
从 README 看，它能做截图、页面快照、Console 检查、Network 请求分析、性能 trace，还能用 Puppeteer 做更可靠的浏览器自动化。
这就把 AI 从“读代码回答问题”，往“看页面现场排障”推了一步。
对前端、全栈、Web 自动化、性能优化来说，这个方向比单纯堆 prompt 更实际。
2 怎么安装和接入
官方给的最小 MCP 配置很直接：命令是 `npx`，参数是 `-y chrome-devtools-mcp@latest`。
也就是说，你不用先 clone 仓库；只要 MCP 客户端支持本地命令，就可以从 npm 拉起。
我这次先做了最安全的核验：在本机运行 `npx -y chrome-devtools-mcp@latest --help`。
命令能正常返回参数列表，说明 npm 包当前可拉起，基础 CLI 入口没有问题。
如果你只是想让 AI 做基础浏览器任务，可以先用 `--slim --headless`，只暴露导航、执行脚本和截图这类轻量能力。
等基础链路跑通，再打开 Network、Performance、Lighthouse 这些更深的调试工具。
官方还提供了实验性 CLI：可以在终端里直接 `chrome-devtools navigate_page`、`take_screenshot`、`lighthouse_audit`。
这对我来说很关键，因为它不是只服务某一个 Agent，而是把 DevTools 能力做成更通用的工具接口。
3 我建议你怎么实测
我不建议一上来就把它接到包含账号 Cookie、后台系统、客户数据的浏览器里。
第一轮实测，用公开网页就够了：让 AI 打开一个页面，截图、读取 Console、列出 Network 请求，再解释一个真实的小问题。
原因也写在 README 里：这个 MCP 会把浏览器实例里的内容暴露给 MCP 客户端，客户端也可能检查、调试甚至修改浏览器数据。
所以它越强，越应该先用隔离浏览器、测试账号、公开页面来跑。
如果你做前端性能，我会把第二轮测试放在 trace 和 Lighthouse 上。
让 AI 不只是说“页面慢”，而是看 LCP、请求瀑布、Console、性能记录，再给出可执行的修改建议。
需要注意一个开源细节：GitHub API 对 license 识别显示为 `NOASSERTION`，但仓库根目录 `LICENSE` 和 npm 页面都指向 Apache-2.0。
商用或团队分发前，建议还是按仓库 LICENSE 原文再过一遍。
最后总结一下
一句话判断：`chrome-devtools-mcp` 值得 AI 编程重度用户立刻收藏，并找一个公开页面实测一轮。
最适合：前端、全栈、Web 自动化、性能排障，以及经常让 AI 改页面的人。
全文约 1500 字，13 图，如果你觉得这篇文章对你有帮助，也欢迎给我一个三连击：点赞、转发和在看；如果可以，再帮我点一个⭐️。谢谢你看到这里，我们下篇再见。
