chrome-devtools-mcp: Give Your Coding Agent Real Eyes in Chrome

A coding agent can write HTML, CSS, and JavaScript just fine. What it cannot do — without help — is open the browser, look at what went wrong, and see the result. chrome-devtools-mcp is the official project from the Chrome DevTools team at Google that closes that gap.

What it is

It is an MCP server (and a CLI) that connects your coding agent to a running Chrome instance. Your agent can navigate to a URL, take a screenshot, read console errors with source-mapped stack traces, inspect network requests, run a performance trace, and automate browser actions through Puppeteer — all without you opening DevTools yourself.

It also ships with bundled skills for common debugging tasks: accessibility audits, cookie inspection, memory leak detection, and LCP analysis. Chrome starts only when a tool actually needs it, so it is not sitting idle eating resources between requests.

Where it shines

The obvious win is the feedback loop for web development. Instead of the agent guessing whether its generated CSS is rendering correctly, it can look and react to what is actually on screen. For debugging flaky UI, network waterfall issues, or rendering performance problems, this beats asking the agent to read static code and imagine what the browser does.

If you are building your own browser-based agents or subagents, this is a ready-made browser tool layer you do not have to write from scratch. Point the agent at a page, ask it to profile performance, and it handles the trace, extraction, and analysis automatically.

The real caveats

Chrome-only. The server officially supports Google Chrome and Chrome for Testing. Other Chromium forks may work, but they are not guaranteed. Firefox, Safari, and Arc users are out in the cold.

Browser content is exposed to the MCP client. The server can read cookies, page data, and whatever is open in that Chrome session. Do not run it alongside sessions with sensitive credentials or proprietary data unless you fully trust your MCP client.

Telemetry is on by default. Usage statistics get collected, and performance tools can send trace URLs to Google's CrUX API. Opt out with --no-usage-statistics and --no-performance-crux flags. The environment variable CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS also disables update-check network calls if you want a fully quiet install.

Keep skills in sync with the package. The bundled skills describe the tools at a specific version. If you update chrome-devtools-mcp, update the skills alongside it or your agent will be working from stale tool descriptions.

Install

Add it to your MCP client config with a single npx line:

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

For the CLI: npm i chrome-devtools-mcp@latest -g. Skills can be installed as a plugin in Claude Code or copied manually into your agent's skills directory. The full project is at ChromeDevTools/chrome-devtools-mcp, built and maintained by the official Chrome DevTools team at Google.