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, screenshot, performance traces, network inspection, console debugging. Use for browser testing, web automation, performance analysis, UI testing, form filling, and visual regression.

johnalbertini14-glitch Updated Sep 9, 2026 1 repo stars

Install

Press C to copy

$ npx skillmds@latest add johnalbertini14-glitch/chrome-devtools-mcp

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/johnalbertini14-glitch/chrome-devtools-mcp.svg)](https://skillmd.com/skills/johnalbertini14-glitch/chrome-devtools-mcp)

Trust & safety

2 of 3 audits passed

Last audited Sep 25, 2026 · commit ee06893

Permissions this skill uses

Executes scripts
The instructions run shell commands or bundled script files.
Makes network calls
The instructions fetch remote URLs or call external services.

License: Apache-2
Works with: Claude Code Claude.ai OpenAI Codex +

File contents

🌐 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 → URL
take_snapshot → get element UIDs
click/fill → interact with elements
take_screenshot → capture result

Performance audit

navigate_page → URL
performance_start_trace
Interact with page
performance_stop_trace
performance_analyze_insight

Form testing

navigate_page → form URL
take_snapshot → identify form fields
fill_form → fill all fields at once
click → submit button
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

---name: chrome-devtools-mcpdescription: 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.license: Apache-2.0--- # 🌐 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) | 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

johnalbertini14-glitch/openclaw-skills/tree/main/skills/aiwithabidi/chrome-devtools-mcp commit ee0689344e

Frequently asked questions

npx skillmds@latest add johnalbertini14-glitch/chrome-devtools-mcp