Chrome DevTools MCP

Overview

Chrome DevTools MCP is the official Model Context Protocol (MCP) server developed by the Chrome DevTools team at Google. It exposes the full power of Chrome DevTools and the Chrome DevTools Protocol (CDP) to AI coding assistants, allowing them to inspect, debug, interact with, and automate a live Chrome browser instance.

Built on reliable foundations (including Puppeteer under the hood), it removes the "blindfold" problem of traditional AI coding agents by giving them real-time visibility into rendered pages, console output, network activity, performance metrics, and more.

Launched in public preview in September 2025, it has quickly become a cornerstone tool for AI-powered web development, debugging, and testing.

Key Features

• 26+ MCP Tools across categories including:

  • Browser control (open, navigate, reload, close)
  • DOM inspection and manipulation
  • Console log capture and JavaScript evaluation
  • Network monitoring and request inspection
  • Performance profiling and Lighthouse audits
  • Screenshot capture and element highlighting
  • Debugging (breakpoints, call stacks, sources)
  • Accessibility, memory, and storage inspection

• Live Browser Integration

  • Connect to a fresh Chrome instance or auto-attach to existing running sessions (with remote debugging enabled)
  • Persistent sessions and multi-tab support

• Natural Language Automation

  • Agents can describe tasks in plain English ("Debug why this button isn't clickable on mobile" or "Run a performance audit and suggest optimizations")

• Easy Setup

  Copy

  npx chrome-devtools-mcp@latest
  

  Or add via MCP client config (Claude Desktop, Cursor, Gemini CLI, etc.)

• Production-Ready

  • Comprehensive tool reference and documentation
  • Troubleshooting guides and design principles
  • Active maintenance with frequent updates

Installation & Quick Start

1. Run the server:

   Copy

   npx chrome-devtools-mcp@latest
   

2. Configure your MCP client (e.g., Claude, Cursor) to connect to it.

3. For existing browser sessions, launch Chrome with remote debugging enabled and use --autoConnect.

Full setup instructions, .mcp.json examples, and tool reference are available in the repository.

Use Cases

• AI-Powered Debugging: Let agents inspect real DOM, console errors, and network issues before suggesting fixes.
• Automated Testing & QA: Run end-to-end flows, take screenshots, and validate UI across devices.
• Performance Optimization: Generate Lighthouse reports, analyze metrics, and receive concrete optimization recommendations.
• Web Development Loop: Write code → run in real Chrome → observe results → iterate with grounded feedback.
• Browser Automation: Navigate sites, fill forms, scrape data, or demonstrate features via natural language.

Why Chrome DevTools MCP?

Traditional agents guess based on code alone. Chrome DevTools MCP closes the loop by providing real runtime data from a live browser, dramatically improving accuracy, reducing hallucinations, and accelerating development workflows for frontend, full-stack, and web testing tasks.

Official project maintained by the Chrome team. Open source and free to use.

Resources

• Tool reference: docs/tool-reference.md
• Official announcement: developer.chrome.com/blog/chrome-devtools-mcp
• Enhanced session debugging blog: developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session

Start giving your AI agents real "eyes" in the browser today.