斩获10K Star！谷歌最新Chrome MCP接入Claude Code又香了～

大家好，我是袋鼠帝。

国庆那几天，刷抖音，偶然刷到了一个看起来挺🐂🍺的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客栈”