Add new memory files for OpenClaw and Chrome DevTools MCP sessions

- Created memory file for OpenClaw version check with details on the latest version and update instructions. - Added memory file for Chrome DevTools MCP session, summarizing its features, installation, and usage examples. - Included memory file for OpenClaw update details, outlining the latest changes and improvements. - Added memory file for OpenCode version check, detailing the latest version and its features.
2026-03-24 15:52:34 +08:00
parent e276ac9182
commit 8e4ae93fe5
9 changed files with 2608 additions and 0 deletions
--- a/memory/2026-03-24-chrome-devtools-mcp.md
+++ b/memory/2026-03-24-chrome-devtools-mcp.md
@@ -0,0 +1,371 @@
+# 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 会自动选择并使用合适的工具。就像说"帮我写个函数"一样自然。