# 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 -->

## 快速使用

将以下配置添加到你的 `.mcp.json`（或 Claude Desktop / Cursor 的 MCP 配置）：

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

轻量模式（工具更少，token 消耗更低）：

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

重启 AI 工具即可使用。

---

## 简介

Chrome DevTools MCP 是一个官方 MCP 服务器，让你的 AI 编程助手能够控制和检查实时 Chrome 浏览器。拥有 33,100+ GitHub Star 和 29 个内置工具，支持基于 Puppeteer 的浏览器自动化、网络调试、控制台分析和性能追踪——可在 Claude Code、Cursor、Copilot、VS Code 等 15+ 个 AI 工具中使用。

适合人群：需要 AI 辅助浏览器测试、调试和性能分析的开发者。
兼容工具：Claude Code、Cursor、GitHub Copilot、VS Code、Cline、Gemini CLI、JetBrains AI、Windsurf 等。
安装时间：1 分钟以内。

---

## Chrome DevTools MCP — 完整功能参考

### 核心能力

Chrome DevTools MCP 提供 29 个工具，分为 6 大类：

- **输入与自动化**：click、type、hover、select、drag、fill_form、upload_file、press_key、handle_dialog
- **导航与页面管理**：navigate、new_page、close_page、select_page、list_pages、wait_for、take_screenshot、take_snapshot
- **网络与控制台**：list_network_requests、get_network_request、list_console_messages、get_console_message
- **性能分析**：performance_start_trace、performance_stop_trace、performance_analyze_insight、lighthouse_audit
- **设备模拟**：emulate、resize_page

### FAQ

**Q: Chrome DevTools MCP 是什么？**
A: 一个 MCP 服务器，让 AI 编程助手（Claude、Cursor、Copilot）能够访问 Chrome DevTools 进行浏览器自动化、调试和性能分析。

**Q: 免费吗？**
A: 完全免费开源，MIT 许可证。

---

## 来源与感谢

> 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/17f46368-d971-4227-ab65-f5f183e7dedc
Author: TokRepo精选