玩转ClaudeCode：通过Chrome DevTools MCP实现页面抓取和调试

本文介绍了如何利用ClaudeCode的Chrome-DevTools-MCP工具实现浏览器自动化操作。文章展示了三个实用案例：1)自动抓取CSDN个人主页数据；2)诊断和修复前端项目BUG；3)自动学习在线文档并修改项目代码。通过这些案例，演示了ChromeDevToolsMCP在网页自动化、数据提取、问题诊断和文档学习等方面的强大功能。

Damon小智

400人浏览 · 2025-10-05 03:45:22

Damon小智 · 2025-10-05 03:45:22 发布

环境准备

在开始之前，请确保你已经安装了以下环境：

Node.js 18+
Claude Code CLI
Google Chrome 浏览器

没有安装 Claude Code 的同学参考我的上一篇文章《玩转ClaudeCode：ClaudeCode安装教程（Windows+Linux+MacOS）》完成安装，通过专属链接注册，可以额外领取100美金的免费使用额度。

安装教程参考：玩转ClaudeCode：ClaudeCode安装教程（Windows+Linux+MacOS）_claude code安装-CSDN博客文章浏览阅读2.5w次，点赞67次，收藏86次。全网最火爆的Claude Code系列教程来了，跟着小智学AI，做新时代的Vibe Coder，几篇博客带你玩转Claude Code，本文介绍了Claude Code在Windows环境、Linux环境、MacOS环境下的安装和使用，还没有体验过Calude Code的你，快来扫盲吧，有任何问题都可以在评论区留言，期待你的互动！_claude code安装https://blog.csdn.net/weixin_41793160/article/details/149313024

安装好上述基本环境之后，我们来安装 Chrome DevTools MCP：

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

安装完成后，chrome-devtools 会在 /mcp 输出的列表内展示。

Chrome DevTools MCP (Model Context Protocol) 是 Claude Code 内置的一个强大工具，它可以让 AI 直接操作 Chrome 浏览器，就像一个真实的测试工程师一样：

功能	实践作用
自动化浏览	打开网页、点击按钮、填写表单
智能提取	读取页面内容、提取数据、分析结构
调试辅助	查看控制台错误、网络请求、性能分析
自动化测试	验证功能、截图对比、回归测试

最佳实践

案例一：获取 CSDN 粉丝量

首先，让我们让 Claude Code 帮我们访问 CSDN 个人主页并提取粉丝数据：

可以看到，个人信息页面需要登录。这个时候我们可以有两个选择，一个是直接告诉他个人主页的网址，一个是登录之后让他自己查找。这里，我选择第二种，登录完之后，我让 Claude Code 继续执行，结果如下：

可以看到，我的 CSDN 博客的个人主页的各项数据都被 Claude Code 爬取到了。

案例二：辅助修复前端BUG

在我的上一个项目中，基于 Rokid JSAR 开发的 3D 积木搭建器遇到了"只显示菜单，没有 3D 场景"的问题。让我们看看如何用 Claude Code 调用 Chrome DevTools MCP 来诊断和修复。

除了菜单，没有显示出其他东西，你可以使用 chrome-devtools 自查 http://localhost:8080/

Claude Code 通过使用 Chrome DevTools MCP 查看 8080 端口的页面，问题很快被查了出来：

问题定位后，Claude Code 通过使用 Chrome DevTools MCP 对功能生效进行了测试：

修复后，Claude Code 自动重启了前端服务，展示效果如下：

可以看到，问题已经被完美修复。

案例三：自动学习在线文档

正如我最近在学习的 Rokid JSAR 开发，由于 AI 本身不具备这块的最新知识，所以我们需要参考最新的文档去手动开发，这是非常费时费力的。有了 Chrome DevTools MCP 之后，这份先学习后实践的工作，我们一样可以交给 Claude Code 来执行。

我给 Claude Code 下达任务，要求他先去学习，再去对项目做修改：

请使用 Chrome DevTools 来查看并学习 https://custom.rokid.com/prod/rokid_web/c88be4bcde4c42c0b8b53409e1fa1701/pc/cn/d2702078c3d649b4b9a34ffb25881a6a.html?documentId=5c18342855394a91a17ada6d8080e3a7 的官方JSAR文档对项目进行修改

Claude Code 随即开启了一个新的 Chrome 窗口，开始访问我们的目标网站 ——— Rokid JSAR 的官方文档。访问完主页后，Claude Code 通过 Chrome DevTools MCP 自动按照菜单的同级先后顺序、父子级的垂直顺序访问各个文档页面。