文章目录前言Playwright MCPtoken 黑洞本洞Chrome-devtools MCP根正苗红的官方选手安装两种方式任君挑选基础使用丝滑得像德芙进阶玩法直接连已有浏览器核心优势官方出品就是省 token注意事项天下没有免费的午餐总结钱包和效率我全都要P.S. 无意间发现了一个巨牛的人工智能教程非常通俗易懂对AI感兴趣的朋友强烈推荐去看看传送门https://blog.csdn.net/HHX_01前言前阵子我不是折腾了一下 Playwright MCP 嘛结果你们猜怎么着Claude Code 的账单页面打开那一刻我差点哭了。老板问我是不是在偷偷训练 GPT-5。我说不我在做自动化测试。老板沉默了我也沉默了整个会议室只剩下空调的声音。所以这周我痛定思痛决定换个工具试试。毕竟钱包的命也是命。Playwright MCPtoken 黑洞本洞上次用 Playwright MCP 做 E2E 自动化理论上它能按预期操作但实际上每一步都要截图、描述、再截图、再描述。AI 看网页截图看得比我看相亲对象照片还仔细。问题是看得越仔细token 烧得越快。那感觉就像你请了个金牌导游结果他每走三步就要停下来给你讲解一下路边的石头。石头是讲明白了你的钱包也讲没了。于是我决定找 Chrome 的亲儿子——Chrome-devtools MCP 来体验体验。同样是自动化看看谁更懂事。Chrome-devtools MCP根正苗红的官方选手2025 年 9 月Chrome 官方推出了 Chrome-devtools MCP。这玩意儿能让 AI 直接操作 Chrome 浏览器还能调试网页。什么叫官方出品就是不用额外装浏览器插件不用下载一个 Chromium 全家桶不用看一堆兼容性报错。开箱即用像 iPhone 的充电器一样省心。而且它能干的事儿还挺多分析网络请求、记录性能轨迹、检查控制台日志、模拟用户行为、导航填表点按钮——这不就是 E2E 测试需要的全部吗最离谱的是它还能自动调样式。后端同学听到这里眼睛都亮了终于不用被前端说你写的 CSS 像抽象画了。AI 直接帮你把抽象画改成写实派。安装两种方式任君挑选以 Claude Code 为例安装有两种姿势。第一种是命令行一键安装适合懒人# claude 命令安装 claude mcp add chrome-devtools npx chrome-devtools-mcplatest第二种是手动配置适合喜欢 DIY 的朋友把 JSON 贴到 MCP 配置文件里{ mcpServers: { chrome-devtools: { command: npx, args: [chrome-devtools-mcplatest] } } }配置好之后输入/mcp查看看到 chrome-devtools 显示 connected 并且有 29 个 tools就说明安装成功了。29 个工具比我的瑞士军刀还多。基础使用丝滑得像德芙直接告诉 AI 用 chrome-devtools mcp 打开浏览器操作比如访问 Google、搜索、点击结果使用 chrome-devtools mcp 打开浏览器 1. 访问 https://google.com 2. 在搜索框中输入 chrome-devtools mcp并点击搜索 3. 在搜索结果页面点击第一个搜索结果和 Playwright 一样它也是单开一个浏览器实例操作。但不一样的是它不会每一步都截图给你看。它就像个成熟的老司机知道什么时候该汇报什么时候该默默干活。整个过程顺畅得不像话。搜索、点击、跳转一气呵成。我一度怀疑它是不是偷偷练过。进阶玩法直接连已有浏览器做自动化测试最烦的是什么是登录态。每次新开浏览器都要重新登录就像每次回家都要重新装修一样离谱。Chrome-devtools MCP 从 Chrome 144 版本开始支持直接访问已打开的浏览器实例。只要两步第一步在 Chrome 地址栏输入chrome://inspect/#remote-debugging开启远程调试勾选Allow remote debugging for this browser instance。第二步在 MCP 配置里加上--autoConnect或--auto-connect{ command: npx, args: [ chrome-devtools-mcplatest, --autoConnect ] }原理很简单Chrome 开启远程调试后会在本地启动一个 WebSocket 服务器端口 9222专门监听调试请求。所有打开的标签页、扩展程序都会通过 CDP 暴露可操作接口。MCP 加上--autoConnect后会自动发现已运行的 Chrome 实例。测试一下登录态场景比如访问阿里云控制台创建集群使用 chrome-devtools mcp 打开浏览器 1. 访问 https://cs.console.aliyun.com/ 2. 点击创建集群 3. 在专有网络上点击使用已有第一次连接会弹窗问要允许远程调试吗“我果断点了允许。反正我的浏览器里也没什么秘密除了收藏夹里的如何假装懂前端和CSS 从入门到放弃”。然后 AI 就在已有登录态的浏览器里丝滑操作点击创建集群、选择专有网络、使用已有 VPC——全程没有让我重新登录。这体验就像回家直接开门而不是站在门口等快递重新送钥匙。核心优势官方出品就是省 tokenChrome-devtools MCP 是 Chrome 官方生态天生比其他 MCP 产品更占优势。不用额外装浏览器插件除了自动化还能做性能分析、样式调整、Mock——一专多能比我的简历还丰富。但最打动我的还是 token 消耗。同样的操作Playwright MCP 的 token 消耗是 Chrome-devtools MCP 的好几倍。具体几倍这么说吧Playwright 像在吃自助餐Chrome-devtools 像在吃轻食沙拉。Playwright 那次的账单我现在想起来心还在滴血。用 Chrome-devtools MCP 之后账单页面终于从房价降级到了奶茶价。省下来的 token 够我请全组喝一周奶茶。而且因为它是直接操作 Chrome 开发者工具协议不需要频繁截图给 AI 看上下文传输量小得多。AI 不用像看连环画一样一帧一帧分析网页效率自然上去了。注意事项天下没有免费的午餐当然这工具也不是完美无缺。首先Chrome 要一直开着 9222 端口的调试服务而且会暴露所有标签页的调试端点。如果你的电脑配置不太行会越用越卡。我的 MacBook Air 在测试过程中风扇转得像直升机我一度以为它要起飞了。同事问我是不是在挖矿我说不我在做自动化测试。同事沉默了我也沉默了——这对话怎么这么熟悉另外如果测试用例内容过长LLM 上下文消耗也会越快。不过这一点可以用切片的形式来解决就像吃自助餐一次拿太多会撑分几次拿就行。还有就是安全性问题。开启远程调试意味着外部应用可以请求完全控制 Chrome 会话包括访问保存的数据、Cookie 和网站数据。所以只应在受信任的应用中使用别随便连来路不明的 MCP 服务器。总结钱包和效率我全都要总的来说Chrome-devtools MCP 是个值得尝试的自动化测试工具。官方生态、token 友好、支持已有登录态、还能调样式——对于被 Playwright MCP 账单伤过心的同学来说它就像个温柔体贴的现任。小伙伴们还有别的工具或者成熟的 E2E Skill/Harness 推荐吗可以打在评论区一起讨论。毕竟我的钱包已经经不起第二次了让我也见识见识你们的宝藏工具。最后友情提示用这工具之前先确认你的电脑风扇扛得住。不然测试没做完电脑先申请工伤了。P.S. 无意间发现了一个巨牛的人工智能教程非常通俗易懂对AI感兴趣的朋友强烈推荐去看看传送门https://blog.csdn.net/HHX_01