Chrome DevTools MCP

What it does

Lets a coding agent control and inspect a live Chrome browser through Chrome DevTools (Google now calls it "Chrome DevTools for agents"; the package is chrome-devtools-mcp). It can record performance traces, read network requests and console messages (with source-mapped stack traces) and automate pages with Puppeteer. A CLI is included for use without MCP. Apache-2.0.

Who it's for

Web developers who want the agent to debug a page or check its performance in a real Chrome.

How to set it up

1. Needs a current Node.js LTS and Chrome stable (or Chrome for Testing).

2. Add to your MCP client config:

   jsonCopy

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

3. For basic browser tasks only, add "--slim" (and "--headless") to the args.

4. Google collects usage statistics by default; add "--no-usage-statistics" to opt out. Performance tools may send trace URLs to the CrUX API; "--no-performance-crux" turns that off. The agent can see everything in that browser, so don't use it with sensitive logged-in sessions.

5. Test it with the README's first prompt:

   textCopy

   Check the performance of https://developers.chrome.com

Check the official Chrome DevTools MCP docs for the latest steps.

Example prompts

Check the performance of http://localhost:3000 and tell me the biggest issues.

Open my app, click Sign up, and show me any console errors or failed network requests.

Record a trace of the homepage load and explain what is slowing down LCP.

Demo