The official Google Chrome DevTools MCP server enables AI agents to control a live browser for automation, testing, and performance analysis.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install chrome-devtools-mcp-1-0-0
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install chrome-devtools-mcp-1-0-0 using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Chrome DevTools MCP?
Chrome DevTools MCP is a powerful tool designed to bridge the gap between AI agents and web browsers. By utilizing the Puppeteer library and the Chrome DevTools Protocol, it provides a comprehensive interface for agents to navigate the web, interact with elements, and inspect page internals. This skill is a foundational piece for developers looking to enhance their automation capabilities with Openclaw Skills, allowing for a level of browser control that was previously difficult to achieve.
Built by Google, this server ensures high compatibility and access to deep browser metrics. Whether you are performing visual regression testing or automating complex multi-page workflows, this integration provides the necessary tools to execute tasks with precision. Integrating this into your stack allows you to leverage the full power of Openclaw Skills for sophisticated web-based operations.
Chrome DevTools MCP Use Cases
- Automating end-to-end web testing and visual regression audits.
- Recording and analyzing performance traces to optimize web application speed.
- Filling complex, multi-step forms and interacting with dynamic web components.
- Debugging frontend issues by accessing live console messages and network request logs.
- Scraping data from modern single-page applications (SPAs) that require JavaScript execution.
How Chrome DevTools MCP Works
- The MCP server is initialized, launching a Chrome or Chromium instance in either headless or headful mode.
- The AI agent sends commands through the protocol to navigate to specific URLs or list open tabs.
- The skill takes DOM and accessibility snapshots to identify unique element IDs (UIDs) for interaction.
- Actions such as clicking, typing, or hovering are executed on the page based on the agent's logic.
- Real-time data including screenshots, console logs, and performance traces are returned to the agent for validation and further processing.
Chrome DevTools MCP Setup
To get started, you can verify the installation using the following command:
npx -y chrome-devtools-mcp@latest --help
To integrate this into your workflow, add the configuration to your openclaw.json file:
{
"mcp": {
"servers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--headless", "--no-usage-statistics"]
}
}
}
}
This setup ensures that your agent has immediate access to these Openclaw Skills for browser-based tasks.
Chrome DevTools MCP Data Schema & Taxonomy
The skill organizes browser data into several structured categories for easy consumption by AI agents:
| Data Type | Description | Key Metadata |
|---|---|---|
| Page Snapshot | Hierarchical DOM structure | UIDs, Roles, Labels |
| Visual Capture | Current viewport image | Base64 Image Data |
| Performance Trace | Runtime execution logs | Trace URLs, CrUX Insights |
| Network Data | HTTP request/response logs | Headers, Status Codes, Payloads |
| Console Logs | JS runtime output | Stack Traces, Message Levels |
Chrome DevTools MCP Advanced Features
- Support for mobile and tablet emulation to test responsive layouts across various devices.
- Advanced performance recording with AI-driven insights via the Google CrUX API.
- Direct JavaScript execution within the page context for complex DOM manipulations.
- Detailed network inspection and interception for debugging API integrations.
- Multi-tab management and navigation history control integrated within Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
CEO Advisor
A comprehensive strategic toolkit for executive leadership, organizational transformation, and stakeholder management.
Free Worker Dispatch
A cost-saving task delegation engine that routes research, content, and coding tasks to free AI models via OpenRouter.
AgentMemory
A persistent memory framework for AI agents to remember facts, track entities, and learn from past experiences.
Media Orchestrator
A unified skill for resolving, downloading, and delivering high-quality audio and video content to chat platforms via Openclaw Skills.
Agent Team Workflows
A universal orchestration framework to coordinate 5-agent teams for complex, multi-stage workflows across any professional domain.
Clawd Cursor
An AI-powered desktop agent that enables OpenClaw users to control any Windows or macOS application through natural language commands.