🌐 Chrome DevTools MCP
Google's official Chrome DevTools MCP server — gives AI agents full control of a live Chrome browser via Puppeteer and the Chrome DevTools Protocol.
Features
- - Input automation — click, drag, fill forms, hover, press keys, upload files, handle dialogs
- Navigation — open/close/switch pages, wait for elements/network idle
- Screenshots & snapshots — capture page state visually and as DOM
- Performance traces — record and analyze Chrome performance traces with insights
- Network inspection — list/inspect network requests and responses
- Console debugging — read console messages with source-mapped stack traces
- Device emulation — emulate mobile devices, resize viewport
- Form automation — fill multiple form fields at once
Requirements
- - Node.js v20.19+ (already available in OpenClaw)
- Chrome/Chromium browser
Quick Start
Install & verify
CODEBLOCK0
Start the MCP server
CODEBLOCK1
OpenClaw MCP Integration
Add to your openclaw.json under MCP servers:
CODEBLOCK2
Or use the setup script:
CODEBLOCK3
Tool Reference
Input Automation (8 tools)
| Tool | Description | Key Params |
|---|
| INLINECODE1 | Click an element | INLINECODE2 (required), INLINECODE3 |
| INLINECODE4 |
Drag element onto another |
from_uid,
to_uid |
|
fill | Type text into input/textarea/select |
uid,
value |
|
fill_form | Fill multiple form elements at once |
elements[] |
|
handle_dialog | Accept/dismiss browser dialogs |
action (accept/dismiss) |
|
hover | Hover over element |
uid |
|
press_key | Press keyboard key |
key |
|
upload_file | Upload file to input |
uid,
paths[] |
Navigation (6 tools)
| Tool | Description | Key Params |
|---|
| INLINECODE21 | Go to URL | INLINECODE22 |
| INLINECODE23 |
Open new tab |
url |
|
close_page | Close current tab | — |
|
list_pages | List all open tabs | — |
|
select_page | Switch to tab |
index |
|
wait_for | Wait for element/network |
event,
uid,
timeout |
Debugging (5 tools)
| Tool | Description |
|---|
| INLINECODE33 | Capture page as image |
| INLINECODE34 |
Get DOM/accessibility snapshot |
|
evaluate_script | Run JavaScript in page |
|
list_console_messages | Get console log entries |
|
get_console_message | Get specific console message |
Performance (3 tools)
| Tool | Description |
|---|
| INLINECODE38 | Begin performance recording |
| INLINECODE39 |
Stop and get trace data |
|
performance_analyze_insight | AI analysis of trace |
Network (2 tools)
| Tool | Description |
|---|
| INLINECODE41 | List all network requests |
| INLINECODE42 |
Get request/response details |
Emulation (2 tools)
| Tool | Description |
|---|
| INLINECODE43 | Emulate device (mobile, tablet) |
| INLINECODE44 |
Change viewport size |
Common Workflows
Test a webpage
- 1.
navigate_page → URL - INLINECODE46 → get element UIDs
- INLINECODE47 /
fill → interact with elements - INLINECODE49 → capture result
Performance audit
- 1.
navigate_page → URL - INLINECODE51
- Interact with page
- INLINECODE52
- INLINECODE53
Form testing
- 1.
navigate_page → form URL - INLINECODE55 → identify form fields
- INLINECODE56 → fill all fields at once
- INLINECODE57 → submit button
- INLINECODE58 → verify result
Privacy Notes
- - Google collects usage statistics by default — disable with INLINECODE59
- Performance tools may send trace URLs to Google CrUX API — disable with INLINECODE60
- Avoid sharing sensitive data in browser sessions
🌐 Chrome DevTools MCP
Google 官方 Chrome DevTools MCP 服务器 — 通过 Puppeteer 和 Chrome DevTools 协议，让 AI 代理完全控制一个实时的 Chrome 浏览器。
特性
- - 输入自动化 — 点击、拖拽、填写表单、悬停、按键、上传文件、处理对话框
- 导航 — 打开/关闭/切换页面、等待元素/网络空闲
- 截图与快照 — 以视觉和 DOM 形式捕获页面状态
- 性能追踪 — 记录并分析 Chrome 性能追踪，提供洞察
- 网络检查 — 列出/检查网络请求和响应
- 控制台调试 — 读取控制台消息，附带源码映射的堆栈跟踪
- 设备模拟 — 模拟移动设备、调整视口大小
- 表单自动化 — 一次性填写多个表单字段
系统要求
- - Node.js v20.19+（OpenClaw 中已提供）
- Chrome/Chromium 浏览器
快速开始
安装与验证
bash
npx -y chrome-devtools-mcp@latest --help
启动 MCP 服务器
bash
标准模式（自动启动 Chrome）
npx -y chrome-devtools-mcp@latest
无头模式（适用于服务器）
npx -y chrome-devtools-mcp@latest --headless
连接到已有的 Chrome（需以 --remote-debugging-port=9222 启动）
npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222
禁用遥测
npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux
OpenClaw MCP 集成
在 openclaw.json 的 MCP 服务器部分添加：
json
{
mcp: {
servers: {
chrome-devtools: {
command: npx,
args: [-y, chrome-devtools-mcp@latest, --headless, --no-usage-statistics]
}
}
}
}
或使用设置脚本：
bash
python3 {baseDir}/scripts/setupchromemcp.py setup
python3 {baseDir}/scripts/setupchromemcp.py status
python3 {baseDir}/scripts/setupchromemcp.py test
工具参考
输入自动化（8 个工具）
| 工具 | 描述 | 关键参数 |
|---|
| click | 点击元素 | uid（必填）、dblClick |
| drag |
将元素拖拽到另一个元素上 | from
uid、touid |
| fill | 在输入框/文本域/选择框中输入文本 | uid、value |
| fill_form | 一次性填写多个表单元素 | elements[] |
| handle_dialog | 接受/关闭浏览器对话框 | action（accept/dismiss） |
| hover | 悬停在元素上 | uid |
| press_key | 按下键盘按键 | key |
| upload_file | 上传文件到输入框 | uid、paths[] |
导航（6 个工具）
| 工具 | 描述 | 关键参数 |
|---|
| navigatepage | 跳转到 URL | url |
| newpage |
打开新标签页 | url |
| close_page | 关闭当前标签页 | — |
| list_pages | 列出所有打开的标签页 | — |
| select_page | 切换到指定标签页 | index |
| wait_for | 等待元素/网络 | event、uid、timeout |
调试（5 个工具）
| 工具 | 描述 |
|---|
| takescreenshot | 将页面捕获为图片 |
| takesnapshot |
获取 DOM/无障碍快照 |
| evaluate_script | 在页面中运行 JavaScript |
| list
consolemessages | 获取控制台日志条目 |
| get
consolemessage | 获取特定控制台消息 |
性能（3 个工具）
| 工具 | 描述 |
|---|
| performancestarttrace | 开始性能记录 |
| performancestoptrace |
停止并获取追踪数据 |
| performance
analyzeinsight | 对追踪进行 AI 分析 |
网络（2 个工具）
| 工具 | 描述 |
|---|
| listnetworkrequests | 列出所有网络请求 |
| getnetworkrequest |
获取请求/响应详情 |
模拟（2 个工具）
| 工具 | 描述 |
|---|
| emulate | 模拟设备（手机、平板） |
| resize_page |
更改视口大小 |
常见工作流
测试网页
- 1. navigatepage → URL
- takesnapshot → 获取元素 UID
- click/fill → 与元素交互
- take_screenshot → 捕获结果
性能审计
- 1. navigatepage → URL
- performancestarttrace
- 与页面交互
- performancestoptrace
- performanceanalyze_insight
表单测试
- 1. navigatepage → 表单 URL
- takesnapshot → 识别表单字段
- fillform → 一次性填写所有字段
- click → 提交按钮
- takescreenshot → 验证结果
隐私说明
- - Google 默认收集使用统计数据 — 使用 --no-usage-statistics 禁用
- 性能工具可能将追踪 URL 发送到 Google CrUX API — 使用 --no-performance-crux 禁用
- 避免在浏览器会话中共享敏感数据
