chrome-devtools-mcp-automation

Q: How do I install chrome-devtools-mcp-automation?

Run npx skills add https://github.com/reason-machines/devtools-skills --skill chrome-devtools-mcp-automation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-devtools-mcp-automation/ (personal) or .claude/skills/chrome-devtools-mcp-automation/ (project).

by reason-machinesAI & Agents

Use Chrome DevTools MCP to control Chrome, debug web apps, analyze performance, and automate browser tasks via MCP tools

Installs: 265
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/devtools-skills --skill chrome-devtools-mcp-automation

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads chrome-devtools-mcp-automation automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Chrome DevTools MCP Automation

Skill by ara.so — Devtools Skills collection.

Chrome DevTools MCP (chrome-devtools-mcp) is an MCP server that gives AI coding agents full control over Chrome browser automation, debugging, and performance analysis. It exposes Chrome DevTools Protocol and Puppeteer capabilities through MCP tools, enabling reliable browser automation, performance profiling, network inspection, and advanced debugging.

Installation

MCP Client Configuration

Add to your MCP client configuration (e.g., Claude Desktop, Cursor, VS Code):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Slim mode (basic browser tasks only):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Disable usage statistics and update checks:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"],
      "env": {
        "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1"
      }
    }
  }
}

CLI Usage (Without MCP)

# Install globally
npm install -g chrome-devtools-mcp

# Run CLI
chrome-devtools-mcp --help

Requirements

Node.js v20.19+ (latest maintenance LTS)
Chrome stable or newer
npm

Key MCP Tools

Once the MCP server is running, your AI agent has access to these tools:

Browser Control

browser_navigate - Navigate to a URL

// Navigate to a page
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://example.com"
});

browser_click - Click an element

// Click by selector
await use_mcp_tool("chrome-devtools", "browser_click", {
  selector: "button.submit"
});

// Click with custom wait
await use_mcp_tool("chrome-devtools", "browser_click", {
  selector: "#login-btn",
  waitUntil: "networkidle2"
});

browser_type - Type text into an input

// Type into a field
await use_mcp_tool("chrome-devtools", "browser_type", {
  selector: "input[name='email']",
  text: "user@example.com"
});

// Type with delay between keystrokes
await use_mcp_tool("chrome-devtools", "browser_type", {
  selector: "#search",
  text: "search query",
  delay: 100
});

browser_screenshot - Capture screenshot

// Full page screenshot
await use_mcp_tool("chrome-devtools", "browser_screenshot", {
  fullPage: true
});

// Element screenshot
await use_mcp_tool("chrome-devtools", "browser_screenshot", {
  selector: ".main-content",
  fullPage: false
});

browser_evaluate - Execute JavaScript in browser

// Get page data
await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: "document.title"
});

// Interact with page
await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: `
    const items = Array.from(document.querySelectorAll('.item'));
    return items.map(el => ({
      text: el.textContent,
      href: el.querySelector('a')?.href
    }));
  `
});

Performance Analysis

performance_record - Record performance trace

// Record a page load
await use_mcp_tool("chrome-devtools", "performance_record", {
  url: "https://example.com",
  duration: 10000, // 10 seconds
  throttling: "4g" // Simulate 4G network
});

performance_analyze - Analyze performance metrics

// Get performance insights
await use_mcp_tool("chrome-devtools", "performance_analyze", {
  traceUrl: "trace-data-url",
  includeFieldData: true // Include CrUX data
});

Debugging & Inspection

browser_console - Get console messages

// Fetch console logs
await use_mcp_tool("chrome-devtools", "browser_console", {});

browser_network - Inspect network requests

// Get network activity
await use_mcp_tool("chrome-devtools", "browser_network", {});

// Filter by resource type
await use_mcp_tool("chrome-devtools", "browser_network", {
  resourceType: "xhr"
});

browser_cookies - Manage cookies

// Get all cookies
await use_mcp_tool("chrome-devtools", "browser_cookies", {
  action: "get"
});

// Set a cookie
await use_mcp_tool("chrome-devtools", "browser_cookies", {
  action: "set",
  name: "session_id",
  value: "abc123",
  domain: "example.com"
});

// Delete cookies
await use_mcp_tool("chrome-devtools", "browser_cookies", {
  action: "delete",
  name: "session_id"
});

Common Automation Patterns

Form Submission Testing

// Navigate to login page
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://app.example.com/login"
});

// Fill in credentials
await use_mcp_tool("chrome-devtools", "browser_type", {
  selector: "input[name='email']",
  text: "test@example.com"
});

await use_mcp_tool("chrome-devtools", "browser_type", {
  selector: "input[name='password']",
  text: process.env.TEST_PASSWORD
});

// Submit form
await use_mcp_tool("chrome-devtools", "browser_click", {
  selector: "button[type='submit']",
  waitUntil: "networkidle0"
});

// Verify success
const result = await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: "document.querySelector('.success-message')?.textContent"
});

Web Scraping

// Navigate to page
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://news.example.com"
});

// Extract data
const articles = await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: `
    Array.from(document.querySelectorAll('article')).map(article => ({
      title: article.querySelector('h2')?.textContent?.trim(),
      link: article.querySelector('a')?.href,
      date: article.querySelector('time')?.getAttribute('datetime'),
      summary: article.querySelector('p')?.textContent?.trim()
    }))
  `
});

Performance Audit

// Record trace with throttling
const trace = await use_mcp_tool("chrome-devtools", "performance_record", {
  url: "https://example.com",
  duration: 15000,
  throttling: "3g",
  deviceEmulation: "mobile"
});

// Analyze metrics
const analysis = await use_mcp_tool("chrome-devtools", "performance_analyze", {
  traceUrl: trace.url,
  includeFieldData: true
});

// Check Core Web Vitals
console.log(`LCP: ${analysis.lcp}ms`);
console.log(`FID: ${analysis.fid}ms`);
console.log(`CLS: ${analysis.cls}`);

Network Monitoring

// Navigate and monitor network
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://api.example.com/dashboard"
});

// Get network requests
const requests = await use_mcp_tool("chrome-devtools", "browser_network", {});

// Filter failed requests
const failed = requests.filter(r => r.status >= 400);

// Find slow requests
const slow = requests.filter(r => r.time > 1000);

Screenshot Comparison

// Baseline screenshot
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://example.com"
});

const baseline = await use_mcp_tool("chrome-devtools", "browser_screenshot", {
  fullPage: true
});

// Make changes via evaluate
await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: "document.body.classList.add('dark-mode')"
});

// Comparison screenshot
const comparison = await use_mcp_tool("chrome-devtools", "browser_screenshot", {
  fullPage: true
});

Console Error Debugging

// Navigate to page
await use_mcp_tool("chrome-devtools", "browser_navigate", {
  url: "https://app.example.com"
});

// Check console for errors
const console = await use_mcp_tool("chrome-devtools", "browser_console", {});

// Filter errors with source maps
const errors = console.filter(msg => 
  msg.type === 'error' && msg.stackTrace
);

// Log error details
errors.forEach(error => {
  console.log(`Error: ${error.text}`);
  console.log(`Source: ${error.stackTrace?.[0]?.url}`);
  console.log(`Line: ${error.stackTrace?.[0]?.lineNumber}`);
});

Configuration Options

Command-Line Flags

# Run in headless mode
npx chrome-devtools-mcp@latest --headless

# Slim mode (basic tools only)
npx chrome-devtools-mcp@latest --slim

# Disable performance CrUX data
npx chrome-devtools-mcp@latest --no-performance-crux

# Disable usage statistics
npx chrome-devtools-mcp@latest --no-usage-statistics

# Connect to existing browser
npx chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

# Custom Chrome path
npx chrome-devtools-mcp@latest --chrome-path=/path/to/chrome

Environment Variables

# Disable usage statistics
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1

# Disable update checks
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1

# CI mode (disables stats collection)
export CI=true

MCP Server Configuration Examples

Headless with custom timeout:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--headless"],
      "env": {
        "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1"
      }
    }
  }
}

Connect to existing browser (Antigravity):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Windows configuration:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "chrome-devtools-mcp@latest"
      ],
      "env": {
        "SystemRoot": "C:\\Windows",
        "PROGRAMFILES": "C:\\Program Files"
      }
    }
  }
}

Troubleshooting

Browser Won't Start

Issue: Chrome fails to launch

Solution:

Verify Chrome is installed: chrome --version or google-chrome --version
Check Node.js version: node --version (must be 20.19+)

Use explicit Chrome path:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--chrome-path=/usr/bin/google-chrome"]
}

Connection Timeout

Issue: MCP server fails to connect to browser

Solution:

Increase startup timeout in config:
```
{
  "startup_timeout_ms": 20000
}
```
Check if another Chrome instance is using port 9222
Kill existing Chrome processes: pkill chrome (Linux/Mac)

Selector Not Found

Issue: browser_click or browser_type fails to find element

Solution:

Wait for element to appear:

await use_mcp_tool("chrome-devtools", "browser_evaluate", {
  script: `
    await new Promise(resolve => {
      const check = setInterval(() => {
        if (document.querySelector('#my-element')) {
          clearInterval(check);
          resolve();
        }
      }, 100);
    });
  `
});

Use more specific selectors (ID > class > tag)
Check if element is in iframe (not currently supported)

Performance Trace Fails

Issue: performance_record returns incomplete trace

Solution:

Increase duration: duration: 30000
Disable throttling for local testing: remove throttling parameter
Check network connectivity for remote URLs

Source Maps Not Loading

Issue: Console errors don't show source-mapped stack traces

Solution:

Ensure source maps are published with your build
Verify source map URLs are accessible
Check CORS headers on source map files

High Memory Usage

Issue: Chrome consumes excessive memory

Solution:

Use --headless mode
Close browser between test runs
Use --slim mode if you don't need performance tools
Limit trace duration in performance_record

Rate Limiting (CrUX API)

Issue: Performance analysis fails with rate limit error

Solution:

Disable CrUX: --no-performance-crux
Cache analysis results for repeated URLs
Add delay between performance audits

Best Practices

Always use headless mode in CI/CD: Add --headless flag
Use environment variables for sensitive data: Never hardcode credentials
Wait for navigation: Use waitUntil: "networkidle0" for SPAs
Cache selectors: Store frequently used selectors as constants
Clean up resources: Close browser instances after automation completes
Enable source maps: For better debugging of console errors
Use slim mode for simple tasks: Faster startup, lower memory usage
Throttle performance tests: Simulate real-world conditions with throttling: "4g"

Additional Resources

FAQ

What does the chrome-devtools-mcp-automation skill do?

Use Chrome DevTools MCP to control Chrome, debug web apps, analyze performance, and automate browser tasks via MCP tools

How do I install chrome-devtools-mcp-automation?

Run npx skills add https://github.com/reason-machines/devtools-skills --skill chrome-devtools-mcp-automation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-devtools-mcp-automation/ (personal) or .claude/skills/chrome-devtools-mcp-automation/ (project).

Which AI agents can use chrome-devtools-mcp-automation?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is chrome-devtools-mcp-automation safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains chrome-devtools-mcp-automation?

It is published by reason-machines in reason-machines/devtools-skills. It has 265 recorded installs.

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

chrome-devtools-mcp-automation

Install

Install

Describe the task

Review the result

SKILL.md

Chrome DevTools MCP Automation

Installation

MCP Client Configuration

CLI Usage (Without MCP)

Requirements

Key MCP Tools

Browser Control

Performance Analysis

Debugging & Inspection

Common Automation Patterns

Form Submission Testing

Web Scraping

Performance Audit

Network Monitoring

Screenshot Comparison

Console Error Debugging

Configuration Options

Command-Line Flags

Environment Variables

MCP Server Configuration Examples

Troubleshooting

Browser Won't Start

Connection Timeout

Selector Not Found

Performance Trace Fails

Source Maps Not Loading

High Memory Usage

Rate Limiting (CrUX API)

Best Practices

Additional Resources

FAQ

More from reason-machines/devtools-skills

Popular ai & agents skills