← Back to Skills Marketplace
banalit

Luke Chrome Devtools Mcp

by banalit · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
360
Downloads
1
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install luke-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

  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
Usage Guidance
This skill appears coherent for running Chrome DevTools MCP, but take these precautions before installing: 1) npx -y ...@latest downloads and runs the latest npm package — pin to a specific version ([email protected]) if you want reproducible, reviewable code. 2) Run the MCP server in an isolated environment (container/VM) because it launches a browser that can load arbitrary webpages and may expose session data. 3) The setup script uses shell execution (subprocess with shell=True) for static commands; review any changes before running and avoid modifying it to include user-provided input. 4) Disable telemetry and CrUX tracing as suggested if you will handle sensitive pages. 5) Verify the upstream repo/package maintainer and checksums if you require stronger supply-chain guarantees.
Capability Analysis
Type: OpenClaw Skill Name: luke-chrome-devtools-mcp Version: 1.0.0 The skill bundle provides a standard integration for the Chrome DevTools MCP server, enabling browser automation capabilities like navigation, form filling, and screenshots. The included Python script (scripts/setup_chrome_mcp.py) handles environment verification and basic testing using standard system calls, and the SKILL.md documentation accurately reflects the tool's functionality without any signs of malicious instructions or data exfiltration.
Capability Assessment
✓ Purpose & Capability
Name/description, SKILL.md, and the included Python helper all align: they install/run chrome-devtools-mcp via npx, check for Node/npx/Chrome, and provide an openclaw.json snippet. Requested resources (Node, Chrome) are appropriate for the stated purpose.
ℹ Instruction Scope
Runtime instructions and the setup script perform expected actions (run npx, check Chrome paths, read ~/.openclaw/openclaw.json for status). The script uses subprocess.run with shell=True for a few static commands — expected here but worth noting because shell execution can be sensitive if commands were constructed from untrusted input (they are static in this bundle).
ℹ Install Mechanism
No install spec is provided; SKILL.md and the script instruct use of npx -y chrome-devtools-mcp@latest. Using npx@latest will fetch and execute code from the npm registry at runtime — this is normal for Node tools but increases runtime exposure to remote code changes. Consider pinning a version or installing from a reviewed release if you need stronger guarantees.
✓ Credentials
The skill does not request any environment variables or secrets. It reads a local openclaw.json path (~/ .openclaw/openclaw.json) for status checks, which is appropriate for integration and is declared in the script output only.
✓ Persistence & Privilege
always is false and the skill is user-invocable. The bundle does not modify other skills or system-wide settings, and it does not persist credentials or write configuration files automatically — it only prints a suggested openclaw.json snippet.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install luke-chrome-devtools-mcp
  3. After installation, invoke the skill by name or use /luke-chrome-devtools-mcp
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
- Initial release of chrome-devtools-mcp: Google's official Chrome DevTools MCP server for browser automation and testing. - Enables control of Chrome via Puppeteer and DevTools Protocol: input automation, navigation, screenshots, performance tracing, network and console inspection. - Integrates with OpenClaw for AI agent workflows, including ready-to-use setup scripts and JSON configuration. - Provides a wide range of tools for UI automation, performance analysis, debugging, network inspection, device emulation, and advanced form handling. - Includes privacy options to disable usage and performance data sharing with Google.
Metadata
Slug luke-chrome-devtools-mcp
Version 1.0.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is Luke 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 360 downloads so far.

How do I install Luke Chrome Devtools Mcp?

Run "/install luke-chrome-devtools-mcp" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Luke Chrome Devtools Mcp free?

Yes, Luke Chrome Devtools Mcp is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Luke Chrome Devtools Mcp support?

Luke Chrome Devtools Mcp is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Luke Chrome Devtools Mcp?

It is built and maintained by banalit (@banalit); the current version is v1.0.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments