👉这是一个或许对你有用的社群
🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：
《项目实战（视频）》：从书中学，往事上“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然
👉这是一个或许对你有用的开源项目
国产Star破10w的开源项目，前端包括管理后台、微信小程序，后端支持单体、微服务架构
RBAC权限、数据权限、SaaS多租户、商城、支付、工作流、大屏报表、ERP、CRM、AI大模型、IoT物联网等功能：
多模块：https://gitee.com/zhijiantianya/ruoyi-vue-pro
微服务：https://gitee.com/zhijiantianya/yudao-cloud
视频教程：https://doc.iocoder.cn
【国内首批】支持 JDK17/21+SpringBoot3、JDK8/11+Spring Boot2双版本
它解决的不是"打开浏览器"，是"打开开发者工具"
和 Puppeteer/Playwright MCP 的差别
接入：一段 JSON 搞定
4 个真实研发场景
我们自己怎么用？给 ruoyi-vue-pro 跑前端自动化测试
最后说一句
它解决的不是"打开浏览器"，是"打开开发者工具"
让 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+。
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/
和 Puppeteer/Playwright MCP 的差别
维度 | Puppeteer MCP / Playwright MCP | chrome-devtools-mcp |
|---|---|---|
| 定位 | 自动化操作（点击、输入、跳转） | 调试 + 性能 + 网络分析 |
| 能力 | 模拟用户行为 | 调用 DevTools 全套面板 |
| 代表场景 | 抓数据、跑 E2E 测试、表单自动化 | 性能问题诊断、网络瀑布图、运行时调试 |
| 维护方 | 社区 | Chrome 团队官方 |
简单说：写自动化用 Playwright MCP，调线上 / 排错用 chrome-devtools-mcp。两个不冲突，可以同时装。
基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/
接入：一段 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 值得当成"标配"装上。
欢迎加入我的知识星球，全面提升技术能力。
👉 加入方式，“长按”或“扫描”下方二维码噢：
星球的内容包括：项目实战、面试招聘、源码解析、学习路线。
文章有帮助的话，在看，转发吧。 谢谢支持哟 (*^__^*）
