explaingit

chromedevtools/chrome-devtools-mcp

📈 Trending★ 39,935TypeScriptAudience · developerComplexity · 3/5ActiveLicenseSetup · moderate

TLDR

An MCP server that lets AI coding assistants like Claude directly control and debug a live Chrome browser for automation, testing, and performance analysis.

Mindmap

mindmap
  root((repo))
    What it does
      Control Chrome browser
      Take screenshots
      Inspect console
      Monitor network
    Key features
      Puppeteer-based
      DevTools protocol
      Source-mapped traces
      Performance analysis
    Use cases
      Web app debugging
      Automated testing
      AI-driven verification
    Tech stack
      TypeScript
      Node.js
      Puppeteer
      MCP protocol
    Audience
      AI coding assistants
      Web developers
      QA engineers

Things people build with this

USE CASE 1

Debug web applications by having an AI assistant take screenshots and inspect the live browser instead of reasoning about code alone.

USE CASE 2

Automate web testing workflows where an AI agent navigates pages, fills forms, and validates behavior without manual intervention.

USE CASE 3

Analyze page performance with Chrome DevTools traces to identify bottlenecks and get actionable insights about load speed.

Tech stack

TypeScriptNode.jsPuppeteerChrome DevTools Protocol

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Chrome/Chromium browser installed and Node.js runtime; MCP server setup and connection to Claude may need configuration.

Use freely for any purpose including commercial. Keep the notice and disclose changes to the patent grant.

In plain English

Chrome DevTools MCP is a server that gives AI coding assistants, such as Claude, Gemini, Cursor, or GitHub Copilot, direct access to a live Chrome browser for automation, debugging, and performance analysis. MCP stands for Model Context Protocol, an open standard that allows AI tools to call external capabilities. This server implements that protocol, bridging the AI assistant to the Chrome browser's built-in developer tools. The server is built on top of Puppeteer, a well-known library for programmatically controlling Chrome. Through this MCP server, an AI agent can take screenshots of web pages, inspect and interact with the browser console, monitor network requests, automate user actions like clicking and form submission, and run Chrome DevTools performance traces to get actionable insights about page load speed. Because it connects to Chrome's native DevTools protocol, it has access to the full depth of browser debugging information, including source-mapped stack traces that map error locations back to the original source code rather than compiled output. You would use this when building or debugging a web application with the help of an AI coding assistant and you want the AI to directly verify how the app behaves in a real browser rather than just reasoning about the code. Instead of you taking screenshots and pasting them into the chat, the AI can drive the browser itself. It is also useful for automated web testing scenarios where an AI agent needs to navigate pages and validate behavior. The tech stack is TypeScript running on Node.js (version 20.19 or later), and it is distributed as an npm package called chrome-devtools-mcp.

Copy-paste prompts

Prompt 1
Set up chrome-devtools-mcp as an MCP server in my Claude/Cursor config so Claude can control my Chrome browser for debugging.
Prompt 2
Use the Chrome DevTools MCP server to take a screenshot of my web app and inspect the console for errors while debugging.
Prompt 3
Run a performance trace on my website using the MCP server and tell me what's slowing down the page load.
Prompt 4
Automate clicking through a form on my website and validate the submission using the Chrome DevTools MCP server.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.