# Chrome DevTools MCP server

> Control and inspect a live Chrome browser: record performance traces, analyze network requests, and read console messages.

- Listing: https://mcp.tc/i/chrome-devtools
- Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint.
- Type: local (stdio)
- Auth: no API key needed
- Category: [Browser Automation](https://mcp.tc/c/browser-automation)
- Vendor: Google (Chrome DevTools)
- Verified: yes, mcp.tc checked that this is the official server (https://mcp.tc/verify). It says who runs the server, not that it is safe.
- Homepage: <https://github.com/ChromeDevTools/chrome-devtools-mcp>
- Repository: <https://github.com/ChromeDevTools/chrome-devtools-mcp>
- Package: npm `chrome-devtools-mcp`

## About

Lets a coding agent control and inspect a live Chrome browser through Chrome DevTools. It can record performance traces and extract insights, analyze network requests, take screenshots, and read console messages with source-mapped stack traces. Actions are automated with Puppeteer, which waits for results.

Runs locally over stdio with npx (chrome-devtools-mcp). Requires Node.js LTS, npm and a current stable Chrome. No account or API key is needed. Google collects usage statistics by default, and performance tools may send trace URLs to the CrUX API. Both can be disabled with flags.

## What it can do

- Record performance traces and extract insights
- Analyze network requests
- Read console messages with source-mapped stack traces
- Take screenshots of pages
- Automate browser actions via Puppeteer
- Run in slim or headless mode for basic tasks
- Connect to a running Chrome instance

## Example prompts

- "Check the performance of https://developers.chrome.com"
- "Open my local site and list any console errors"
- "Show failed network requests on this page"
- "Take a screenshot of the checkout page in Chrome"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@latest
```

2. Start Claude Code and type `/mcp`. **chrome-devtools** should show as connected.

Add `--scope user` to make it available in every project.

### Claude Desktop

1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add:

`claude_desktop_config.json`:

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

2. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=chrome-devtools&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImNocm9tZS1kZXZ0b29scy1tY3BAbGF0ZXN0Il19>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

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

Needs Node.js on your computer.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=chrome-devtools&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%40latest%22%5D%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"chrome-devtools","type":"stdio","command":"npx","args":["-y","chrome-devtools-mcp@latest"]}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}
```

Needs Node.js on your computer.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

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

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

### Codex

```bash
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]
```

Needs Node.js on your computer.

### Gemini CLI

```bash
gemini mcp add chrome-devtools npx -- -y chrome-devtools-mcp@latest
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients that start local servers accept this shape:

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

Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields.

Needs Node.js on your computer.

## Details

- Server version: 1.10.1
- Last checked: 2026-10-03
- Listed: 2026-10-03
- Updated: 2026-10-03

---
Source: https://mcp.tc/i/chrome-devtools (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report