Skip to content

Commit ed95625

Browse files
committed
docs: add setup guides, test script, and MCP launcher
- setup-from-scratch.md: complete from-zero config guide with troubleshooting - opencode-setup-guide.md: reference doc for existing users - run-mcp.sh: wrapper script to launch MCP server from repo root - test-debugger.mjs: comprehensive debugger functional test (14 cases)
1 parent b840559 commit ed95625

4 files changed

Lines changed: 742 additions & 0 deletions

File tree

docs/opencode-setup-guide.md

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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

Comments
 (0)