workspace-main/memory/2026-03-24-chrome-devtools-mcp.md

# Session: 2026-03-24 05:32:26 UTC

- **Session Key**: agent:main:main
- **Session ID**: 16a62599-cfd3-461c-a7fc-e825889632d2
- **Source**: feishu

## Conversation Summary

assistant: ✅ New session started · model: zai/glm-4.7
user: System: [2026-03-24 12:43:40 GMT+8] Feishu[tertiary] DM | ou_0f0ec7be524abf58bb6ad900b1f4647e [msg:om_x100b531529741cb4c106ca81bfca024]

A new session was started via /new or /reset. Run your Session Startup sequence - read the required files before responding to the user. Then greet the user in your configured persona, if one is provided. Be yourself - use your defined voice, mannerisms, and mood. Keep it to 1-3 sentences and ask what they want to do. If the runtime model differs from default_model in the system prompt, mention the default model. Do not mention internal steps, files, tools, or reasoning.
Current time: Tuesday, March 24th, 2026 — 12:43 PM (Asia/Shanghai) / 2026-03-24 04:43 UTC
assistant: ⚡ 嘿，小卡在线了。今天要搞点什么？
user: System: [2026-03-24 12:43:58 GMT+8] Feishu[tertiary] DM | ou_0f0ec7be524abf58bb6ad900b1f4647e [msg:om_x100b53152690aca4c4ca4bdd7f79d18]

Conversation info (untrusted metadata):
```json
{
  "message_id": "om_x100b53152690aca4c4ca4bdd7f79d18",
  "sender_id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "sender": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "timestamp": "Tue 2026-03-24 12:43 GMT+8"
}
```

Sender (untrusted metadata):
```json
{
  "label": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "name": "ou_0f0ec7be524abf58bb6ad900b1f4647e"
}
```

介绍一下这个项目`https://github.com/ChromeDevTools/chrome-devtools-mcp`
assistant: **Chrome DevTools MCP** 是由 Google Chrome DevTools 团队开发的 MCP（Model Context Protocol）服务器项目，让 AI 编码助手（如 Gemini、Claude、Cursor、Copilot 等）能够控制和检查实时 Chrome 浏览器。

## 核心功能

### 1. 性能分析
- 使用 Chrome DevTools 记录性能追踪（trace）
- 提取可操作的性能洞察和建议
- 支持获取真实用户体验数据（通过 CrUX API）

### 2. 浏览器调试
- 分析网络请求
- 截取屏幕截图
- 检查浏览器控制台消息（支持 source-mapped 堆栈跟踪）
- 运行 Lighthouse 审计
- 执行 JavaScript 脚本

### 3. 可靠的自动化
- 基于 Puppeteer 实现浏览器自动化
- 自动等待操作结果完成
- 支持点击、拖拽、填写表单、上传文件等操作

## 技术架构

**MCP 协议**: 这是一个标准化协议，允许 AI 工具与外部服务/数据源进行安全、结构化的交互。

**依赖技术**:
- **Puppeteer**: Headless Chrome Node API，用于浏览器控制
- **Chrome DevTools Protocol**: 与 Chrome 浏览器的底层通信协议
- **Node.js v20.19+**: 运行时环境

## 工具分类

项目提供 **29 个工具**，分为 6 大类别：

### 输入自动化（9 个）
- `click` - 点击元素
- `drag` - 拖拽元素
- `fill` - 填充单个字段
- `fill_form` - 填写整个表单
- `handle_dialog` - 处理对话框
- `hover` - 悬停元素
- `press_key` - 按键
- `type_text` - 输入文本
- `upload_file` - 上传文件

### 导航自动化（6 个）
- `close_page` - 关闭页面
- `list_pages` - 列出所有页面
- `navigate_page` - 导航到 URL
- `new_page` - 新建标签页
- `select_page` - 选择页面
- `wait_for` - 等待条件

### 模拟（2 个）
- `emulate` - 模拟设备/网络条件
- `resize_page` - 调整视口大小

### 性能（4 个）
- `performance_analyze_insight` - 分析性能洞察
- `performance_start_trace` - 开始性能追踪
- `performance_stop_trace` - 停止性能追踪
- `take_memory_snapshot` - 内存快照

### 网络（2 个）
- `get_network_request` - 获取网络请求详情
- `list_network_requests` - 列出所有网络请求

### 调试（6 个）
- `evaluate_script` - 执行 JavaScript
- `get_console_message` - 获取控制台消息
- `lighthouse_audit` - Lighthouse 审计
- `list_console_messages` - 列出控制台消息
- `take_screenshot` - 截图
- `take_snapshot` - 获取页面快照

## 安装与配置

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

### Slim 模式（仅基础功能）
```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}
```

### 支持的平台
该项目支持几乎所有主流的 AI 编码平台和 IDE：
- **Claude Code**（支持 MCP + Skills 插件）
- **Cursor**、**Copilot**、**Gemini CLI**
- **OpenCode**（你的项目！）
- **VS Code**、**JetBrains**、**Antigravity**
- **Amp**、**Cline**、**Codex**、**Kiro**、**Warp** 等

## 连接模式

### 1. 默认模式（自动启动 Chrome）
- MCP 服务器启动新的 Chrome 实例
- 使用独立的用户数据目录
- 每次运行状态不保留

### 2. 自动连接模式（Chrome 144+）
- 连接到你正在使用的 Chrome 浏览器
- 保持登录状态和应用状态
- 适合需要在人工和自动化测试之间切换的场景
- 配置：`--autoConnect`

### 3. 远程调试端口模式
- 连接到通过远程调试端口运行的 Chrome 实例
- 适合沙箱环境（如 Docker、VM）
- 配置：`--browser-url=http://127.0.0.1:9222`

### 启动带远程调试的 Chrome
```bash
# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-profile-stable

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

# Windows
chrome.exe --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-profile-stable
```

## 重要配置选项

| 选项 | 说明 |
|--------|------|
| `--headless` | 无头模式运行（无 UI） |
| `--isolated` | 使用临时用户数据目录（关闭后自动清理） |
| `--channel` | 指定 Chrome 通道（stable/beta/dev/canary） |
| `--user-data-dir` | 自定义用户数据目录路径 |
| `--slim` | 仅暴露 3 个基础工具（导航、脚本执行、截图） |
| `--categoryPerformance=false` | 禁用性能相关工具 |
| `--categoryNetwork=false` | 禁用网络相关工具 |
| `--usageStatistics=false` | 禁用 Google 使用统计收集 |

## 隐私与数据收集

⚠️ **注意事项**:

1. **浏览器内容暴露**: MCP 服务器会将浏览器实例的内容暴露给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。**避免在浏览器中分享敏感或个人信息**。

2. **Google 使用统计**: 默认启用收集使用统计（工具调用成功率、延迟、环境信息）以改进可靠性和性能。可以通过 `--no-usage-statistics` 禁用。

3. **性能数据**: 性能工具可能会将 trace URL 发送到 Google CrUX API 以获取真实用户体验数据。可以通过 `--no-performance-crux` 禁用。

## 使用场景示例

```bash
# 检查网站性能
Check the performance of https://example.com

# 自动化表单填写
Fill out the contact form on https://example.com/contact

# 截图并分析
Take a screenshot of https://example.com and analyze the layout

# 调试网络问题
List all network requests on https://example.com and identify any failed requests
```

## 与 OpenCode 的集成

根据 README，OpenCode 的配置非常简单：

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

将此配置添加到 `~/.config/opencode/opencode.json` 即可。

---

**总结**: 这是一个非常强大的项目，将 Chrome DevTools 的完整能力通过 MCP 协议开放给 AI 助手，无论是性能分析、自动化测试还是调试都非常实用。对于 OpenCode 这样的 AI 编码助手来说，能够直接控制浏览器和访问 DevTools 功能是巨大的增值。
user: System: [2026-03-24 12:51:31 GMT+8] Feishu[tertiary] DM | ou_0f0ec7be524abf58bb6ad900b1f4647e [msg:om_x100b5315cbffd4a0c3185d1484e87db]

Conversation info (untrusted metadata):
```json
{
  "message_id": "om_x100b5315cbffd4a0c3185d1484e87db",
  "sender_id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "sender": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "timestamp": "Tue 2026-03-24 12:51 GMT+8"
}
```

Sender (untrusted metadata):
```json
{
  "label": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "name": "ou_0f0ec7be524abf58bb6ad900b1f4647e"
}
```

已opencode为例，配置好了，如何让AI代理调用呢？
assistant: 让我查看一下 OpenCode 的 MCP 使用方式。
assistant: 配置好之后，**AI 会自动识别并调用**，不需要额外的步骤。让我解释一下具体用法：

## 工作原理

配置好 MCP 后，OpenCode 会：
1. 启动时自动加载所有已配置的 MCP 服务器
2. 将 MCP 工具暴露给 LLM，和内置工具一样可用
3. 当你提到相关需求时，AI 会自动选择合适的 MCP 工具

## 如何触发 AI 调用

### 方法 1：直接描述需求（推荐）

自然地描述你的需求，AI 会自动判断是否需要使用 Chrome DevTools 工具：

```
# 示例 1：性能分析
帮我分析一下 https://example.com 的性能表现

# 示例 2：自动化操作
帮我登录到 https://github.com 并截图看看首页

# 示例 3：调试网络
检查 https://example.com 的网络请求，看看有没有失败的请求

# 示例 4：表单填写
帮我填写这个注册表单，然后提交

# 示例 5：控制台检查
帮我查看这个页面有没有报错信息
```

### 方法 2：明确指定（可选）

如果 AI 没有自动使用，可以明确提示：

```
# 使用截图工具
帮我用 chrome-devtools 截取 https://example.com 的截图

# 使用性能追踪
用 chrome-devtools 记录 https://example.com 的性能追踪

# 使用导航工具
用 chrome-devtools 打开 https://example.com 并等待加载完成
```

### 方法 3：在 AGENTS.md 中配置（高级）

如果你想让特定 Agent 默认使用某些 MCP 工具，可以在 `AGENTS.md` 中添加规则：

```markdown
## 默认工具

当需要以下操作时，优先使用 chrome-devtools MCP：
- 浏览器自动化（点击、填写表单、导航）
- 性能分析和追踪
- 网络请求检查
- 页面截图
- 控制台调试
```

## Chrome DevTools MCP 可用的工具类别

配置后，AI 可以使用这些工具：

| 类别 | 工具示例 | 用途 |
|--------|----------|------|
| **输入自动化** | `click`, `fill`, `type_text` | 点击、填写表单、输入文本 |
| **导航** | `navigate_page`, `wait_for` | 打开页面、等待加载 |
| **截图/快照** | `take_screenshot`, `take_snapshot` | 截图、获取页面快照 |
| **性能** | `performance_start_trace`, `performance_analyze_insight` | 性能追踪、分析 |
| **网络** | `list_network_requests` | 检查网络请求 |
| **调试** | `evaluate_script`, `list_console_messages` | 执行 JS、查看控制台 |

## 实际使用示例

```
# 场景 1：测试网站功能
帮我打开 https://mysite.com，点击"登录"按钮，填写用户名和密码，然后截图

# 场景 2：性能优化
帮我分析 https://example.com 的性能，找出加载慢的原因

# 场景 3：调试问题
我遇到一个 bug，帮我检查 https://example.com 的控制台有没有报错

# 场景 4：自动化测试
帮我编写一个自动化脚本：打开 -> 填写表单 -> 提交 -> 验证结果
```

## 注意事项

1. **首次使用时**，Chrome DevTools MCP 会自动启动浏览器实例
2. **默认模式**下，会使用独立的用户数据目录（不影响你日常使用的 Chrome）
3. **需要登录** 的网站，可以考虑使用 `--autoConnect` 模式连接到你的 Chrome
4. **大量工具**会增加上下文消耗，如果不用可以禁用某些类别的工具

## 验证配置是否生效

运行这个命令检查 MCP 状态：

```bash
opencode mcp list
```

你应该能看到 `chrome-devtools` 在列表中。

---

简单说：**配置好之后，直接说你的需求就行**，AI 会自动选择并使用合适的工具。就像说"帮我写个函数"一样自然。