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 个工具)

工具名称

功能描述

参数说明

click

点击页面元素

uid: 元素标识; dblClick: 是否双击

drag

拖拽元素到目标位置

from_uid: 源元素; to_uid: 目标元素

fill

在输入框/文本域填入内容,或选择下拉选项

uid: 元素标识; value: 要填入的值

fill_form

批量填充表单元素

elements: 元素和值的数组

handle_dialog

处理浏览器弹出的对话框

action: accept/dismiss; promptText: 对话框输入文本

hover

鼠标悬停在元素上

uid: 元素标识

press_key

按键操作,支持组合键

key: 按键值 (如 "Enter", "Control+A")

upload_file

通过文件上传元素上传本地文件

uid: 文件输入元素; filePath: 本地文件路径

2. 导航自动化 (6 个工具)

工具名称

功能描述

参数说明

list_pages

获取浏览器中所有打开的页面列表

无参数

select_page

切换当前操作的页面上下文

pageIdx: 页面索引; bringToFront: 是否置顶

new_page

打开新页面并加载指定 URL

url: 目标地址; timeout: 超时时间

navigate_page

页面导航(URL/前进/后退/刷新)

type: 导航类型; url: 地址; ignoreCache: 忽略缓存

close_page

关闭指定页面

pageIdx: 页面索引(不能关闭最后一个页面)

wait_for

等待页面出现指定文本

text: 等待文本; timeout: 超时时间

3. 模拟功能 (2 个工具)

工具名称

功能描述

参数说明

emulate

模拟设备和网络环境

cpuThrottlingRate: CPU 降速倍数; networkConditions: 网络条件; geolocation: 地理位置

resize_page

调整浏览器窗口大小

width: 宽度; height: 高度

网络条件可选值: Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G

4. 性能分析 (3 个工具)

工具名称

功能描述

参数说明

performance_start_trace

开始性能追踪录制

reload: 是否自动刷新页面; autoStop: 是否自动停止

performance_stop_trace

停止性能追踪录制

无参数

performance_analyze_insight

分析性能洞察数据

insightSetId: 洞察集 ID; insightName: 洞察名称

性能追踪会报告 Core Web Vitals (CWV) 评分,包括 LCP、FID、CLS 等指标。

5. 网络请求 (2 个工具)

工具名称

功能描述

参数说明

list_network_requests

列出页面所有网络请求

resourceTypes: 资源类型过滤; pageSize: 返回数量

get_network_request

获取指定请求的详细信息

reqid: 请求 ID

资源类型过滤: document, stylesheet, image, media, font, script, xhr, fetch 等

6. 调试工具 (5 个工具)

工具名称

功能描述

参数说明

take_snapshot

获取页面元素快照(基于无障碍树)

verbose: 是否显示完整信息; filePath: 保存路径

take_screenshot

页面或元素截图

fullPage: 整页截图; format: png/jpeg/webp; quality: 质量

evaluate_script

在页面中执行 JavaScript

function: JS 函数; args: 参数

list_console_messages

列出控制台消息

types: 消息类型过滤; pageSize: 数量限制

get_console_message

获取指定控制台消息详情

msgid: 消息 ID

控制台消息类型: 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 还可以有很多其他的使用场景,比如网站健康巡检、竞品情报采集、网站性能分析等等。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐