MCP/Chrome DevTools for Agents

Chrome DevTools for Agents

Lets coding agents control and inspect a live Chrome browser with DevTools performance insights, network debugging, source-mapped console errors, and Puppeteer automation.

frontend•Browser Automation & Testing

GitHub54.1k

License:Apache-2.0

VERIFIED

@Chrome DevTools

About this Server

Chrome DevTools for Agents (chrome-devtools-mcp) is the official Google Chrome DevTools Model Context Protocol server and CLI tool. It gives AI coding assistants (including Antigravity, Claude, Cursor, VS Code, and Copilot) access to the full power of Chrome DevTools. Key capabilities include recording traces to extract actionable performance insights and Core Web Vitals, in-depth network request and header analysis, full DOM accessibility snapshots and screenshots, live console message tracking with source-mapped stack traces, and deterministic Puppeteer automation that automatically awaits action results.

Real-time Interaction

Direct low-latency RPC protocol communication with structured JSON schemas.

Scoped Sandboxing

Restricted capability bounds to prevent accidental modifications or leakage.

Security & Best Practices

Local Execution Sandbox: Connects to local Chrome browser instances via Chrome DevTools Protocol without cloud relay.

Isolated Profile Option: Use --isolated flag to run with ephemeral browser profiles that clean cookies and session data on exit.

Explicit Permission Prompts: Destructive actions or cross-origin navigations can be restricted to authorized domains.

Credential Protection: Avoid passing production passwords or private bearer tokens into unauthenticated test scripts.

When to Use (and When Not To)

Best For

•In-depth browser performance audits, recording DevTools traces, and optimizing Web Vitals (LCP, CLS, INP)
•Inspecting HTTP network requests, headers, and failed API payloads from local development servers
•Debugging client-side JavaScript runtime errors and exceptions with source-mapped stack traces
•Automating browser interactions and form flows deterministically using official Puppeteer drivers
•Memory leak debugging with heap snapshots and accessibility (a11y) tree verification

Not For / Limitations

•Headless cloud pipelines lacking Chrome binaries or display server environments without --headless flag
•Large-scale web scraping across millions of pages (use crawling tools or specialized APIs)
•Direct database manipulation or SQL queries (use PostgreSQL, Supabase, or Neon MCP instead)

Install & Setup

One-line terminal command

terminal command

$claude mcp add chrome-devtools --scope user npx -y chrome-devtools-mcp@latest

Exposed Tools & Endpoints

12 tools

Functions your AI agent can invoke via this Model Context Protocol server

performance_start_trace• callable tool

Starts recording a Chrome DevTools performance trace to capture timeline events and CPU activity.

performance_stop_trace• callable tool

Stops the active performance trace recording and compiles performance data.

performance_analyze_insight• callable tool

Extracts actionable DevTools performance insights, Web Vitals metrics (LCP, CLS, INP), and rendering bottlenecks.

list_console_messages• callable tool

Retrieves browser console log messages, uncaught exceptions, and warnings with source-mapped stack traces.

get_network_request• callable tool

Inspects network requests, response payloads, HTTP headers, status codes, and timing waterfall charts.

take_screenshot• callable tool

Captures a viewport or full-page screenshot of the active browser tab for visual verification.

take_snapshot• callable tool

Captures a structured DOM snapshot or accessibility tree representation for semantic reasoning.

evaluate_script• callable tool

Evaluates JavaScript expressions within the execution context of the active page or service worker.

click• callable tool

Clicks an interactive DOM element identified by selector or element UID using Puppeteer automation.

fill_form• callable tool

Batch-fills form fields (text inputs, checkboxes, select dropdowns) in a single deterministic step.

navigate_page• callable tool

Navigates the browser page to a specified URL, reloads, or traverses browser history.

new_page• callable tool

Opens a new browser tab and navigates directly to a target URL or local development server.