← Back to Skills Marketplace
Chrome Devtools Mcp
by
aiwithabidi
· GitHub ↗
· v1.0.0
2467
Downloads
3
Stars
29
Active Installs
1
Versions
Install in OpenClaw
/install 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...
README (SKILL.md)
🌐 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
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
navigate_page→ URLtake_snapshot→ get element UIDsclick/fill→ interact with elementstake_screenshot→ capture result
Performance audit
navigate_page→ URLperformance_start_trace- Interact with page
performance_stop_traceperformance_analyze_insight
Form testing
navigate_page→ form URLtake_snapshot→ identify form fieldsfill_form→ fill all fields at onceclick→ submit buttontake_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
Usage Guidance
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.
Capability Analysis
Type: OpenClaw Skill
Name: chrome-devtools-mcp
Version: 1.0.0
The skill bundle is classified as suspicious primarily due to the use of `subprocess.run(shell=True)` in the `run` helper function within `scripts/setup_chrome_mcp.py`. While the commands passed to it are currently hardcoded and appear safe, this pattern introduces a shell injection vulnerability if any part of the command were to be derived from untrusted input in the future. Additionally, the `SKILL.md` documents powerful capabilities like `evaluate_script` which allows arbitrary JavaScript execution in the browser, a high-risk feature, though it is explicitly stated and central to the skill's purpose of browser automation.
Capability Assessment
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).
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install chrome-devtools-mcp - After installation, invoke the skill by name or use
/chrome-devtools-mcp - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of Chrome DevTools MCP.
- Control a live Chrome browser with Puppeteer and the Chrome DevTools Protocol.
- Automate clicks, form filling, navigation, and handle browser dialogs.
- Capture screenshots, DOM snapshots, and run JavaScript in the page.
- Record and analyze performance traces, inspect network requests, and review console messages.
- Emulate mobile devices and resize the viewport for testing.
- Designed for web automation, browser testing, performance analysis, and visual regression use cases.
Metadata
Frequently Asked Questions
What is 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... It is an AI Agent Skill for Claude Code / OpenClaw, with 2467 downloads so far.
How do I install Chrome Devtools Mcp?
Run "/install chrome-devtools-mcp" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Chrome Devtools Mcp free?
Yes, Chrome Devtools Mcp is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Chrome Devtools Mcp support?
Chrome Devtools Mcp is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Chrome Devtools Mcp?
It is built and maintained by aiwithabidi (@aiwithabidi); the current version is v1.0.0.
More Skills