# Chrome DevTools MCP

> Lets your coding agent drive a live Chrome browser: debug pages, read network and console logs, and record performance traces.

Chrome DevTools MCP (also called Chrome DevTools for agents) is the Chrome team's own MCP server. It lets your coding agent control and inspect a live Chrome browser with the same tools you use in DevTools, so it can see what the code it wrote actually does in the browser.

What you can do with it
- Check in the browser that a change your agent made works as expected
- Diagnose network and console errors, such as CORS problems or images that don't load
- Reproduce bugs by navigating, filling out forms and clicking through a flow
- Inspect the DOM and CSS of a live page to fix layout and styling problems
- Record performance traces and dig into insights such as a slow LCP
- Take screenshots, run Lighthouse audits and analyse memory heap snapshots

How it connects
It runs on your machine through npx (chrome-devtools-mcp@latest) and needs Node.js and a current version of Chrome. Chrome starts the first time your agent uses a tool that needs it. Automation runs on Puppeteer, which waits for each action's result.

Good to know
Your agent can see and change anything in that browser, so don't use it with accounts or data you don't want to share. Performance tools can send trace URLs to Google's Chrome UX Report API for real-user data; the --no-performance-crux flag turns that off. The --slim flag exposes a smaller set of tools for basic browser tasks.

It also comes as a Claude Code plugin and a Gemini CLI extension, with skills for accessibility, LCP, memory leaks and cookie debugging.

- Type: Plugin
- Made by: Google
- Category: Developer tools
- Formats: Local MCP, Claude plugins, Extensions
- Version: latest
- Website: https://developer.chrome.com/docs/devtools/agents
- Source: https://github.com/chromedevtools/chrome-devtools-mcp
- Page: https://pluginboard.ai/plugins/chrome-devtools-mcp

## Works with

- Claude
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### Claude

In Claude (web or desktop): Customize → Plugins → Add → Add marketplace, enter anthropics/claude-plugins-official, then add chrome-devtools-mcp

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22chrome-devtools-mcp%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%401.12.0%22%5D%7D

Run in your terminal:

```shell
code --add-mcp '{"name":"chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp@1.12.0"]}'
```

Copilot CLI:

```shell
copilot mcp add chrome-devtools-mcp -- npx -y chrome-devtools-mcp@1.12.0
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=chrome-devtools-mcp&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImNocm9tZS1kZXZ0b29scy1tY3BAMS4xMi4wIl19

Add to .cursor/mcp.json:

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

### Claude Code

In Claude Code:

```text
/plugin marketplace add anthropics/claude-plugins-official
/plugin install chrome-devtools-mcp@claude-plugins-official
```

### Codex

Run in your terminal:

```shell
codex mcp add chrome-devtools-mcp -- npx -y chrome-devtools-mcp@1.12.0
```

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

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

### Gemini CLI

Run in your terminal:

```shell
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp
```

### OpenClaw

In a terminal: Run openclaw mcp add chrome-devtools-mcp --command npx, with --arg before each argument (-y chrome-devtools-mcp@1.12.0) and --env NAME=value for each variable it needs.

### OpenCode

Run in your terminal:

```shell
opencode mcp add chrome-devtools-mcp -- npx -y chrome-devtools-mcp@1.12.0
```

### Hermes Agent

Add to ~/.hermes/config.yaml:

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

---
From Pluginboard (https://pluginboard.ai).