【MCP】无敌了，chrome-devtools-mcp杀死比赛！

慕雪的小助手正在绞尽脑汁···

慕雪小助手的总结

DeepSeek & LongCat

标题党了，不过chrome-devtools-mcp是真神啊，有些要用OpenAPI才能实现的东西，现在全都可以mcp了。

1. 这是啥玩意？

如果你没有听说过MCP，还是先去看看本站之前的教程博客吧：点我

看完回来了，你现在应该知道MCP是啥玩意了。简单一句话概括，MCP服务端可以给客户端暴露一系列工具集。同时MCP标准化了这个服务端的接入方式，让我们的各种Agent工具都可以快速用上。

如果你了解过前端开发，或者某些时候折腾过浏览器，那你一定知道，主流的浏览器都可以用F12打开一个开发者面板，在开发者面板里面，我们能看到网络请求信息、网页的源代码、控制台的打印等等信息……这些信息除了可以为前端开发Debug提供帮助，也对前端网页自动化测试有很大的作用。

AI时代来了之后，先后出现了brower-use、playwright这类工具，实现了部分网页的Agent自动化测试能力。这些工具的操作，本质上就是封装了一层自动化框架（如selenium）的能力，然后再把这部分能力暴露给AI，让AI理解网页内容，并进行自动化操作。

从前很多需要我们去调用平台提供的OpenAPI才能获取到的数据，都免了！这些工具，能让AI直接打开我们本地的Chrome，直接以用户的身份登录平台，装作一个普通用户，对网页进行操作，获取各类信息！也就是说，只要你能在打开网页后看到的信息，AI都能通过工具获取到，不再受平台OpenAPI的限制。

当然，OpenAPI和网页自动化是完完全全没有关系的东西，很多对数据实时性和获取准确性的场景，依旧需要我们借助平台提供的OpenAPI来实现能力的。不能认为有浏览器自动化工具了，这些网页平台就没必要提供OpenAPI了。OpenAPI提供的好，肯定更多人愿意使用OpenAPI的。

现在大的来了，谷歌直接开源了一个工具，这个工具能直接操作Chrome的DevTools，也就是直接操作开发者面板。这相当于从chrome原生，给AI加上了操作浏览器的工具集！不再是第三方提供了，谷歌自己下场，杀死比赛！

仓库：https://github.com/ChromeDevTools/chrome-devtools-mcp/

仓库使用了 Apache-2.0 license 开源协议，这个协议是允许免费商用的，只不过有些限制（具体的限制请自行查阅协议说明或咨询AI）。这样也直接放开了各大公司在自己的软件中集成chrome-devtools-mcp的权限。

2. 安装chrome-devtools-mcp

2.1. 安装

chrome-devtools-mcp是node编写的，需要有node环境，可以通过npx运行，也可以npm安装：

1	npm install -g chrome-devtools-mcp@latest

2.2. 配置MCP

官方文档中给出了如下的MCP配置方式：

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

其中npx -y命令，本质上和我们先npm install -g chrome-devtools-mcp@latest再手动执行命令的效果是一样的。只不过我们添加了@latest标签，npx -y可以让我们每次运行的时候，都一定能运行到最新的版本（有更新的时候会自动拉取，没有更新使用本地缓存）。

咳咳咳，扯远了！这不重要。我们现在要做的是，把上面的内容写入某个目录的.mcp.json文件里面，然后在这个目录下运行claude code！

# 写入文件
echo {"mcpServers": {"chrome-devtools": {"command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"]}}} > .mcp.json
# 运行claude code
claude

如果配置正确，claude code会提示你当前已经链接上了chrome的mcp，齐活啦！

3. 使用一下

本文就不提什么自动化测试那么深入生产场景的玩意了。我们直接说日常可以怎么用这玩意。

举个非常简单的例子，有些博客平台、文档平台，并没有提供AI总结或者AI搜索的能力，我们就可以让Agent使用chrome的mcp工具来自己实现这个能力！

最小的尝试，就是让AI总结一篇博客。

注意，这个能力本身是可以通过fetch或者curl工具来简单实现的。但是对于某些要登录的平台，fetch工具或curl工具就有点小儿科了，因为涉及到了鉴权。chrome的mcp工具用的就是我们自己的chrome浏览器，本身就已经登录了，不再会有任何鉴权问题。就算是有人机验证或cloudflare墙的网站，我们也可以先人工过了验证，再让Agent来操作。

Prompt：阅读 https://blog.musnow.top/posts/7079918377/ 总结内容

可以看到，GLM-4.6成功调用了devtools，打开了我的博客，总结了这篇文章的内容