Chrome Devtools Mcp 1.0.0
by @sieyer
Chrome DevTools MCP — Google's official browser automation and testing server. Control Chrome via Puppeteer through MCP protocol: click, fill forms, navigate...
clawhub install chrome-devtools-mcp-1-0-0📖 About This Skill
name: chrome-devtools-mcp description: "Chrome DevTools MCP — Google's official browser automation and testing server. Control Chrome via Puppeteer through MCP protocol: click, fill forms, navigate, screenshot, performance traces, network inspection, console debugging. Use for browser testing, web automation, performance analysis, UI testing, form filling, and visual regression." homepage: https://github.com/ChromeDevTools/chrome-devtools-mcp license: Apache-2.0 compatibility: Node.js v20.19+, Chrome/Chromium metadata: {"openclaw": {"emoji": "🌐", "requires": {"env": []}, "homepage": "https://github.com/ChromeDevTools/chrome-devtools-mcp"}}
🌐 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
Requirements
Quick Start
Install & verify
npx -y chrome-devtools-mcp@latest --help
Start the MCP server
# Standard (launches Chrome automatically)
npx -y chrome-devtools-mcp@latestHeadless mode (for servers)
npx -y chrome-devtools-mcp@latest --headlessConnect to existing Chrome (must be started with --remote-debugging-port=9222)
npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222Disable telemetry
npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux
OpenClaw MCP Integration
Add to your openclaw.json under MCP servers:
{
"mcp": {
"servers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics"]
}
}
}
}
Or use the setup script:
python3 {baseDir}/scripts/setup_chrome_mcp.py setup
python3 {baseDir}/scripts/setup_chrome_mcp.py status
python3 {baseDir}/scripts/setup_chrome_mcp.py test
Tool Reference
Input Automation (8 tools)
| Tool | Description | Key Params |
|------|-------------|------------|
| click | Click an element | uid (required), dblClick |
| drag | 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 |
|------|-------------|------------|
| navigate_page | Go to URL | url |
| new_page | 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 |
|------|-------------|
| take_screenshot | Capture page as image |
| take_snapshot | 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 |
|------|-------------|
| performance_start_trace | Begin performance recording |
| performance_stop_trace | Stop and get trace data |
| performance_analyze_insight | AI analysis of trace |
Network (2 tools)
| Tool | Description |
|------|-------------|
| list_network_requests | List all network requests |
| get_network_request | Get request/response details |
Emulation (2 tools)
| Tool | Description |
|------|-------------|
| emulate | Emulate device (mobile, tablet) |
| resize_page | Change viewport size |
Common Workflows
Test a webpage
1.navigate_page → URL
2. take_snapshot → get element UIDs
3. click/fill → interact with elements
4. take_screenshot → capture resultPerformance audit
1.navigate_page → URL
2. performance_start_trace
3. Interact with page
4. performance_stop_trace
5. performance_analyze_insightForm testing
1.navigate_page → form URL
2. take_snapshot → identify form fields
3. fill_form → fill all fields at once
4. click → submit button
5. take_screenshot → verify resultPrivacy Notes
--no-usage-statistics--no-performance-crux💡 Examples
Install & verify
npx -y chrome-devtools-mcp@latest --help
Start the MCP server
# Standard (launches Chrome automatically)
npx -y chrome-devtools-mcp@latestHeadless mode (for servers)
npx -y chrome-devtools-mcp@latest --headlessConnect to existing Chrome (must be started with --remote-debugging-port=9222)
npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222Disable telemetry
npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux
OpenClaw MCP Integration
Add to your openclaw.json under MCP servers:
{
"mcp": {
"servers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics"]
}
}
}
}
Or use the setup script:
python3 {baseDir}/scripts/setup_chrome_mcp.py setup
python3 {baseDir}/scripts/setup_chrome_mcp.py status
python3 {baseDir}/scripts/setup_chrome_mcp.py test