Chrome DevTools MCP参考指南
Chrome DevTools MCP (Model Context Protocol) Tool 提供了一套完整的浏览器自动化和调试能力,可用于网页测试、自动化操作、性能分析等场景。该工具集包含 26 个功能工具,分为 6 大类别。在Claude Code中也可以调用Chrome DevTools MCP来完成网页内容抓取和分析工作,或者进行一些表单填写和提交。
Chrome DevTools MCP (Model Context Protocol) Tool 提供了一套完整的浏览器自动化和调试能力,可用于网页测试、自动化操作、性能分析等场景。该工具集包含 26 个功能工具,分为 6 大类别。
在Claude Code中也可以调用Chrome DevTools MCP来完成网页内容抓取和分析工作,或者进行一些表单填写和提交。在Claude Code中安装方式如下:
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
一、功能分类详解
1. 输入自动化 (8 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
点击页面元素 |
|
|
|
拖拽元素到目标位置 |
|
|
|
在输入框/文本域填入内容,或选择下拉选项 |
|
|
|
批量填充表单元素 |
|
|
|
处理浏览器弹出的对话框 |
|
|
|
鼠标悬停在元素上 |
|
|
|
按键操作,支持组合键 |
|
|
|
通过文件上传元素上传本地文件 |
|
2. 导航自动化 (6 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
获取浏览器中所有打开的页面列表 |
无参数 |
|
|
切换当前操作的页面上下文 |
|
|
|
打开新页面并加载指定 URL |
|
|
|
页面导航(URL/前进/后退/刷新) |
|
|
|
关闭指定页面 |
|
|
|
等待页面出现指定文本 |
|
3. 模拟功能 (2 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
模拟设备和网络环境 |
|
|
|
调整浏览器窗口大小 |
|
网络条件可选值: Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G
4. 性能分析 (3 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
开始性能追踪录制 |
|
|
|
停止性能追踪录制 |
无参数 |
|
|
分析性能洞察数据 |
|
性能追踪会报告 Core Web Vitals (CWV) 评分,包括 LCP、FID、CLS 等指标。
5. 网络请求 (2 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
列出页面所有网络请求 |
|
|
|
获取指定请求的详细信息 |
|
资源类型过滤: document, stylesheet, image, media, font, script, xhr, fetch 等
6. 调试工具 (5 个工具)
|
工具名称 |
功能描述 |
参数说明 |
|
|
获取页面元素快照(基于无障碍树) |
|
|
|
页面或元素截图 |
|
|
|
在页面中执行 JavaScript |
|
|
|
列出控制台消息 |
|
|
|
获取指定控制台消息详情 |
|
控制台消息类型: log, debug, info, error, warn, table, trace 等
二、使用场景示例
在Claude Code输入一些与网页访问和分析相关的指令后,会调用Chrome DevTools MCP进行处理。
示例场景 1:网页数据抓取和分析
例如抓取微信公众号文章的访问量统计数据。
Claude指令:
用Chrome浏览器打开这个公众号后台链接:xxxxxx,然后通过chrome devtools mcp完成:获取第1、2、3页每篇文章的详细数据,并保存到Excel表格中
通过Chrome打开微信公众号后会需要手工输入一下账号密码,然后Claude Code就会自动工作,最终生成一个如下格式的excel文件:

示例场景 2:产品功能调研
例如希望调研某个web版产品的功能。
Claude指令:
登录到http://XXXX/网站,用户名admin,密码XXXX,帮我整理一份系统功能清单出来
Chrome DevTools会自动访问该链接网站,并输入账号密码进行登录,然后依次访问菜单栏的功能模块,最后生成一份功能清单。

Chrome DevTools MCP (Model Context Protocol) Tool 还可以有很多其他的使用场景,比如网站健康巡检、竞品情报采集、网站性能分析等等。
更多推荐



所有评论(0)