阿超 > chrome-devtools-mcp

chrome-devtools-mcp

2026-02-14

前端

你热爱生命吗?那幺别浪费时间，因为时间是组成生命的材料——富兰克林

让你的 AI 助手真正“看见”浏览器：Chrome DevTools MCP 深度介绍与上手指南

如果你正在用 Gemini、Claude、Cursor 或 Copilot 这样的编码助手进行自动化、调试或性能分析，你很快就会遇到一个难题：如何让 AI 真正地“连接”到一个真实的 Chrome 浏览器，稳定地执行操作、读取页面状态，并且跑出可信的性能结果？

来自 ChromeDevTools/chrome-devtools-mcp 的 Chrome DevTools MCP（Model Context Protocol）服务器，正是为此而生。它以 MCP 服务器的形式，向你的 AI 编码助手暴露 Chrome DevTools 的能力：自动化操作、网络与控制台调试、截图与快照、性能追踪与洞察……并且由 Puppeteer 提供可等待、可重试的可靠自动化基底。

仓库简介（Description）：Chrome DevTools for coding agents
主语言：TypeScript
许可协议：Apache-2.0
NPM 包地址：chrome-devtools-mcp

下面，我将用实战视角，把它的核心能力、安装配置、连接方式、隐私与数据收集说明、��及实际案例，一次讲清，并给出可复制的片段，助你快速落地。

它是什么：把 Chrome DevTools 变成 AI 助手的“工具箱”

Chrome DevTools MCP 是一个 MCP 服务器，运行后你的编码助手就可以通过标准化的“工具”调用协议，去控制和检查真实的 Chrome 浏览器实例。核心能力包括：

  • 性能洞察：利用 DevTools 记录 trace，并给出可操作的性能分析（同时可把 URL 送到 CrUX 获取实测数据，默认开启，可关闭）
  • 高级调试：查看网络请求、拍截图与快照、读取控制台（带源码映射的堆栈）
  • 可靠自动化：通过 Puppeteer 执行动作，并自动等待页面稳定结果（减少“点了按钮但页面没准备好”的尴尬）

官方在 README 中清晰列出了工具分类（输入自动化、导航、仿真、性能、网络、调试），你可以在编码助手里直接调用这些工具来完成任务。

快速开始：在你的 MCP 客户端里启用服务器

最简单的方式，是在你的 MCP 客户端（例如 VS Code Copilot Chat、Cursor、Gemini CLI 等）配置 server，使用 npx 启动最新版本。

1
2
3
4
5
6
7
8
9
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
1
2
3
4

如果你使用 Copilot CLI，也有原生命令入口：

```markdown

copilot

/mcp add

配置字段

Server name: chrome-devtools

Server Type: [1] Local

Command: npx -y chrome-devtools-mcp@latest

1
2
3
4
5
```

运行后，你可以用一个“首个提示词”自检：

```markdown

Check the performance of https://developers.chrome.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
```

MCP 客户端应当自动打开浏览器并记录性能追踪。

---

## 连接方式：启动新浏览器 vs 连接到现有浏览器

Chrome DevTools MCP 有两种典型的连接模式：

- 默认：它会启动一个新的 Chrome 实例（带独立用户数据目录），适合隔离环境
- 连接到已有的 Chrome：在以下场景更适合
  - 手动测试与 AI 驱动测试需要共享同一应用状态
  - 某些网站对 WebDriver 登录有限制
  - LLM 在沙箱中，而浏览器需要在外部运行

### 自动连接（Chrome 144+）

打开 Chrome 的远程调试（chrome://inspect/#remote-debugging），允许连接后，在 MCP server 启动时加上 `--autoConnect`：

```markdown
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
1
2
3
4
5
6
7
8

### 手动连接（远程调试端口）

先用 `--remote-debugging-port` 启动 Chrome（注意使用非默认用户数据目录），再在 MCP server 里通过 `--browser-url` 连接：

```markdown
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

连接端的配置示例（自定义 WebSocket + 认证头）：

```markdown
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

## 服务器配置：常用参数与组合

多数场景下，你只需要默认配置就能工作；当你需要更精细地控制行为（例如 headless、隔离配置、选择浏览器渠道），可以这样：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}
1
2
3
4
5
6

若你希望关闭使用统计（默认开启），可在 args 中添加：

```markdown
```json
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

一些你会经常用到的开关与含义（来源于 README 的“Configuration”章节）：

- `--autoConnect` 自动连接到正在运行的 Chrome（需 M144）
- `--browser-url` 指向远程调试端口，如 `http://127.0.0.1:9222`
- `--wsEndpoint` 与 `--wsHeaders` 使用 WebSocket 端点与自定义头（例如认证）
- `--headless` 是否无界面运行
- `--channel` 选择 Chrome 渠道：stable/canary/beta/dev
- `--isolated` 使用临时用户数据目录，关闭浏览器后自动清理
- `--performance-crux` 是否把 URL 发送到 CrUX API 获取实测数据（默认 true）
- `--usage-statistics` 是否开启使用统计（默认 true）

---

## 工具能力一览：能让 AI 做哪些事

官方工具清单覆盖自动化、导航、仿真、性能、网络与调试等关键场景。以下是缩略版分类和代表性工具名称：

- 输入自动化：`click`、`drag`、`fill`、`fill_form`、`press_key`、`upload_file` 等
- 导航自动化：`navigate_page`、`new_page`、`wait_for`、`list_pages`、`select_page` 等
- 仿真：`emulate`（例如移动设备环境）、`resize_page`
- 性能：`performance_start_trace`、`performance_stop_trace`、`performance_analyze_insight`
- 网络：`list_network_requests`、`get_network_request`
- 调试：`evaluate_script`、`take_screenshot`、`take_snapshot`、`list_console_messages` 等

这些工具不是给你手写脚本用的，而是被你的编码助手在“理解意图”的基础上调用。例如，你给出“检查某个页面的性能”，助手会自动选择启动浏览器、导航、录制 trace、分析、返回洞察与建议。

---

## 实战工作流：从性能分析到调试排障

下面是几个你可能会用到的“对话级”工作流示例，帮助你在真实团队使用中形成习惯。

1) 性能分析
- 在 MCP 客户端中输入：
  - “检查 https://developers.chrome.com 的性能”
- 服务器会：打开页面、录制性能 trace，并返回洞察（如长任务、布局抖动、阻塞渲染资源等）
- 若你开启 CrUX，对应 URL 的实测数据将被合并展示（可用 `--no-performance-crux` 关闭）
2) 网络问题排查
- 让助手“记录并列出页面的网络请求，找到返回 4xx/5xx 的项”
- 它会调用 `list_network_requests` 并以结构化形式返回请求与响应信息
- 可让助手进一步取某个请求详情：`get_network_request`
3) 交互与截图
- 提示助手“打开页面并点击登录按钮，等待跳转后截图”
- 自动化工具会点击并等待页面稳定，再调用 `take_screenshot` 返回图像
4) 控制台错误定位
- 让助手“列出控制台错误并给出堆栈”
- 工具会返回带源码映射的堆栈信息，便于快速定位前端构建产物对应源代码

---

## 隐私与数据收集：明确边界与开关

- 浏览器内容暴露给 MCP 客户端：MCP 客户端能够检查、调试、修改浏览器或 DevTools 中的任何数据。不要在受控浏览器中打开你不希望共享的敏感内容（例如公司后台、私人社交账号等）。
- 使用统计（Usage statistics）：Google 会收集工具调用成功率、延迟、环境信息，用于提升稳定性与性能。默认开启；你可以通过 `--no-usage-statistics` 关闭，或设置环境变量 `CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS` 或在 CI 环境下禁用。数据按 [Google 隐私政策](https://policies.google.com/privacy) 处理，与 Chrome 浏览器的使用统计相互独立。
- 性能数据的 CrUX 对接：性能工具可能会把 trace 中的 URL 发送到 CrUX API，以获取真实用户体验数据并与实验室环境数据并列展示。可通过 `--no-performance-crux` 关闭。

---

## 环境要求与平台兼容

- Node.js v20.19 或更高的当前最新维护 LTS
- Chrome 稳定版或更新
- npm

如果你在 Windows 11 或沙箱/虚拟机等环境中使用，可以参考 README 中的专门说明配置可执行路径、启动超时、以及远程调试端口的端到端连接方案。

---

## 常见客户端：一键安装与配置路线

README 针对众多客户端给出了一键安装或手动配置方法，例如：

- VS Code Copilot Chat / VS Code Insiders
- Cursor
- Copilot CLI
- Gemini CLI 与 Code Assist
- JetBrains AI Assistant 与 Junie
- Warp、Windsurf、Katalon StudioAssist（通过 MCP Proxy）
- Antigravity、Amp、Codex、Factory CLI、OpenCode、Qoder

多数情况下，你只需把上文“快速开始”的 JSON 塞进对应客户端的 MCP 配置页面或 CLI 命令，就能把“chrome-devtools”这个 server挂载上去。

---

## 给团队的使用建议

- 把“自动连接到运行中的 Chrome”用于日常调试与回归场景，保持应用登录态、缓存、IndexedDB 等状态一致，减少重复登录与初始化成本
- 在 CI 或自动化环境中优先用“隔离模式 + headless”，避免环境残留导致 flakiness
- 在隐私上，设定组织级约束：受控浏览器中不访问敏感站点；含认证的 WebSocket 连接要通过内网或安全隧道
- 为性能分析建立固定提示模板，让团队成员的分析结果更稳定、可比对

---

## 结语：让 AI 助手“接上电”的关键一公里

Chrome DevTools MCP 把浏览器的自动化、调试与性能能力，以标准化工具的形式“交到”编码助手的手里。它不是某个框架的附属，也不是一套捆绑测试的脚本，而是一个通用的、面向多客户端的能力���。在真实工程环境里，它能显著缩短“从问题到结论”的路径，让你的 AI 助手从“Chat”走向“Action”。

如果你正尝试把编码助手用于前端开发、Web 自动化或性能工程，把这台 MCP 服务器启起来，可能就是最重要的第一步。

下面附上一些来自 README 的原始片段，便于你在自己的环境中直接复制使用与参考。

---

### 关闭使用统计（原文片段）

```markdown
```json
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]
1
2
3
4

### 首个提示词（原文片段）

```markdown

Check the performance of https://developers.chrome.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```

### 自动连接配置（原文片段）

```markdown
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

### WebSocket 端点与自定义头（原文片段）

```markdown
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}
1
2
3
4
5
6

### 启动 Chrome（macOS，原文片段）

```markdown
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

祝你把 AI 助手真正“接上电”，让浏览器不再是黑箱。