# Chrome DevTools MCP — Browser Debugging for AI Agents

> Give your AI coding agent full access to Chrome DevTools for browser automation, debugging, and performance analysis. Works with Claude, Cursor, Copilot, and 15+ AI tools.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

Add the following to your `.mcp.json` (or Claude Desktop / Cursor MCP config):

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

For lightweight tasks (fewer tools, less token usage):

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

Restart your AI tool. Chrome DevTools is now available to your agent.

---

## Intro

Chrome DevTools MCP is an official Model Context Protocol server that lets your AI coding agent control and inspect a live Chrome browser. With 33,100+ GitHub stars and 29 built-in tools, it provides reliable browser automation via Puppeteer, advanced network debugging, console analysis, and performance tracing — all accessible from Claude Code, Cursor, Copilot, VS Code, and 15+ other AI tools.

Best for: developers who need AI-assisted browser testing, debugging, and performance analysis.
Works with: Claude Code, Cursor, GitHub Copilot, VS Code, Cline, Gemini CLI, JetBrains AI, Windsurf, and more.
Setup time: under 1 minute.

---

## Chrome DevTools MCP — Full Feature Reference

### Core Capabilities

Chrome DevTools MCP provides 29 tools organized into 6 categories:

#### Input & Automation
- **click**, **type**, **hover**, **select**, **drag** — Interact with page elements using CSS selectors
- **fill_form** — Fill entire forms with a single command
- **upload_file** — Upload files to input elements
- **press_key** — Simulate keyboard events
- **handle_dialog** — Accept or dismiss browser dialogs

#### Navigation & Pages
- **navigate** — Go to any URL
- **new_page**, **close_page**, **select_page**, **list_pages** — Manage browser tabs
- **wait_for** — Wait for selectors, navigation, or timeouts
- **take_screenshot** — Capture full-page or element screenshots
- **take_snapshot** — Get accessible page structure (DOM snapshot)

#### Network & Console
- **list_network_requests** — Monitor all HTTP requests and responses
- **get_network_request** — Inspect individual request details
- **list_console_messages** — Read browser console output
- **get_console_message** — Get specific console messages

#### Performance
- **performance_start_trace** / **performance_stop_trace** — Record Chrome performance traces
- **performance_analyze_insight** — Get AI-friendly performance analysis
- **lighthouse_audit** — Run full Lighthouse audits

#### Device Emulation
- **emulate** — Simulate mobile devices, screen sizes, and network conditions
- **resize_page** — Change viewport dimensions

### Requirements
- Node.js v20.19 or newer LTS
- Chrome (current stable or newer)
- npm

### Slim Mode vs Full Mode

| Feature | Full Mode (default) | Slim Mode |
|---------|-------------------|-----------|
| Tools | 29 | ~12 core tools |
| Token usage | Higher | 47% less |
| Best for | Full debugging & analysis | Basic automation & testing |

### FAQ

**Q: What is Chrome DevTools MCP?**
A: An MCP server that gives AI coding agents (Claude, Cursor, Copilot) access to Chrome DevTools for browser automation, debugging, and performance analysis. It uses Puppeteer under the hood and exposes 29 tools via the Model Context Protocol.

**Q: Is Chrome DevTools MCP free?**
A: Yes, it's fully open-source under the MIT license.

**Q: How do I install Chrome DevTools MCP?**
A: Add `{"mcpServers": {"chrome-devtools": {"command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"]}}}` to your `.mcp.json` and restart your AI tool.

---

## Source & Thanks

> Created by [ChromeDevTools](https://github.com/ChromeDevTools). Licensed under MIT.
>
> [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) — ⭐ 33,100+

Thank you to the Chrome DevTools team for building this essential bridge between AI agents and browser debugging.

---

<!-- ZH -->


## Quick Use

Add the following to your `.mcp.json` (or Claude Desktop / Cursor MCP config):

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

Slim mode (fewer tools, lower token usage):

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

Restart your AI tool to use it.

---

## Intro

Chrome DevTools MCP is the official MCP server that lets your AI coding assistant control and inspect a live Chrome browser. With 33,100+ GitHub stars and 29 built-in tools, it supports Puppeteer-based browser automation, network debugging, console analysis, and performance tracing — usable across 15+ AI tools including Claude Code, Cursor, Copilot, VS Code, and more.

Best for developers who need AI-assisted browser testing, debugging, and performance analysis.
Compatible tools: Claude Code, Cursor, GitHub Copilot, VS Code, Cline, Gemini CLI, JetBrains AI, Windsurf, etc.
Setup time: under 1 minute.

---

## Chrome DevTools MCP — Full Feature Reference

### Core Capabilities

Chrome DevTools MCP provides 29 tools across 6 categories:

- **Input & Automation**: click, type, hover, select, drag, fill_form, upload_file, press_key, handle_dialog
- **Navigation & Page Management**: navigate, new_page, close_page, select_page, list_pages, wait_for, take_screenshot, take_snapshot
- **Network & Console**: list_network_requests, get_network_request, list_console_messages, get_console_message
- **Performance Analysis**: performance_start_trace, performance_stop_trace, performance_analyze_insight, lighthouse_audit
- **Device Emulation**: emulate, resize_page

### FAQ

**Q: What is Chrome DevTools MCP?**
A: An MCP server that gives AI coding assistants (Claude, Cursor, Copilot) access to Chrome DevTools for browser automation, debugging, and performance analysis.

**Q: Is it free?**
A: Yes, fully free and open source under the MIT license.

---

## Source & Thanks

> Created by [ChromeDevTools](https://github.com/ChromeDevTools). Licensed under MIT.
>
> [chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) — ⭐ 33,100+


---
Source: https://tokrepo.com/en/workflows/chrome-devtools-mcp-browser-debugging-ai-agents-17f46368
Author: MCP Hub