大家好，我是袋鼠帝。
国庆那几天，刷抖音，偶然刷到了一个看起来挺🐂🍺的AI工具。
视频里，一个哥们只是发布了一个任务，Agent就自动打开了小红书网站，登录账号，上传图片，写入标题和笔记内容，最后自己点击发布。
整个过程，没有任何人工干预，一气呵成。
这个工具叫：Chrome DevTools MCP。
是谷歌官方在9月23号发布的
https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-cn
一个月不到，就已经在Github狂揽了10.5K Star。
https://github.com/ChromeDevTools/chrome-devtools-mcp
Chrome浏览器，就是Google自己开发的。
那他们自家出品的Chrome自动化MCP工具，想必应该是最懂Chrome，最适配Chrome的那个。
这让我产生了强烈的好奇。
PS：这篇文章包含Chrome DevTools MCP介绍、官方经典用法、接入「claude code+glm-4.6」后的实测效果展示，和一些踩坑经验分享。
在这之前，我用过不少浏览器自动化的MCP，比如Playwright MCP、Browser MCP、Puppeteer MCP等等。
它们确实能在一定程度上解放双手，但总感觉差点意思。
谷歌这次发布的Chrome DevTools MCP，内置26个工具（是同类型中工具最多的），涵盖了浏览器自动化的方方面面。
有7种输入自动化工具，7种导航自动化工具，3种模拟工具，3种性能工具，2种网络工具，4种调试工具。
我们可以拿它来做什么呢？官方给了一些经典用法
实时测试bug修复
用Agent修复bug后，使用Chrome DevTools MCP自动验证解决方案是否按预期运行。
Prompt示例：
Verify in the browser that your change works as expected.
分析网络和控制台错误
让Agent能够分析网络请求以发现CORS（跨域）问题，或检查控制台日志以了解某项功能未按预期运行的原因。
比如直接读取浏览器的控制台信息，分析所有的网络请求，对页面进行截图，甚至录制完整的性能轨迹，并给出专业的分析洞察。
这个对于小白来说非常重要，很多朋友老是说AI写的功能需要反反复复修改，甚至都不成功。很多时候都是没有给出关键且正确的报错信息。
这个用法可以帮助小白朋友无感的找到很多关键报错。
Prompt示例（根据实际情况调整）：
A few images on localhost:8080 are not loading. What's happening?
模拟用户行为
导航、填写表单和点击按钮，重现bug并测试复杂的用户流程，同时检查运行时环境。
可以像人一样，在网页上进行点击，拖拽，填充表单，悬停，打开新页面，关闭旧页面，后退，前进，在多个标签页之间自由切换，甚至上传文件等等。
这个是自动干活的关键～
Prompt示例：
Why does submitting the form fail after entering an email address?
调试实时样式和布局问题
让Agent连接到实时网页，检查DOM和CSS，并根据浏览器中的实时数据获取具体建议，以解决复杂的布局问题，例如元素溢出。
Prompt示例：
The page on localhost:8080 looks strange and off. Check what's happening there.
自动执行性能审核
告诉Agent性能问题，分析结果，并调查特定的性能问题，例如 LCP 数值过高。
Prompt示例：
Localhost:8080 is loading slowly. Make it load faster.
这意味着，Coding Agent不仅仅能写代码，现在还增加了一个角色：测试。
它现在开发完成后，可以自己打开浏览器，看到代码运行的真实效果，分析网络请求，检查控制台报错，像一个资深的测试人员一样，去调试和诊断网页。
另外，可以更丝滑的操纵浏览器帮我们干活儿～
我越看越兴奋，于是，我立马就把它接入了我目前最高性价比的本地Agent组合：Claude Code + GLM-4.6。
不清楚Claude Code怎么接入GLM-4.6的朋友，可以去看我上一篇文章。
《这款国产编程模型在海外杀疯了！接入Claude Code是真香～》
好了，话不多说，我们正式进入实操。
Agent自动测试也是相当耗token的，有时候甚至比写代码耗的还多，跑完之后，我很庆幸搞了智谱的Coding套餐，不然钱包估计着不住。
接入Claude Code
接入过程也非常简单，有两种方式
第一种方式三步搞定：
第一步，确保你的电脑里装了Claude Code，Chrome浏览器也是最新版。
第二步，然后在终端执行下面这行命令。
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
这行命令的意思是，在Claude Code里，添加一个名叫chrome-devtools的MCP服务，这个服务通过npx命令来启动最新版的chrome-devtools-mcp包。
第三步，验证安装。
添加成功后，启动Claude Code
我习惯用YOLO模式（跳过所有权限确认）启动
claude --dangerously-skip-permissions
输入/mcp命令，如果能在列表里看到绿色的chrome-devtools，那就说明成功啦
第二种方式：也可以在claude code的.claude.json文件中添加
如果你是Windows系统
路径一般是C:\Users\你的用户名\.claude.json。
如果你是Mac系统，路径一般是~/.claude.json。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
}
}
添加完毕保存，重启claude code即可。
如果使用Trae的话，配置起来就就更简单了
实测效果
/> 自动化测试电商下单流程
我把我之前用Kimi「OK Computer」做的一个虚拟商城项目丢给了它。
PS：在项目根目录，启动Cluade Code即可
让它帮我测试网站功能
Prompt：请你用浏览器打开页面进行一次全面的前后端联动测试
这个任务，完美地展现了Chrome DevTools MCP的闭环能力。
它接到任务后，先制定计划，然后一步一步执行：
它会先新开一个浏览器，然后打开项目网站，进行注册、登录、加购、下单流程，整个过程还是挺丝滑的。
一开始由于用户没有余额，所以我让它操作数据库，给自己充值了1000¥余额，然后顺利支付下单成功～
因为「OK Computer」生成的项目质量比较好，整个流程都是跑通的，，，没有发现bug。
整体来说，还是挺省心，但是那种alter的弹框它不会处理（比如弹框提示用户已存在等），需要我手动点击确定。
还有就是测试过程较慢（大约花了17分钟），感觉是写项目代码时间的两倍。
接下来我想获取需要登录的那种网页的数据。
比如获取X博主的推文，获取公众号后台数据，自动发布小红书等等。
说实话，这块踩坑了，花了不少时间：
一开始无论我怎么搞，它都会新开一个浏览器，每次都要重新登录，而且好多平台（比如X，知乎等）是登录不上的，估计检测到了自动化工具。
后面通过AI搜索，找到了解决方案：
就不能让它（Agent）自己新开一个浏览器，而是要指定浏览器打开，否则每次需要你重新登录，好多平台会有安全检测，会登录不了。
首先，需要在之前的mcp配置里面增加一项参数
“–browserUrl”,”http://127.0.0.1:9222″
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl",
"http://127.0.0.1:9222"
]
}
}
}
这个参数是：告诉MCP不要自己启动浏览器，而是连接到我们手动启动的那个Chrome实例
而手动启动的浏览器（不是双击chrome打开的那个浏览器），需要通过一行指令来启动
PS：在执行这行指令之前，得把所有chrome浏览器退出
手动启动的浏览器 Mac版：
open -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir="随便一个空目录"
手动启动的浏览器 Windows版：
start chrome --remote-debugging-port=9222 --user-data-dir="随便一个空目录"
或者
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="随便一个空目录"
执行之后就会打开一个新的chrome浏览器
我们可以在这个新的浏览器登录X，登录公众号后台，登录小红书等等。
后续mcp就会直接打开这个浏览器进行操作，而不会新开一个没有任何登录态的浏览器。
/> 获取X博主的推文
找了常看的一些X博主，来测试获取网页数据的能力。
Prompt：Sam Altman（Id：sama）,向阳乔木（Id：vista8）,歸藏(guizang.ai)（Id：op7418）,Elon Musk（Id：elonmusk）
打开浏览器，进入X，接下来的所有操作都通过chrome devtools mcp工具来完成：帮我获取以上X博主最新的3条推文信息（博主名称、推文内容、推文链接、发布时间、回复数、转发数、点赞数、浏览数、推文类型、数据获取时间）注意需要滚动加载推文，以免遗漏，推文内容如果是英文，在推文内容中加入译文（也就是双语）。最后保存到Excel中。
还是先规划了任务，然后开始执行
跑了大概5分钟，这个任务跑的还不错，该获取的数据，都获取到了，每个博主也都是3条推文。
就是在时间的准确度上，有时候不太准，可能会抓到一些较旧的数据。
/> 获取公众号后台数据
接下来想试试它能不能分页获取我的公众号后台的文章数据
公众号后台链接：xxxxx
浏览器打开上面这个链接（是我的公众号后台，发表记录页），接下来的所有操作都通过chrome devtools mcp工具来完成：获取第1、2、3页的每篇文章的详细数据，并保存到Excel表格中。
整个执行过程大约5分钟，也还不错，准确的把30篇文章的阅读量，点赞、在看、转发，打赏收益，发布时间，等等数据都准确获取到了。
一顿操作下来，我感觉Chrome DevTools MCP还是不错的。
非常善于做一些模拟用户的浏览器自动化操作
但是如果想要准确获取大批量的数据，还是比较困难，而且速度较慢。
可以做一些少量数据的抓取和分析，但最好不要把它当爬虫工具来用，。
另外我觉得，这套Claude Code+GLM-4.6+Chrome DevTools MCP，对于下面几类人群来说，非常有必要试试。
第一，开发者。无论是性能优化，还是UI bug调试，它都能帮你把大量重复性的，繁琐的测试工作自动化，让你能更专注于核心的逻辑实现。
第二，QA测试工程师。你可以用自然语言，编写各种复杂的端到端测试用例，让AI帮你自动执行和验证，极大地提升测试效率。
第三，独立开发者和创业者。它能让你一个人，就拥有一整个开发+测试团队的战斗力，快速地把想法变成高质量的产品。
Google这次，算是把Coding Agent，从一个全栈开发工程师，扩展成了一个小开发团队了。
这下本地Agent不仅能帮我们写代码，还能自动测试，找bug，做优化了～
能看到这里的都是凤毛麟角的存在！
如果觉得不错，随手点个赞、在看、转发三连吧~
如果想第一时间收到推送，也可以给我个星标⭐
谢谢你耐心看完我的文章~
文章来自于微信公众号 “袋鼠帝AI客栈”，作者 “袋鼠帝AI客栈”