让Claude Code接管你的浏览器，彻底解放双手

原文链接：https://mp.weixin.qq.com/s/kXKqzcF-M62zrF3vkT0Ckg

我在Claude Code 新手教程（四）：MCP 连接外部工具介绍了MCP工具，这里再给大家分享一个浏览器自动化的MCP，它就是Chrome DevTools MCP。

我在Claude Code 新手教程（四）：MCP 连接外部工具介绍了MCP工具，这里再给大家分享一个浏览器自动化的MCP，它就是Chrome DevTools MCP。

Chrome DevTools MCP 是由 Chrome 官方团队打造，内置 26 款强力工具，一键赋能 AI，实现全能浏览器操作：

网页自动化（点击/输入/滚动）

网络请求分析（API抓包/性能优化）

JS代码注入/多标签管理等

github网站：https://github.com/ChromeDevTools/chrome-devtools-mcp

一、Chrome 浏览器配置

1.升级chrome浏览器到146版本

点击chrome浏览器，右侧的三个小点

点击帮助，关于google chrome，点击，自动升级。升级后确认是146版本。或者直接在地址栏输入

1

`chrome://settings/help`

3.Chrome 里开启远程调试

地址栏里输入

1

`chrome://inspect/#remote-debugging`

找到 Remote debugging 设置，勾选Remote debugging。

二、Claude Code配置Chrome DevTools MCP。

1.打开CC Switch,关于CC Switch使用可以看我这篇文章Claude Code 新手教程（四）：MCP 连接外部工具点击MCP管理

2.点击添加MCP

3.点击配置向导

4.填写参数，点击应用配置

配置项

填写内容

类型
stdio
MCP 标题
chrome-devtools
（自定义）

命令
npx
参数

第一行：@chrome-devtools-mcp/server（可选）第二行：-y（自动确认）

5.点击添加

6.添加成功

如果你熟悉命令行安装，打开命令行（Windows在文件夹地址栏输入cmd，Mac用Terminal），输入：

1

`claude mcp add chrome-devtools npx chrome-devtools-mcp@latest`

命令解读：claude mcp add：告诉CC我们要添加一个MCP服务

chrome-devtools：给这个服务起的名字（可自定义）

npx chrome-devtools-mcp@latest：运行最新版的chrome-devtools-mcp包等待安装完成，你会看到绿色的Success提示。

三、使用案例

案例 ：一键自动化搜索 + 批量提取数据

打开 B 站，搜索「Claude Code 教程」，自动抓取前 10 条视频的核心数据。在Claude code中输入

1

`使用Chrome devtools mcp server 打开bilibili.com，在搜索框输入，"Claude Code"，获取前 10 个视频，提取它们的标题、播放量、时长，最后整理成清晰表格。`

chrome正在受自动测试软件控制

生成数据

当然，上面这些仅仅只是冰山一角。还有更多、更丰富的实用玩法，等你来解锁和探索。

好了，今天就分享到这里，下一期将继续分享Claude Code新手教程，有问题可以和我在评论区讨论～

本文转载自微信公众号，如有侵权请联系删除。