Chrome DevTools MCP Manager
Manage OpenClaw's built-in Chrome browser and chrome-devtools-mcp integration for browser automation via MCP protocol.
Overview
This skill manages two components:
- 1. OpenClaw's Built-in Chrome (
openclaw profile) - The browser instance - chrome-devtools-mcp - The MCP server that exposes browser control tools
Architecture
CODEBLOCK0
Built-in Chrome (openclaw profile)
- - CDP Port: 18800
- Managed by: OpenClaw's
browser tool - Auto-start: Yes, via INLINECODE2
- Profile isolation: Separate user data directory
chrome-devtools-mcp
- - Type: MCP (Model Context Protocol) server
- Transport: stdio (not HTTP)
- Lifecycle: Runs per MCP client session
- Connection: Connects to Chrome via CDP on port 18800
Component Status Check
1. Check Built-in Chrome Status
CODEBLOCK1
Expected running state:
CODEBLOCK2
2. Verify CDP Endpoint
CODEBLOCK3
Expected response:
CODEBLOCK4
3. Check MCP Server Status
Since chrome-devtools-mcp runs as a stdio service per MCP client session, there's no persistent process to check. Instead, verify the MCP configuration is correct.
Managing Built-in Chrome
Start Built-in Chrome
CODEBLOCK5
Stop Built-in Chrome
CODEBLOCK6
Restart Built-in Chrome
CODEBLOCK7
MCP Server Configuration
For mcporter CLI
Configure mcporter to use chrome-devtools-mcp:
CODEBLOCK8
For Claude Desktop / Other MCP Clients
Add to claude_desktop_config.json:
CODEBLOCK9
Environment Variables
CODEBLOCK10
Complete Setup Workflow
First-Time Setup
- 1. Verify built-in Chrome is ready:
CODEBLOCK11
- 2. Test CDP connection:
CODEBLOCK12
- 3. Configure MCP client (mcporter, Claude Desktop, etc.)
- 4. Test MCP connection:
CODEBLOCK13
Daily Usage Pattern
- 1. Ensure Chrome is running (before MCP operations):
CODEBLOCK14
- 2. Use MCP tools via mcporter or other MCP client
- 3. Keep Chrome running for subsequent operations
Available MCP Tools
Once connected via chrome-devtools-mcp, these tools are available:
Page Management
- -
list_pages - List all open tabs/pages - INLINECODE5 - Create new tab
- INLINECODE6 - Switch to specific tab
- INLINECODE7 - Close a tab
- INLINECODE8 - Navigate to URL / back / forward / refresh
Interaction
- -
click - Click element by uid - INLINECODE10 - Fill input field
- INLINECODE11 - Type text
- INLINECODE12 - Press keyboard key
- INLINECODE13 - Select dropdown option
Inspection
- -
take_snapshot - Get accessibility tree snapshot - INLINECODE15 - Capture screenshot
- INLINECODE16 - Execute JavaScript
- INLINECODE17 - Wait for text/element
Browser State
- -
get_browser_state - Get cookies, localStorage, etc. - INLINECODE19 - Set cookies, localStorage, etc.
Integration with Other Skills
Example: deepseek-web-query
This skill uses chrome-devtools-mcp via mcporter:
CODEBLOCK15
Troubleshooting
"CDP not ready"
Symptoms: browser({ action: "status" }) shows INLINECODE21
Solutions:
- 1. Restart Chrome:
browser({ action: "stop", profile: "openclaw" })
browser({ action: "open", profile: "openclaw", url: "about:blank" })
- 2. Check for port conflicts:
CODEBLOCK17
"Cannot connect to Chrome" from MCP
Symptoms: MCP server fails to connect
Solutions:
- 1. Verify CDP endpoint is accessible:
curl http://localhost:18800/json/version
- 2. Check Windows Firewall isn't blocking localhost
- Ensure Chrome was started with remote debugging enabled (built-in profile does this automatically)
MCP server exits immediately
This is normal behavior! The MCP server:
- - Waits for JSON-RPC messages on stdin
- Exits when stdin closes (client disconnects)
- Is designed to be launched per-session by MCP clients
Port 18800 conflicts
Check what's using the port:
CODEBLOCK19
Kill conflicting process:
CODEBLOCK20
Best Practices
- 1. Always check Chrome status first before MCP operations
- Reuse browser sessions - Don't close Chrome between operations
- Use
about:blank for quick startup when you don't need a specific page - Configure MCP client once - The config persists across sessions
- Handle login states in your automation logic (e.g., deepseek-web-query handles DeepSeek login)
Quick Reference
| Task | Command |
|---|
| Check Chrome status | INLINECODE23 |
| Start Chrome |
browser({ action: "open", profile: "openclaw", url: "about:blank" }) |
| Stop Chrome |
browser({ action: "stop", profile: "openclaw" }) |
| Test CDP |
Invoke-WebRequest http://localhost:18800/json/version |
| Add MCP to mcporter |
mcporter server add chrome-devtools --command "npx" --args "..." |
| List MCP pages |
mcporter call chrome-devtools.list_pages |
References
Chrome DevTools MCP 管理器
管理 OpenClaw 内置的 Chrome 浏览器和 chrome-devtools-mcp 集成，通过 MCP 协议实现浏览器自动化。
概述
本技能管理两个组件：
- 1. OpenClaw 内置 Chrome（openclaw 配置文件）——浏览器实例
- chrome-devtools-mcp——暴露浏览器控制工具的 MCP 服务器
架构
┌─────────────────┐ ┌─────────────────────┐ ┌─────────────────┐
│ OpenClaw │────▶│ 内置 Chrome │◀────│ chrome-devtools│
│ (浏览器工具) │ │ (CDP 端口 18800) │ │ -mcp (MCP 服务)│
└─────────────────┘ └─────────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐
│ MCP 客户端 │
│ (mcporter 等) │
└─────────────────┘
内置 Chrome（openclaw 配置文件）
- - CDP 端口：18800
- 管理方式：由 OpenClaw 的 browser 工具管理
- 自动启动：是，通过 browser(action: open)
- 配置文件隔离：独立的用户数据目录
chrome-devtools-mcp
- - 类型：MCP（模型上下文协议）服务器
- 传输方式：stdio（非 HTTP）
- 生命周期：每个 MCP 客户端会话独立运行
- 连接方式：通过 CDP 连接到端口 18800 上的 Chrome
组件状态检查
1. 检查内置 Chrome 状态
javascript
browser({
action: status,
profile: openclaw
})
预期运行状态：
json
{
enabled: true,
profile: openclaw,
running: true,
cdpReady: true,
cdpPort: 18800,
cdpUrl: http://127.0.0.1:18800
}
2. 验证 CDP 端点
powershell
Invoke-WebRequest -Uri http://localhost:18800/json/version -Method GET
预期响应：
json
{
Browser: Chrome/134.0.0.0,
Protocol-Version: 1.3,
User-Agent: Mozilla/5.0...,
V8-Version: ...,
WebKit-Version: ...,
webSocketDebuggerUrl: ws://localhost:18800/devtools/browser/...
}
3. 检查 MCP 服务器状态
由于 chrome-devtools-mcp 作为每个 MCP 客户端会话的 stdio 服务运行，因此没有持久的进程可供检查。相反，请验证 MCP 配置是否正确。
管理内置 Chrome
启动内置 Chrome
javascript
// 打开空白页面以启动 Chrome
browser({
action: open,
profile: openclaw,
url: about:blank
})
// 或导航到特定 URL
browser({
action: open,
profile: openclaw,
url: https://chat.deepseek.com/
})
停止内置 Chrome
javascript
browser({
action: stop,
profile: openclaw
})
重启内置 Chrome
javascript
// 先停止
browser({ action: stop, profile: openclaw })
// 再启动
browser({ action: open, profile: openclaw, url: about:blank })
MCP 服务器配置
用于 mcporter CLI
配置 mcporter 使用 chrome-devtools-mcp：
bash
向 mcporter 添加 MCP 服务器
mcporter server add chrome-devtools \
--command npx \
--args chrome-devtools-mcp@latest,--browserUrl,http://127.0.0.1:18800,--no-usage-statistics
或使用自动连接（如果 Chrome 未运行则会自动启动）
mcporter server add chrome-devtools \
--command npx \
--args chrome-devtools-mcp@latest,--autoConnect,--no-usage-statistics
用于 Claude Desktop / 其他 MCP 客户端
添加到 claudedesktopconfig.json：
json
{
mcpServers: {
chrome-devtools: {
command: npx,
args: [
chrome-devtools-mcp@latest,
--browserUrl, http://127.0.0.1:18800,
--no-usage-statistics
]
}
}
}
环境变量
powershell
禁用使用统计
$env:CHROME
DEVTOOLSMCP
NOUSAGE_STATISTICS = 1
启用调试日志
$env:DEBUG = *
完整设置工作流程
首次设置
- 1. 验证内置 Chrome 已就绪：
javascript
const status = await browser({ action: status, profile: openclaw })
if (!status.cdpReady) {
await browser({ action: open, profile: openclaw, url: about:blank })
}
- 2. 测试 CDP 连接：
powershell
Invoke-WebRequest -Uri http://localhost:18800/json/version
- 3. 配置 MCP 客户端（mcporter、Claude Desktop 等）
- 4. 测试 MCP 连接：
bash
mcporter call chrome-devtools.list_pages
日常使用模式
- 1. 确保 Chrome 正在运行（在 MCP 操作之前）：
javascript
const status = await browser({ action: status, profile: openclaw })
if (!status.cdpReady) {
await browser({ action: open, profile: openclaw, url: about:blank })
await new Promise(r => setTimeout(r, 2000)) // 等待启动
}
- 2. 通过 mcporter 或其他 MCP 客户端使用 MCP 工具
- 3. 保持 Chrome 运行以供后续操作使用
可用的 MCP 工具
通过 chrome-devtools-mcp 连接后，可使用以下工具：
页面管理
- - listpages - 列出所有打开的标签页/页面
- newpage - 创建新标签页
- selectpage - 切换到特定标签页
- closepage - 关闭标签页
- navigate_page - 导航到 URL / 后退 / 前进 / 刷新
交互
- - click - 按 uid 点击元素
- fill - 填充输入字段
- typetext - 输入文本
- presskey - 按下键盘按键
- select_option - 选择下拉选项
检查
- - takesnapshot - 获取无障碍树快照
- takescreenshot - 截取屏幕截图
- evaluatescript - 执行 JavaScript
- waitfor - 等待文本/元素
浏览器状态
- - getbrowserstate - 获取 cookies、localStorage 等
- setbrowserstate - 设置 cookies、localStorage 等
与其他技能的集成
示例：deepseek-web-query
该技能通过 mcporter 使用 chrome-devtools-mcp：
bash
1. 确保 Chrome 正在运行（通过 browser 工具）
2. 使用 mcporter 调用 MCP 工具
mcporter call chrome-devtools.navigate_page type: url url: https://chat.deepseek.com/
mcporter call chrome-devtools.take_snapshot
mcporter call chrome-devtools.type_text text: 查询内容
mcporter call chrome-devtools.press_key key: Enter
mcporter call chrome-devtools.evaluate_script function: () => document.body.innerText
故障排除
CDP 未就绪
症状： browser({ action: status }) 显示 cdpReady: false
解决方案：
- 1. 重启 Chrome：
javascript
browser({ action: stop, profile: openclaw })
browser({ action: open, profile: openclaw, url: about:blank })
- 2. 检查端口冲突：
powershell
Get-NetTCPConnection -LocalPort 18800
MCP 报告无法连接到 Chrome
