阅读全文

⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 http://www.iocoder.cn/Fight/Star-241k-rang-AI-caokong-Chrome-MCP/ 「芋道源码」欢迎转载，保留摘要，谢谢！

• 它解决的不是”打开浏览器”，是”打开开发者工具”
• 和 Puppeteer/Playwright MCP 的差别
• 接入：一段 JSON 搞定
• 4 个真实研发场景
• 我们自己怎么用？给 ruoyi-vue-pro 跑前端自动化测试
• 最后说一句

---

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
4. 新的源码解析文章实时收到通知。每周更新一篇左右。
5. 认真的源码交流微信群。

---

它解决的不是”打开浏览器”，是”打开开发者工具”

让 AI 操控浏览器的 MCP 不少，Puppeteer MCP 早就有了，Playwright MCP 也很火——为什么 Chrome 团队还要自己下场再写一个？

差别就一句话：

前两个让 AI 像用户一样点页面；这个让 AI 像前端工程师一样开 DevTools 调页面。

chrome-devtools-mcp 是 Chrome DevTools 团队官方开源的 MCP 服务，把 DevTools 的全套能力（性能面板、Network、Console、Coverage、Lighthouse 审计）以 MCP 工具的形式暴露给 AI 编程助手。之前你需要自己点 F12 干的事，现在可以让 AI 替你干。

仓库：github.com/ChromeDevTools/chrome-devtools-mcp，截至 2026 年 5 月 Star 已经冲到 38k+。

和 Puppeteer/Playwright MCP 的差别

维度	Puppeteer MCP / Playwright MCP	chrome-devtools-mcp
定位	自动化操作（点击、输入、跳转）	调试 + 性能 + 网络分析
能力	模拟用户行为	调用 DevTools 全套面板
代表场景	抓数据、跑 E2E 测试、表单自动化	性能问题诊断、网络瀑布图、运行时调试
维护方	社区	Chrome 团队官方

简单说：写自动化用 Playwright MCP，调线上 / 排错用 chrome-devtools-mcp。两个不冲突，可以同时装。

接入：一段 JSON 搞定

打开 Claude Code / Cursor 的 MCP 配置文件，加一段：

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

重启 IDE 后，AI 就能直接调用 DevTools 工具——前提是你机器上装了 Chrome。

第一次运行时，它会拉起一个独立的 Chrome 实例（不会污染你日常用的那个），AI 在这个实例里操作。

4 个真实研发场景

场景 1：让 AI 帮你跑 Lighthouse 审计

直接对 Claude 说：「帮我跑一下 https://example.com 的 Lighthouse，性能分低于 80 的地方列出来」——AI 自己开浏览器、跑分、读结果、给出优化建议。比你自己手动跑省 5 分钟。

场景 2：让 AI 看 Network 瀑布图找慢请求

「打开线上后台，登录后进入订单列表页，告诉我哪些接口加载超过 1 秒」——AI 通过 DevTools Network 面板抓请求时间，给你排序列表。前端排查慢请求的那一套人工流程，AI 可以闭环跑完。

场景 3：让 AI 调试运行时报错

「页面打开后控制台有红色报错，帮我定位是哪段代码引起的」——AI 直接读 Console、看堆栈、跳转源码、给出修复建议。

场景 4：让 AI 写自动化测试脚本

让 AI 在浏览器里走一遍核心流程（登录 → 下单 → 支付），然后 自动生成对应的 Playwright 测试脚本。比你自己录制 + 改稳定多了。

我们自己怎么用？给 ruoyi-vue-pro 跑前端自动化测试

不是空谈——我们自己的开源项目 ruoyi-vue-pro 和 yudao-cloud 就在用 chrome-devtools-mcp 跑前端自动化测试。

具体几个用法：

• 核心业务流回归——AI 按 SOP 走「登录 → 系统管理 → 用户管理 → 新增 → 编辑 → 删除」一套，自动判断每步的 DOM / Console 是否有异常；
• 多分辨率截图核对——切换 1920 / 1440 / 1280 三档分辨率截图，AI 自动比对前后版本视觉差异；
• 新功能上线前的烟测——开发者 PR 提交时，CI 拉起 chrome-devtools-mcp 跑一轮关键路径；

最大的好处：以前要前端同事 + QA 同事 + 测试用例三方对账，现在 AI 一个人闭环跑完。中小团队没有专职 QA 时尤其香。

最后说一句

Chrome 官方下场做 MCP，不是”再多一个浏览器自动化工具”那么简单——它把”前端工程师的调试技能”打包成了 AI 可调用的工具集。

以前是你帮 AI 看 DevTools，现在是 AI 自己开 DevTools 给你看。

如果你日常做前端 / 全栈开发、需要排查线上页面问题，这个 MCP 值得当成”标配”装上。