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):

{
  "message_id": "om_x100b53152690aca4c4ca4bdd7f79d18",
  "sender_id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "sender": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "timestamp": "Tue 2026-03-24 12:43 GMT+8"
}

Sender (untrusted metadata):

{
  "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 - 获取页面快照

安装与配置

基础配置

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

Slim 模式（仅基础功能）

{
  "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

# 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 禁用。

使用场景示例

# 检查网站性能
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 的配置非常简单：

{
  "$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):

{
  "message_id": "om_x100b5315cbffd4a0c3185d1484e87db",
  "sender_id": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "sender": "ou_0f0ec7be524abf58bb6ad900b1f4647e",
  "timestamp": "Tue 2026-03-24 12:51 GMT+8"
}

Sender (untrusted metadata):

{
  "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 中添加规则：

## 默认工具

当需要以下操作时，优先使用 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 状态：

opencode mcp list

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

---

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