|
| 1 | +# OpenCode Chrome Debugger 配置指南 |
| 2 | + |
| 3 | +本文档说明如何在一个全新的 OpenCode 实例中配置 Chrome JavaScript 断点调试能力。 |
| 4 | + |
| 5 | +## 前置条件 |
| 6 | + |
| 7 | +- Node.js >= 20 |
| 8 | +- Google Chrome 浏览器 |
| 9 | +- OpenCode + oh-my-opencode 插件 |
| 10 | +- Git |
| 11 | + |
| 12 | +## 架构概览 |
| 13 | + |
| 14 | +``` |
| 15 | +OpenCode (AI) |
| 16 | + └─ skill: chrome-automation |
| 17 | + └─ mcp.json → chrome-devtools MCP server (本地 fork) |
| 18 | + └─ CDP (Chrome DevTools Protocol) |
| 19 | + └─ Chrome (--remote-debugging-port=9222) |
| 20 | +``` |
| 21 | + |
| 22 | +AI 通过 `skill_mcp(mcp_name="chrome-devtools", tool_name="...")` 调用 MCP 工具, |
| 23 | +MCP server 通过 CDP 协议与 Chrome 通信,实现断点调试。 |
| 24 | + |
| 25 | +## 第一步:克隆 Fork 仓库 |
| 26 | + |
| 27 | +```bash |
| 28 | +git clone https://github.com/soul-cat/chrome-devtools-mcp.git ~/chrome-devtools-mcp |
| 29 | +cd ~/chrome-devtools-mcp |
| 30 | +git checkout feat/debugger-tools |
| 31 | +npm install |
| 32 | +``` |
| 33 | + |
| 34 | +## 第二步:构建项目 |
| 35 | + |
| 36 | +```bash |
| 37 | +# 编译 TypeScript |
| 38 | +npx tsc |
| 39 | + |
| 40 | +# 运行 post-build(生成 mock 文件) |
| 41 | +# Node >= 22 用: |
| 42 | +node --experimental-strip-types scripts/post-build.ts |
| 43 | +# Node 20 用: |
| 44 | +npx tsx scripts/post-build.ts |
| 45 | +``` |
| 46 | + |
| 47 | +验证构建成功: |
| 48 | +```bash |
| 49 | +ls build/src/tools/debugger.js # 应该存在 |
| 50 | +``` |
| 51 | +## 第三步:创建启动脚本 |
| 52 | +在仓库根目录创建 `run-mcp.sh`: |
| 53 | +```bash |
| 54 | +#!/bin/bash |
| 55 | +cd ~/chrome-devtools-mcp |
| 56 | +exec node build/src/index.js "$@" |
| 57 | +``` |
| 58 | +```bash |
| 59 | +chmod +x ~/chrome-devtools-mcp/run-mcp.sh |
| 60 | +``` |
| 61 | +**为什么需要 wrapper 脚本?** MCP server 必须从仓库根目录启动,否则 `node_modules` 无法正确解析。 |
| 62 | + |
| 63 | +## 第四步:配置 OpenCode Skill |
| 64 | + |
| 65 | +### 4.1 创建 skill 目录 |
| 66 | +```bash |
| 67 | +mkdir -p ~/.claude/skills/chrome-automation |
| 68 | +``` |
| 69 | + |
| 70 | +### 4.2 创建 `mcp.json` |
| 71 | +在 skill 目录下创建 `~/.claude/skills/chrome-automation/mcp.json`: |
| 72 | +```json |
| 73 | +{ |
| 74 | + "chrome-devtools": { |
| 75 | + "command": "/Users/你的用户名/chrome-devtools-mcp/run-mcp.sh", |
| 76 | + "args": ["--browser-url=http://127.0.0.1:9222"] |
| 77 | + } |
| 78 | +} |
| 79 | +``` |
| 80 | +> **注意**:`command` 路径必须是绝对路径,替换为你的实际用户名。 |
| 81 | +### 4.3 创建 `SKILL.md` |
| 82 | +在 skill 目录下创建 `~/.claude/skills/chrome-automation/SKILL.md`: |
| 83 | +```markdown |
| 84 | +--- |
| 85 | +name: chrome-automation |
| 86 | +description: 此skill用于启动Chrome浏览器并建立MCP连接,支持浏览器自动化和JavaScript断点调试。 |
| 87 | +version: 2.0.0 |
| 88 | +--- |
| 89 | +# Chrome 自动化 + JavaScript 调试 |
| 90 | + |
| 91 | +**重要**:任何浏览器相关操作前,必须先执行此流程! |
| 92 | + |
| 93 | +## 启动 Chrome |
| 94 | +```bash |
| 95 | +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-debug-profile" & |
| 96 | +``` |
| 97 | + |
| 98 | +## 验证端口 |
| 99 | +```bash |
| 100 | +curl -s http://127.0.0.1:9222/json/version |
| 101 | +``` |
| 102 | + |
| 103 | +## 可用的 Debugger 工具(13个) |
| 104 | +所有工具通过 `skill_mcp(mcp_name="chrome-devtools", tool_name="...")` 调用。 |
| 105 | + |
| 106 | +| 工具名 | 说明 | 参数 | |
| 107 | +|--------|------|------| |
| 108 | +| debugger_enable | 启用调试器(必须先调用) | 无 | |
| 109 | +| debugger_disable | 禁用调试器 | 无 | |
| 110 | +| set_breakpoint | 设置断点 | url, lineNumber, columnNumber?, condition? | |
| 111 | +| remove_breakpoint | 移除断点 | breakpointId | |
| 112 | +| list_breakpoints | 列出所有断点 | 无 | |
| 113 | +| debugger_resume | 恢复执行 | 无 | |
| 114 | +| debugger_step_over | 单步跳过 | 无 | |
| 115 | +| debugger_step_into | 单步进入 | 无 | |
| 116 | +| debugger_step_out | 单步跳出 | 无 | |
| 117 | +| get_paused_state | 获取暂停状态 | 无 | |
| 118 | +| evaluate_on_call_frame | 在断点处求值 | callFrameId, expression | |
| 119 | +| list_scripts | 列出页面脚本 | filter? | |
| 120 | +| get_script_source | 获取脚本源码 | scriptId | |
| 121 | +``` |
| 122 | + |
| 123 | +## 第五步:验证 |
| 124 | + |
| 125 | +### 5.1 启动 Chrome |
| 126 | +```bash |
| 127 | +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-debug-profile" & |
| 128 | +``` |
| 129 | + |
| 130 | +### 5.2 重启 OpenCode |
| 131 | +修改 skill 文件后必须重启 OpenCode 才能生效。 |
| 132 | + |
| 133 | +### 5.3 测试 MCP 连接 |
| 134 | +在 OpenCode 中执行: |
| 135 | +``` |
| 136 | +skill_mcp(mcp_name="chrome-devtools", tool_name="debugger_enable") |
| 137 | +``` |
| 138 | +预期返回:`Debugger enabled for the current page.` |
| 139 | + |
| 140 | +## 故障排查 |
| 141 | + |
| 142 | +### MCP server not found |
| 143 | +- 确认 `mcp.json` 在 `~/.claude/skills/chrome-automation/` 目录下 |
| 144 | +- 确认 JSON 格式正确,`command` 是绝对路径 |
| 145 | +- 重启 OpenCode |
| 146 | + |
| 147 | +### Connection closed |
| 148 | +- 确认 Chrome 已启动且端口 9222 可访问:`curl -s http://127.0.0.1:9222/json/version` |
| 149 | +- 确认 `run-mcp.sh` 可执行:`chmod +x run-mcp.sh` |
| 150 | +- 手动测试 MCP server 启动:`./run-mcp.sh --browser-url=http://127.0.0.1:9222` |
| 151 | +### ERR_MODULE_NOT_FOUND |
| 152 | +- 确认已运行 `npm install` |
| 153 | +- 确认已运行 post-build 脚本(生成 `build/node_modules/` 下的 mock 文件) |
| 154 | +- 确认 `run-mcp.sh` 中的 `cd` 路径指向仓库根目录 |
| 155 | + |
| 156 | +## 关键机制说明 |
| 157 | + |
| 158 | +### 为什么不能直接用 `npx chrome-devtools-mcp@latest`? |
| 159 | +npm 官方包不包含 debugger 工具。必须使用我们的 fork(`feat/debugger-tools` 分支)。 |
| 160 | + |
| 161 | +### Skill MCP 加载机制 |
| 162 | +oh-my-opencode 的 `skill_mcp` 工具只能访问 **skill 内嵌的 MCP**,不能访问 `opencode.json` 中配置的 MCP。 |
| 163 | +Skill 内嵌 MCP 有两种方式: |
| 164 | +1. skill 目录下放 `mcp.json` 文件(推荐) |
| 165 | +2. SKILL.md frontmatter 中添加 `mcp:` 字段 |
| 166 | +### mcp.json 格式 |
| 167 | +支持两种格式: |
| 168 | +```json |
| 169 | +// 格式1:直接定义(推荐) |
| 170 | +{ |
| 171 | + "server-name": { |
| 172 | + "command": "/path/to/executable", |
| 173 | + "args": ["--arg1", "--arg2"] |
| 174 | + } |
| 175 | +} |
| 176 | +// 格式2:mcpServers 包装 |
| 177 | +{ |
| 178 | + "mcpServers": { |
| 179 | + "server-name": { |
| 180 | + "command": "/path/to/executable", |
| 181 | + "args": ["--arg1"] |
| 182 | + } |
| 183 | + } |
| 184 | +} |
| 185 | +``` |
| 186 | +## 文件结构总览 |
| 187 | +``` |
| 188 | +~/.claude/skills/chrome-automation/ |
| 189 | +├── SKILL.md # AI 读取的指南(包含工具列表和调用方式) |
| 190 | +└── mcp.json # MCP server 配置(指向本地 fork) |
| 191 | +
|
| 192 | +~/chrome-devtools-mcp/ # fork 仓库 |
| 193 | +├── run-mcp.sh # MCP 启动脚本 |
| 194 | +├── src/tools/debugger.ts # 13个 debugger 工具实现 |
| 195 | +└── build/ # 编译输出 |
| 196 | +``` |
0 commit comments