🌐 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#

bash

npx -y chrome-devtools-mcp@latest --help

Start the MCP server#

bash

# Standard (launches Chrome automatically)
npx -y chrome-devtools-mcp@latest

# Headless mode (for servers)
npx -y chrome-devtools-mcp@latest --headless

# Connect to existing Chrome (must be started with --remote-debugging-port=9222)
npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

# Disable telemetry
npx -y chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

OpenClaw MCP Integration#

Add to your openclaw.json under MCP servers:

json

{
  "mcp": {
    "servers": {
      "chrome-devtools": {
        "command": "npx",
        "args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics"]
      }
    }
  }
}

Or use the setup script:

bash

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)#

ToolDescriptionKey ParamsclickClick an elementuid (required), dblClick``dragDrag element onto anotherfrom_uid, to_uid``fillType text into input/textarea/selectuid, value``fill_formFill multiple form elements at onceelements[]``handle_dialogAccept/dismiss browser dialogsaction (accept/dismiss)hoverHover over elementuid``press_keyPress keyboard keykey``upload_fileUpload file to inputuid, paths[]

Navigation (6 tools)#

ToolDescriptionKey Paramsnavigate_pageGo to URLurl``new_pageOpen new taburl``close_pageClose current tab—list_pagesList all open tabs—select_pageSwitch to tabindex``wait_forWait for element/networkevent, uid, timeout

Debugging (5 tools)#

ToolDescriptiontake_screenshotCapture page as imagetake_snapshotGet DOM/accessibility snapshotevaluate_scriptRun JavaScript in pagelist_console_messagesGet console log entriesget_console_messageGet specific console message

Performance (3 tools)#

ToolDescriptionperformance_start_traceBegin performance recordingperformance_stop_traceStop and get trace dataperformance_analyze_insightAI analysis of trace

Network (2 tools)#

ToolDescriptionlist_network_requestsList all network requestsget_network_requestGet request/response details

Emulation (2 tools)#

ToolDescriptionemulateEmulate device (mobile, tablet)resize_pageChange 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 result

Performance audit#

1. navigate_page → URL
2. performance_start_trace
3. Interact with page
4. performance_stop_trace
5. performance_analyze_insight

Form 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 result

Privacy Notes#

• Google collects usage statistics by default — disable with --no-usage-statistics
• Performance tools may send trace URLs to Google CrUX API — disable with --no-performance-crux
• Avoid sharing sensitive data in browser sessions