chrome-devtools-mcp

What This Skill Does

The Chrome DevTools MCP is a robust integration designed for OpenClaw agents to gain full control over the Google Chrome browser via Puppeteer. By leveraging the Chrome DevTools Protocol, this skill enables your AI agent to interact with the web as a human would, but with the precision and speed of automation. The skill bridges the gap between raw web data and agent intelligence, allowing for complex tasks like autonomous form filling, visual regression testing, performance monitoring, and live web application debugging. It acts as a dedicated driver that translates natural language intent into low-level browser commands.

Installation

Installation is streamlined through the OpenClaw plugin ecosystem. To add it to your environment, execute the command: clawhub install openclaw/skills/skills/banalit/luke-chrome-devtools-mcp. Once installed, integrate it by adding the following configuration to your openclaw.json file:

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

Alternatively, you can manage the environment using the provided Python scripts: python3 {baseDir}/scripts/setup_chrome_mcp.py setup followed by a validation test using python3 {baseDir}/scripts/setup_chrome_mcp.py test.

Use Cases

• Automated Web Testing: Run regression suites by recording browser interactions and asserting UI states.
• Data Extraction & Form Filling: Automate repetitive data entry workflows across modern web applications that rely on complex JavaScript frameworks.
• Performance Analysis: Trigger performance traces and console audits to detect network bottlenecks or runtime errors in client-side applications.
• Visual Regression: Capture full-page screenshots to detect UI drift or layout issues after deploying code changes.

Example Prompts

1. "Open a new tab, navigate to the OpenClaw GitHub releases page, and tell me the version number of the latest stable build."
2. "Go to the login page, fill in the email with '[email protected]' and the password, then click the submit button and wait for the dashboard to load."
3. "Perform a performance audit on our dashboard and summarize any console errors or long-running tasks I should fix."

Tips & Limitations

• Headless Mode: Use the --headless flag for production or remote server environments to save resources, but use the standard mode if you need to visually debug complex dynamic animations.
• Wait Times: Always utilize the wait_for tool when navigating to new pages to ensure the DOM is fully hydrated, as AI speed can outpace slow network requests.
• Security: Be mindful when handling sensitive credentials; while the skill is secure, it executes in a real browser session. Ensure your target URLs are trusted. The skill requires Node.js v20.19+ to function optimally.