Chrome Devtools Mcp

Chrome DevTools MCP — Google's official browser automation and testing server. Control Chrome via Puppeteer through MCP protocol: click, fill forms, navigate...

Security Scan

The skill's files and runtime instructions are coherent with a Chrome DevTools MCP client: it requires Node and Chrome, uses npx to run the official package, and the small setup script only checks environment state and prints configuration — but running npx @latest pulls remote code at runtime which is a supply-chain risk to be aware of.

Purpose & Capability

The name/description (Chrome DevTools MCP) aligns with the declared requirements and instructions: Node.js and Chrome/Chromium are the expected dependencies, and the SKILL.md and setup script all center on starting/configuring the MCP server. No unrelated credentials, binaries, or system paths are requested.

Instruction Scope

SKILL.md describes only browser automation operations and how to start the MCP server. The included setup script checks for node/npx/Chrome, pre-caches the npm package, prints an openclaw.json snippet, checks ~/.openclaw/openclaw.json for configuration, and can start a headless MCP server for a quick test. It does not attempt to read unrelated files or request secrets.

Install Mechanism

There is no formal install spec; instructions rely on npx to fetch and run chrome-devtools-mcp@latest from the npm registry. Using npx @latest is a normal way to run CLI tools but means remote code is fetched at runtime (unpinned). This is a supply-chain risk: if the npm package is compromised or a different package is published under the same name, arbitrary code could run. The package homepage points to an official ChromeDevTools repo, which mitigates concern but does not eliminate the live-download risk.

Credentials

The skill requests no environment variables, no credentials, and only references a local config path (~/.openclaw/openclaw.json) for verifying/printing MCP config. The setup script's accesses are proportional to its stated purpose (setup/status/test).

Persistence & Privilege

The skill is not always-enabled, does not request elevated privileges, and does not modify other skills or system-wide settings. The setup script prints configuration for openclaw.json but does not write to system files by itself. The test command launches an MCP server process (expected behavior).

Assessment

This skill appears to do what it says: start and test a Chrome DevTools MCP server via the chrome-devtools-mcp npm package. Before installing or enabling it, consider: 1) npx -y chrome-devtools-mcp@latest fetches and runs code from the npm registry at runtime — pin a specific version (not @latest) if you want reproducibility and lower supply-chain risk. 2) The MCP server can control a browser and access any page you visit; avoid exposing sensitive pages or credentials to automated sessions. 3) The SKILL.md documents telemetry (Google usage statistics / CrUX) and provides flags to disable them — use those flags if you want to avoid sending traces. 4) If you need higher assurance, review the npm package and its GitHub repo (homepage) and run the setup/test commands in an isolated environment first.

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

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

Start the MCP server

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

{
  "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 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