Chrome DevTools MCP: AI-Powered Browser Automation

Imagine telling your AI assistant: “Test if the login form works” or “Take a screenshot of the homepage” - and it just does it. No writing Puppeteer scripts, no debugging CSS selectors.

Chrome DevTools MCP makes this possible. It’s Google’s official MCP server that connects AI agents to Chrome browser’s DevTools, enabling conversational browser automation.

Updated November 4, 2026: Corrected against the official repository: the npm package is chrome-devtools-mcp (not @chromedevtools/chrome-devtools-mcp), Claude Code has no --scope global (use --scope user), user- and local-scope servers live in ~/.claude.json rather than ~/.claude/.mcp.json, and the tools now carry their real names (click, fill, evaluate_script, take_snapshot, wait_for) and target elements by the uid from a page snapshot rather than by CSS selector. The Node.js requirement and the Chrome path option are fixed too.

What is Chrome DevTools MCP?

Chrome DevTools MCP is a specialized MCP server that acts as a bridge between AI models and real Chrome browser instances, using Puppeteer for reliable automation.

How It Works

You (natural language)
  ↓
Claude (MCP client)
  ↓
Chrome DevTools MCP Server
  ↓
Puppeteer (automation library)
  ↓
Chrome Browser (via Chrome DevTools Protocol)

Key Insight: Instead of writing Puppeteer scripts, you describe what you want in natural language, and the AI figures out the technical details.

Core Features

1. High-Level Tools 🛠️

   • navigate_page - Go to any URL
   • take_snapshot - Read the page as text, with a uid for each element
   • click - Click buttons, links, etc.
   • fill - Fill form fields
   • take_screenshot - Capture page visuals
   • list_console_messages - See console logs
   • evaluate_script - Run JavaScript

2. Puppeteer-Powered 🤖

   • Battle-tested Chrome automation
   • Automatic waiting (page loads, DOM readiness)
   • Handles complex interactions reliably

3. DevTools Integration 🔍

   • Access Chrome DevTools Protocol (CDP)
   • Inspect network requests
   • Debug JavaScript errors
   • Monitor performance

4. Conversational Automation 💬

   • Natural language commands
   • AI picks elements from the page snapshot
   • No scripting required

Installation & Setup

Prerequisites

• Google Chrome, current stable or newer (Chrome for Testing also works; other Chromium-based browsers aren’t officially supported)
• A current Node.js LTS release (the package supports v20.19+ on the 20 line, v22.12+ on the 22 line, and v23 or later)
• npm

Method 1: Official CLI (Recommended)

# Install for all your projects (user scope)
claude mcp add \
  --scope user \
  chrome-devtools \
  -- npx -y chrome-devtools-mcp@latest

# Or install for specific project
claude mcp add \
  --scope project \
  chrome-devtools \
  -- npx -y chrome-devtools-mcp@latest

The @latest tag makes npx start the newest release of the server.

Method 2: Manual Configuration

Edit .mcp.json in the project root (project scope). User- and local-scope servers are stored in ~/.claude.json, which Claude Code manages for you, so add those with claude mcp add instead:

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

Real-World Examples

Example 1: Automated Testing

You: "Test the login flow on https://myapp.com:
1. Navigate to the site
2. Click the login button
3. Fill in username and password
4. Submit the form
5. Check if we're redirected to /dashboard"

Chrome DevTools MCP executes:
1. navigate_page({ url: "https://myapp.com" })
2. take_snapshot() → lists the page's elements, each with a uid
3. click({ uid: "<login button>" })
4. take_snapshot() → finds the form fields
5. fill({ uid: "<username field>", value: "testuser" })
6. fill({ uid: "<password field>", value: "testpass123" })
7. click({ uid: "<submit button>" })
8. Returns: Success - redirected to /dashboard

Result: Full E2E test in natural language

Example 2: Visual Regression Testing

You: "Take screenshots of https://mysite.com on different screen sizes:
desktop (1920x1080), tablet (768x1024), mobile (375x667)"

Chrome DevTools MCP executes:
1. Set viewport 1920x1080 → screenshot as desktop.png
2. Set viewport 768x1024 → screenshot as tablet.png
3. Set viewport 375x667 → screenshot as mobile.png

Result: 3 screenshots for visual comparison

Example 3: Performance Debugging

You: "Load https://myapp.com and tell me:
- How long does it take to load?
- Any console errors?
- What's the largest contentful paint (LCP)?"

Chrome DevTools MCP executes:
1. navigate_page({ url: "https://myapp.com" })
2. performance_start_trace({ reload: true, autoStop: true }) → trace with Core Web Vitals such as LCP
3. list_console_messages() (check for errors)

Returns:
- Load time: 2.3s
- Errors: None
- LCP: 1.8s (Good)

Example 4: Data Scraping

You: "Go to https://news.ycombinator.com and get the top 10 story titles"

Chrome DevTools MCP executes:
1. navigate_page({ url: "https://news.ycombinator.com" })
2. evaluate_script({ function: `() =>
     Array.from(document.querySelectorAll('.titleline > a'))
       .slice(0, 10)
       .map(a => a.textContent)` })

Result: Array of top 10 story titles

Available Tools

These are the core tools; the tool reference lists the rest (emulation, network, performance, Lighthouse, memory, and more). Tools that act on an element take its uid from the latest take_snapshot, and page-scoped tools also take a pageId from list_pages, omitted below.

1. navigate_page(url: string, timeout?: number)

Go to a URL (or back, forward, or reload) and wait for the page to load.

navigate_page({ url: "https://example.com" })

2. click(uid: string)

Click an element, identified by its uid from the page snapshot.

click({ uid: "<uid from take_snapshot>" })

3. fill(uid: string, value: string)

Type into an input or text area, or choose an option in a <select>. (type_text types into whichever input already has focus.)

fill({ uid: "<email field uid>", value: "user@example.com" })

4. take_screenshot(options?: object)

Capture a screenshot of the page.

take_screenshot({ fullPage: true })

5. list_console_messages()

Get all console logs, warnings, and errors.

list_console_messages()
// Returns: Array of console messages

6. evaluate_script(function: string)

Run a JavaScript function in the page and return its result as JSON.

evaluate_script({ function: "() => document.querySelector('h1').textContent" })

7. take_snapshot()

Get a text snapshot of the page, built from the accessibility tree, that lists elements with their uids. For the raw HTML, use evaluate_script with () => document.documentElement.outerHTML.

take_snapshot()

8. wait_for(text: string[], timeout?: number)

Wait until any of the given texts appears on the page.

wait_for({ text: ["Loading complete"], timeout: 5000 })

Best Practices

✅ Recommended

1. Use Semantic Selectors in evaluate_script Code

   ✅ Good: button[data-testid="submit"]
   ❌ Bad: div > div > button:nth-child(3)

2. Wait for Dynamic Content

   Use wait_for (it waits for text to appear) on SPAs/AJAX-heavy sites

3. Handle Errors Gracefully

   Ask Claude to "try clicking submit, if it fails, check console for errors"

4. Responsive Testing

   Test across multiple viewport sizes

5. Combine with Other MCPs

   - Filesystem MCP: Save screenshots
   - Memory MCP: Remember test results
   - Context7 MCP: Use latest testing best practices

❌ Avoid

1. Hardcoded Delays - Use wait_for instead of setTimeout
2. Brittle Selectors - Prefer data-testid over complex CSS
3. Ignoring Console Errors - Always check console messages
4. Large Screenshots - Specify regions to reduce file size

Use Cases

Use Case	Description	Complexity
E2E Testing	Automated user flow testing	⭐⭐⭐⭐⭐
Visual Regression	Screenshot comparison	⭐⭐⭐⭐⭐
Web Scraping	Extract data from websites	⭐⭐⭐⭐
Performance Monitoring	Track load times, Web Vitals	⭐⭐⭐⭐
Accessibility Testing	Check ARIA labels, contrast	⭐⭐⭐⭐
Form Automation	Auto-fill and submit forms	⭐⭐⭐

Integration with Other MCPs

Chrome DevTools + Filesystem MCP

Workflow:
1. Chrome DevTools takes screenshots
2. Filesystem saves them to /screenshots
3. AI compares with baseline images

Chrome DevTools + Memory MCP

Workflow:
1. Chrome DevTools runs tests
2. Memory stores test results
3. Next run: AI compares with previous results

Chrome DevTools + Context7 MCP

Workflow:
1. Context7 fetches latest Playwright/Cypress docs
2. Chrome DevTools implements tests using best practices

Troubleshooting

Issue 1: Chrome Not Found

Error: Could not find Chrome executable

Solution:

• Install Google Chrome (stable channel)
• Point the server at a specific binary with --executablePath (-e), for example npx -y chrome-devtools-mcp@latest --executablePath=/path/to/chrome, or pick an installed channel with --channel (stable, beta, dev, canary)

Issue 2: Element Not Found

A click or fill fails because the element hasn’t rendered yet, or its uid comes from an older snapshot.

Solution:

• Use wait_for first
• Take a fresh take_snapshot (uids come from the latest snapshot)

Issue 3: Timeout

Error: Navigation timeout exceeded

Solution:

• Increase timeout: navigate_page({ url, timeout: 30000 })
• Check if site is accessible

Comparison with Traditional Tools

Feature	Chrome DevTools MCP	Puppeteer Script	Playwright
Setup	MCP config only	Write full script	Write full script
Syntax	Natural language	JavaScript	JavaScript/TypeScript
Debugging	Conversational	console.log debugging	Built-in inspector
Learning Curve	Low (just describe)	Medium (API knowledge)	Medium (API knowledge)
Flexibility	High (AI adapts)	High (full control)	High (full control)

When to use Chrome DevTools MCP:

• ✅ Quick ad-hoc testing
• ✅ Non-technical team members
• ✅ Exploratory testing
• ✅ Rapid prototyping

When to use traditional tools:

• ✅ Complex CI/CD pipelines
• ✅ Performance-critical automation
• ✅ Highly customized workflows

Advanced Examples

Multi-Step Form Filling

You: "Fill out the contact form on https://example.com:
- Name: John Doe
- Email: john@example.com
- Message: I'm interested in your product
- Click submit
- Wait for success message"

Claude handles:
- Finding correct input selectors
- Handling any dropdowns or checkboxes
- Waiting for form submission
- Verifying success

Accessibility Audit

You: "Check https://mysite.com for accessibility issues:
- Are all images alt-tagged?
- Do all forms have labels?
- Is color contrast sufficient?"

Claude executes audits and reports findings

Security Considerations

⚠️ Important:

• Never use with sensitive credentials in production
• Chrome runs in automated mode - easy to detect
• Always respect robots.txt and rate limits
• Don’t scrape without permission

Conclusion

Chrome DevTools MCP brings conversational browser automation to AI assistants. Instead of writing automation scripts, you describe what you want, and Claude handles the technical details.

Is It Right for You?

Use Case	Recommendation
Manual testers	⭐⭐⭐⭐⭐
Quick debugging	⭐⭐⭐⭐⭐
Web scraping	⭐⭐⭐⭐
E2E testing	⭐⭐⭐⭐
CI/CD pipelines	⭐⭐ (use Playwright/Cypress)

Get Started Now

1. Install: claude mcp add --scope user chrome-devtools -- npx -y chrome-devtools-mcp@latest
2. Open Claude and say: “Navigate to https://example.com and take a screenshot”
3. Watch the magic happen ✨

Further Reading

• Chrome DevTools MCP GitHub
• Official Chrome Blog Post
• Addy Osmani’s Guide
• Chrome DevTools MCP Tutorial - DataCamp
• AI-Boosted Dev Guide

---

Sources

• Chrome DevTools MCP GitHub Repository
• Chrome Developers Blog - Chrome DevTools MCP
• Addy Osmani - Give your AI eyes: Introducing Chrome DevTools MCP
• DataCamp Tutorial - Chrome DevTools MCP
• Skywork AI - Chrome DevTools MCP Guide for AI Engineers