# Chrome DevTools — MCP Server

> Let an agent open DevTools on a live page and debug it.

**Source:** https://mcpplaygroundonline.com/mcp-servers/chrome-devtools  
**Transport:** stdio  
**Requires auth:** No

---

## What it does

The gap this closes is verification. An agent can generate a fix for a slow page, but without DevTools it has no way to know whether the fix worked — it is reasoning about performance from source code alone. This server gives it measurement: performance_start_trace and performance_stop_trace record a real trace, and performance_analyze_insight pulls out specific findings like a long task or a render-blocking resource rather than dumping raw timings. Around that sits the rest of DevTools: list_network_requests and get_network_request for loading failures and API calls, list_console_messages and get_console_message for JavaScript errors with source maps applied, get_css_styles for computed styles, evaluate_script to run arbitrary JavaScript in the page, and lighthouse_audit for a full report. Because it is built on Puppeteer, the agent can also drive the page — click, fill a form, navigate, handle a dialog — so it can reproduce a bug and then inspect the result. A --slim flag trims the tool list when the full set is more than the model needs.

## Tools exposed

- performance_start_trace / performance_stop_trace / performance_analyze_insight — record a trace and extract findings
- list_network_requests / get_network_request — debug failed loads, slow resources and API calls
- list_console_messages / get_console_message — JavaScript errors with source-mapped stack traces
- lighthouse_audit — run a full Lighthouse report against the page
- navigate_page / new_page / list_pages / select_page / wait_for — drive navigation across tabs
- click / fill / fill_form / hover / press_key / type_text / upload_file — interact with the page
- take_screenshot / take_snapshot / screencast_start — capture what the page actually looks like
- evaluate_script / get_css_styles — run JavaScript and read computed styles
- emulate / resize_page — throttle CPU and network, or test a viewport size

## Example queries you can run

- "Load this page, record a performance trace and tell me what is blocking the largest contentful paint."
- "Open the checkout flow, fill the form and show me any console errors it throws."
- "Which network requests on this page take longest, and which are render-blocking?"
- "Run a Lighthouse audit and list the three changes with the biggest impact."

## Details

- **Recommended model:** anthropic/claude-sonnet-4.5 — A performance trace is a large, dense artefact. Sonnet 4.5 reads the insight output and names a specific cause instead of listing every metric back at you.
- **Transport:** stdio
- **Authentication:** Not required — No credentials. The server launches or attaches to Chrome on your machine — which means it can also see any page you are already logged into.
- **Official source:** [ChromeDevTools/chrome-devtools-mcp — official repository](https://github.com/ChromeDevTools/chrome-devtools-mcp)

## Connecting to Chrome DevTools

### Client configuration

**npx (recommended)**

Launches Chrome on first use. Nothing to install beyond Node and a Chrome installation.

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

**Isolated and headless**

--isolated uses a temporary user data directory, so the agent never touches your real profile or its logged-in sessions. Worth defaulting to.

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

## Frequently asked questions

### What is the Chrome DevTools MCP server?

It is Google’s official MCP server for controlling and inspecting a live Chrome browser from a coding agent. It exposes performance tracing, network inspection, console messages, Lighthouse audits, CSS inspection and Puppeteer-driven page interaction as tools.

### How is it different from the Playwright MCP server?

Playwright is built for automation — navigate, act, assert, across browsers. Chrome DevTools is built for diagnosis: traces, network waterfalls, console errors and Lighthouse, all Chrome-specific. Use Playwright to exercise a flow, this to find out why the flow is slow or broken.

### Does it touch my real browser profile?

By default it can, which is the thing to be deliberate about — that includes pages you are signed into. Passing --isolated gives the agent a temporary user data directory instead, and is the safer default unless you specifically need an authenticated session.

### Can it actually measure whether a fix worked?

Yes, and that is the main reason to install it. The agent records a trace before and after a change and compares real measurements, rather than reasoning about performance from the source alone. That loop is what turns a plausible optimisation into a verified one.

### There are a lot of tools — does that hurt model accuracy?

It can, since selection degrades as the tool list grows. The --slim flag exposes a reduced set covering the common cases, which is worth using with smaller models or when this server is connected alongside several others.

---

_Test this server across 40+ models on MCP Playground: https://mcpplaygroundonline.com/mcp-servers/chrome-devtools — free, no install._