chrome-debugger-mcp 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -484
- package/package.json +45 -30
package/README.md
CHANGED
|
@@ -2,88 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
[English](#english) | [中文](#chinese)
|
|
4
4
|
|
|
5
|
-
<a id="english"></a
|
|
5
|
+
<a id="english"></a>
|
|
6
6
|
|
|
7
7
|
## English
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Breakpoint-driven Chrome debugging for MCP clients.
|
|
10
10
|
|
|
11
|
-
`chrome-debugger-mcp` exposes Chrome DevTools Protocol primitives as MCP tools
|
|
12
|
-
|
|
13
|
-
This server is built for questions like:
|
|
14
|
-
|
|
15
|
-
- What is this variable at runtime?
|
|
16
|
-
- Why did this branch execute?
|
|
17
|
-
- What does the real API payload look like in the browser?
|
|
18
|
-
- Which function changed this state?
|
|
19
|
-
- Why does the UI fail only after a specific click or reload?
|
|
11
|
+
`chrome-debugger-mcp` exposes Chrome DevTools Protocol debugging primitives as MCP tools. It lets an agent attach to a real Chrome tab, pause on breakpoints or `debugger;`, inspect scope variables, evaluate expressions inside the paused frame, step through code, and resume with runtime facts instead of guessing from static source.
|
|
20
12
|
|
|
21
13
|
It is not a general browser automation server. The focus is runtime debugging.
|
|
22
14
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
- Launch a dedicated Chrome instance with remote debugging enabled
|
|
26
|
-
- List open tabs and require explicit user confirmation before connecting
|
|
27
|
-
- Connect to a specific Chrome page over CDP
|
|
28
|
-
- Set and remove DevTools breakpoints without editing source code
|
|
29
|
-
- Reload the page through CDP so breakpoints reliably bind after navigation
|
|
30
|
-
- Wait for the next pause, or wait for a specific file and line target
|
|
31
|
-
- Read scope variables from the paused frame
|
|
32
|
-
- Evaluate arbitrary JavaScript in the current call frame
|
|
33
|
-
- Step into, step over, step out, and resume execution
|
|
34
|
-
- Poll debugger state when the MCP client has short request timeouts
|
|
35
|
-
- Emit `_ui` payloads and logging messages that clients can surface to the user
|
|
36
|
-
|
|
37
|
-
### Why This Exists
|
|
38
|
-
|
|
39
|
-
Browser-focused MCP tools are usually good at DOM interaction and network inspection, but weak at answering runtime debugging questions. This project gives an MCP client access to the debugging workflow you would normally use in Chrome DevTools:
|
|
40
|
-
|
|
41
|
-
1. Attach to the right tab.
|
|
42
|
-
2. Pause execution at the right moment.
|
|
43
|
-
3. Read actual runtime values.
|
|
44
|
-
4. Step through code if needed.
|
|
45
|
-
5. Resume and clean up.
|
|
46
|
-
|
|
47
|
-
The server is intentionally opinionated. It encodes guardrails that prevent common agent mistakes such as:
|
|
48
|
-
|
|
49
|
-
- guessing which tab to attach to
|
|
50
|
-
- concluding behavior without inspecting runtime values
|
|
51
|
-
- ending the turn between `reloadPage()` and `waitForSpecificPause()`
|
|
52
|
-
|
|
53
|
-
### Requirements
|
|
54
|
-
|
|
55
|
-
- Google Chrome installed locally
|
|
56
|
-
- An MCP client that supports stdio servers and tool calling
|
|
57
|
-
- Access to the application you want to debug
|
|
58
|
-
- Local source access if you plan to insert temporary `debugger;` statements
|
|
59
|
-
|
|
60
|
-
### Installation
|
|
15
|
+

|
|
61
16
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
After this package is published, users can run it directly with `npx`:
|
|
65
|
-
|
|
66
|
-
```bash
|
|
67
|
-
npx -y chrome-debugger-mcp
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Or install it globally:
|
|
71
|
-
|
|
72
|
-
```bash
|
|
73
|
-
npm install -g chrome-debugger-mcp
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
#### From source
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
pnpm install
|
|
80
|
-
pnpm build
|
|
81
|
-
node dist/index.js
|
|
82
|
-
```
|
|
17
|
+
_Demo: the agent launches Chrome, waits for a breakpoint, inspects real scope variables, and resumes with runtime facts._
|
|
83
18
|
|
|
84
19
|
### MCP Client Configuration
|
|
85
20
|
|
|
86
|
-
|
|
21
|
+
Use the published package directly:
|
|
87
22
|
|
|
88
23
|
```json
|
|
89
24
|
{
|
|
@@ -96,276 +31,81 @@ node dist/index.js
|
|
|
96
31
|
}
|
|
97
32
|
```
|
|
98
33
|
|
|
99
|
-
|
|
34
|
+
No local build step is required for normal usage.
|
|
100
35
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
```
|
|
36
|
+
### Quick Start
|
|
37
|
+
|
|
38
|
+
1. Add the MCP config above and reload your MCP client.
|
|
39
|
+
2. Ask the agent to start a debugging session and show the available Chrome tabs before connecting.
|
|
40
|
+
3. Confirm the exact target page URL when the agent calls `listTargets()`.
|
|
41
|
+
4. Add a temporary `debugger;` statement in local source code, or ask the agent to call `setBreakpoint()`.
|
|
42
|
+
5. Reload the page and immediately wait for the pause with `waitForSpecificPause()` or `waitForPause()`.
|
|
43
|
+
6. Inspect runtime state with `getScopeVariables()` and `evaluate()`, step if needed, then call `resume()`.
|
|
111
44
|
|
|
112
|
-
|
|
45
|
+
Example prompt:
|
|
46
|
+
|
|
47
|
+
```text
|
|
48
|
+
Use chrome-debugger-mcp to debug my app.
|
|
49
|
+
Start with startDebuggingSession(), list the available Chrome tabs, wait for my confirmation before connect(), then help me pause in App.jsx, inspect runtime values, and resume when done.
|
|
50
|
+
```
|
|
113
51
|
|
|
114
|
-
|
|
52
|
+
### Core Tools
|
|
115
53
|
|
|
116
|
-
- `startDebuggingSession`: returns the recommended debugging
|
|
54
|
+
- `startDebuggingSession`: returns the recommended debugging flow and behavior rules for the agent
|
|
117
55
|
- `launchChrome`: launches a dedicated Chrome instance with remote debugging enabled
|
|
118
|
-
- `listTargets`: lists available Chrome tabs and requires
|
|
119
|
-
- `connect`: attaches to the confirmed tab
|
|
120
|
-
- `setBreakpoint`:
|
|
121
|
-
- `removeBreakpoint`: removes a breakpoint created by `setBreakpoint`
|
|
56
|
+
- `listTargets`: lists available Chrome tabs and requires explicit user selection
|
|
57
|
+
- `connect`: attaches to the confirmed target tab
|
|
58
|
+
- `setBreakpoint` and `removeBreakpoint`: manage CDP breakpoints without editing source files
|
|
122
59
|
- `reloadPage`: reloads the current page through CDP
|
|
123
|
-
- `waitForSpecificPause`: waits for the next pause and
|
|
124
|
-
- `waitForPause`: waits for any pause
|
|
60
|
+
- `waitForSpecificPause`: waits for the next pause and matches by file plus line tolerance or `debugger-statement`
|
|
61
|
+
- `waitForPause`: waits for any pause when exact location matching is not needed
|
|
125
62
|
- `getScopeVariables`: reads local, closure, and module scope values from the paused frame
|
|
126
|
-
- `evaluate`:
|
|
127
|
-
- `stepInto`, `stepOver`, `stepOut`: standard
|
|
63
|
+
- `evaluate`: runs JavaScript in the paused call frame
|
|
64
|
+
- `stepInto`, `stepOver`, `stepOut`: standard step controls
|
|
128
65
|
- `resume`: resumes execution after inspection
|
|
129
|
-
- `getStatus`:
|
|
66
|
+
- `getStatus`: polls connected and paused state for clients with short request timeouts
|
|
130
67
|
- `forcePause`: requests a pause at the next JavaScript statement
|
|
131
68
|
|
|
132
|
-
###
|
|
133
|
-
|
|
134
|
-
For AI clients, the intended flow is:
|
|
135
|
-
|
|
136
|
-
1. Call `startDebuggingSession()`.
|
|
137
|
-
2. Call `launchChrome()` or use an already-running Chrome instance with a CDP port.
|
|
138
|
-
3. Call `listTargets()` and show the full tab list to the user.
|
|
139
|
-
4. Wait for the user to confirm the exact page URL.
|
|
140
|
-
5. Call `connect({ targetUrl })`.
|
|
141
|
-
6. Insert a temporary `debugger;` statement in local source code, or call `setBreakpoint()`.
|
|
142
|
-
7. Call `reloadPage()`.
|
|
143
|
-
8. Immediately call `waitForSpecificPause()` in the same turn.
|
|
144
|
-
9. Call `getScopeVariables()` and `evaluate()` to inspect runtime values.
|
|
145
|
-
10. Step if necessary with `stepInto()`, `stepOver()`, or `stepOut()`.
|
|
146
|
-
11. Call `resume()`.
|
|
147
|
-
12. Remove any temporary `debugger;` statements from source code.
|
|
148
|
-
|
|
149
|
-
### Important Rules For Agent Authors
|
|
150
|
-
|
|
151
|
-
This server is designed for tool-using agents, not only for humans. If you are integrating it into an MCP client, keep these rules:
|
|
152
|
-
|
|
153
|
-
- Never skip `listTargets()`.
|
|
154
|
-
- Never guess the target URL, even if only one tab is open.
|
|
155
|
-
- Always wait for explicit user confirmation before `connect()`.
|
|
156
|
-
- After `reloadPage()`, immediately call `waitForSpecificPause()` or `waitForPause()` in the same turn.
|
|
157
|
-
- Do not explain behavior from static code when runtime values can be inspected directly.
|
|
158
|
-
- Always `resume()` after inspection.
|
|
159
|
-
- If you added temporary `debugger;` statements to source code, remove them before finishing.
|
|
160
|
-
|
|
161
|
-
### How `waitForSpecificPause` Matches
|
|
162
|
-
|
|
163
|
-
`waitForSpecificPause` is the preferred waiting primitive because it is more reliable than waiting for an arbitrary pause.
|
|
164
|
-
|
|
165
|
-
It matches a pause using two strategies:
|
|
166
|
-
|
|
167
|
-
1. URL fragment plus line tolerance
|
|
168
|
-
2. URL fragment plus `debugger-statement` pause reason
|
|
169
|
-
|
|
170
|
-
The second path matters when source maps, transpilation, or bundling shift compiled line numbers away from editor line numbers.
|
|
69
|
+
### Usage Guidance
|
|
171
70
|
|
|
172
|
-
|
|
71
|
+
- Start with `startDebuggingSession()` when integrating this server into an agent workflow.
|
|
72
|
+
- Always call `listTargets()` and wait for explicit user confirmation before `connect()`.
|
|
73
|
+
- Prefer `waitForSpecificPause()` when you know the target file or line.
|
|
74
|
+
- After `reloadPage()`, call `waitForSpecificPause()` or `waitForPause()` in the same turn.
|
|
75
|
+
- Use `getScopeVariables()` and `evaluate()` before drawing conclusions from static source.
|
|
76
|
+
- Always call `resume()` after inspection.
|
|
77
|
+
- Remove any temporary `debugger;` statements before finishing.
|
|
173
78
|
|
|
174
|
-
|
|
79
|
+
### Important Notes
|
|
175
80
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
7. `reloadPage()`
|
|
183
|
-
8. `waitForSpecificPause({ urlFragment: "App.jsx", line: 62, actionHint: "click the Refetch payloads button" })`
|
|
184
|
-
9. `getScopeVariables()`
|
|
185
|
-
10. `evaluate({ expression: "payload.modules" })`
|
|
186
|
-
11. `resume()`
|
|
187
|
-
|
|
188
|
-
### Chrome Launch Behavior
|
|
189
|
-
|
|
190
|
-
`launchChrome()` uses a dedicated profile so it does not interfere with the user's normal browser session.
|
|
191
|
-
|
|
192
|
-
Defaults:
|
|
193
|
-
|
|
194
|
-
- remote debugging port: `9222`
|
|
195
|
-
- profile directory: `~/.chrome-debug-profile`
|
|
196
|
-
|
|
197
|
-
Expected Chrome binary locations:
|
|
198
|
-
|
|
199
|
-
- macOS: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
|
|
200
|
-
- Linux: `google-chrome`
|
|
201
|
-
- Windows: `C:\Program Files\Google\Chrome\Application\chrome.exe`
|
|
202
|
-
|
|
203
|
-
If automatic launch fails, the tool returns a command the user can run manually.
|
|
204
|
-
|
|
205
|
-
### Local Playground
|
|
206
|
-
|
|
207
|
-
This repository includes a disposable test app under [`test/`](./test) so you can exercise the debugger server against a realistic browser workflow.
|
|
208
|
-
|
|
209
|
-
#### Start the mock service
|
|
210
|
-
|
|
211
|
-
```bash
|
|
212
|
-
cd test/service
|
|
213
|
-
node src/server.js
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
The service listens on `http://127.0.0.1:3030`.
|
|
217
|
-
|
|
218
|
-
#### Start the web app
|
|
219
|
-
|
|
220
|
-
```bash
|
|
221
|
-
cd test/web
|
|
222
|
-
pnpm install
|
|
223
|
-
pnpm dev
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
The web app runs on `http://127.0.0.1:5173`.
|
|
227
|
-
|
|
228
|
-
Useful places to pause:
|
|
229
|
-
|
|
230
|
-
- `test/web/src/App.jsx` inside `loadWorkbench`
|
|
231
|
-
- `test/web/src/App.jsx` inside `loadModuleDetail`
|
|
232
|
-
- `test/web/src/App.jsx` around the unfinished detail sections
|
|
233
|
-
|
|
234
|
-
Runtime payload areas worth inspecting:
|
|
235
|
-
|
|
236
|
-
- `summaryCards`
|
|
237
|
-
- `modules`
|
|
238
|
-
- `apiContracts`
|
|
239
|
-
- `nextActions`
|
|
240
|
-
- `responseShape`
|
|
241
|
-
|
|
242
|
-
### Troubleshooting
|
|
243
|
-
|
|
244
|
-
#### No targets found
|
|
245
|
-
|
|
246
|
-
Make sure Chrome is running with `--remote-debugging-port=9222` and the target page is open.
|
|
247
|
-
|
|
248
|
-
#### More than one tab matches `targetUrl`
|
|
249
|
-
|
|
250
|
-
Pass a more specific substring so the match becomes unique.
|
|
251
|
-
|
|
252
|
-
#### `waitForPause` or `waitForSpecificPause` times out
|
|
253
|
-
|
|
254
|
-
This can happen when:
|
|
255
|
-
|
|
256
|
-
- the page action was never triggered
|
|
257
|
-
- the wrong breakpoint was set
|
|
258
|
-
- the MCP client itself has a shorter request timeout than the tool call
|
|
259
|
-
|
|
260
|
-
If your client times out quickly, use `getStatus()` to poll or increase the client timeout.
|
|
261
|
-
|
|
262
|
-
#### The paused line number does not match the editor line
|
|
263
|
-
|
|
264
|
-
Bundlers and transpilers can shift compiled line numbers. Use `waitForSpecificPause()` and rely on URL fragment matching plus `debugger-statement` semantics.
|
|
265
|
-
|
|
266
|
-
#### Chrome does not launch automatically
|
|
267
|
-
|
|
268
|
-
The machine may use a non-default Chrome install path. Run the returned launch command manually or adjust the implementation to match your environment.
|
|
269
|
-
|
|
270
|
-
### Development
|
|
271
|
-
|
|
272
|
-
```bash
|
|
273
|
-
pnpm install
|
|
274
|
-
pnpm build
|
|
275
|
-
node dist/index.js
|
|
276
|
-
```
|
|
277
|
-
|
|
278
|
-
The implementation lives in:
|
|
279
|
-
|
|
280
|
-
- [`src/index.ts`](./src/index.ts): MCP tool definitions and user-facing workflow hints
|
|
281
|
-
- [`src/chrome-manager.ts`](./src/chrome-manager.ts): Chrome DevTools Protocol integration and debugger state management
|
|
81
|
+
- Requirements: local Google Chrome, an MCP client that supports stdio servers and tool calling, and source access if you plan to insert `debugger;`.
|
|
82
|
+
- `launchChrome()` uses a dedicated profile so it does not interfere with the user's normal browser session.
|
|
83
|
+
- Default launch settings are remote debugging port `9222` and profile directory `~/.chrome-debug-profile`.
|
|
84
|
+
- If automatic launch fails, the tool returns a command you can run manually.
|
|
85
|
+
- Bundlers and source maps can shift compiled line numbers, so `waitForSpecificPause()` also matches `debugger-statement` pauses.
|
|
86
|
+
- If your MCP client has short request timeouts, use `getStatus()` to poll state.
|
|
282
87
|
|
|
283
88
|
### License
|
|
284
89
|
|
|
285
90
|
MIT
|
|
286
91
|
|
|
287
|
-
<a id="chinese"></a
|
|
92
|
+
<a id="chinese"></a>
|
|
288
93
|
|
|
289
94
|
## 中文
|
|
290
95
|
|
|
291
|
-
一个面向
|
|
292
|
-
|
|
293
|
-
`chrome-debugger-mcp` 把 Chrome DevTools Protocol 的核心调试能力暴露为 MCP 工具,让 AI agent 可以连接真实的 Chrome 标签页,在运行时暂停执行、读取变量、在当前调用帧中执行表达式、单步跟踪代码,而不是只靠静态源码猜测行为。
|
|
96
|
+
一个面向 MCP 客户端的 Chrome 断点调试服务。
|
|
294
97
|
|
|
295
|
-
|
|
98
|
+
`chrome-debugger-mcp` 把 Chrome DevTools Protocol 的核心调试能力暴露为 MCP 工具,让 agent 可以连接真实的 Chrome 标签页,在断点或 `debugger;` 处暂停,读取作用域变量,在当前暂停帧中执行表达式,单步跟踪代码,并基于真实运行时值继续工作,而不是只靠静态源码猜测行为。
|
|
296
99
|
|
|
297
|
-
|
|
298
|
-
- 为什么会走到这个分支?
|
|
299
|
-
- 浏览器里真实拿到的 API 返回结构是什么?
|
|
300
|
-
- 是哪一个函数改掉了这个状态?
|
|
301
|
-
- 为什么这个 UI 只有在某次点击或刷新后才出错?
|
|
100
|
+
它不是通用浏览器自动化服务。它的重点是运行时调试。
|
|
302
101
|
|
|
303
|
-
|
|
102
|
+

|
|
304
103
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
- 启动带远程调试端口的独立 Chrome 实例
|
|
308
|
-
- 列出所有标签页,并强制要求用户明确确认目标页
|
|
309
|
-
- 通过 CDP 连接指定 Chrome 页面
|
|
310
|
-
- 无需修改源码即可设置和移除断点
|
|
311
|
-
- 通过 CDP 重载页面,确保跳转后断点可靠绑定
|
|
312
|
-
- 支持等待任意 pause,也支持等待指定文件和行附近的 pause
|
|
313
|
-
- 读取当前暂停帧里的作用域变量
|
|
314
|
-
- 在当前调用帧里执行任意 JavaScript 表达式
|
|
315
|
-
- 支持 `stepInto`、`stepOver`、`stepOut` 和 `resume`
|
|
316
|
-
- 当 MCP 客户端请求超时较短时,可轮询调试器状态
|
|
317
|
-
- 输出 `_ui` 结果和 logging 消息,方便客户端展示给用户
|
|
318
|
-
|
|
319
|
-
### 为什么做这个项目
|
|
320
|
-
|
|
321
|
-
很多浏览器方向的 MCP 工具更擅长 DOM 操作和网络请求观察,但不擅长回答运行时调试问题。这个项目把 Chrome DevTools 中常用的调试流程带进了 MCP:
|
|
322
|
-
|
|
323
|
-
1. 连接正确的标签页。
|
|
324
|
-
2. 在正确的时机暂停执行。
|
|
325
|
-
3. 读取真实运行时值。
|
|
326
|
-
4. 必要时单步跟踪。
|
|
327
|
-
5. 恢复执行并清理现场。
|
|
328
|
-
|
|
329
|
-
这个服务是有明确约束的。它内置了一些 guardrails,专门避免 agent 出现这些常见错误:
|
|
330
|
-
|
|
331
|
-
- 猜测应该连接哪个标签页
|
|
332
|
-
- 没看运行时值就直接下结论
|
|
333
|
-
- 在 `reloadPage()` 和 `waitForSpecificPause()` 之间错误地结束当前轮次
|
|
334
|
-
|
|
335
|
-
### 运行要求
|
|
336
|
-
|
|
337
|
-
- 本机安装了 Google Chrome
|
|
338
|
-
- 使用支持 stdio MCP server 和工具调用的 MCP 客户端
|
|
339
|
-
- 可以访问你要调试的应用
|
|
340
|
-
- 如果要插入临时 `debugger;`,需要能访问本地源码
|
|
341
|
-
|
|
342
|
-
### 安装方式
|
|
343
|
-
|
|
344
|
-
#### 从 npm 使用
|
|
345
|
-
|
|
346
|
-
这个包发布后,用户可以直接用 `npx` 运行:
|
|
347
|
-
|
|
348
|
-
```bash
|
|
349
|
-
npx -y chrome-debugger-mcp
|
|
350
|
-
```
|
|
351
|
-
|
|
352
|
-
也可以全局安装:
|
|
353
|
-
|
|
354
|
-
```bash
|
|
355
|
-
npm install -g chrome-debugger-mcp
|
|
356
|
-
```
|
|
357
|
-
|
|
358
|
-
#### 从源码运行
|
|
359
|
-
|
|
360
|
-
```bash
|
|
361
|
-
pnpm install
|
|
362
|
-
pnpm build
|
|
363
|
-
node dist/index.js
|
|
364
|
-
```
|
|
104
|
+
_演示流程:agent 拉起 Chrome,等待断点命中,读取真实作用域变量,再基于运行时事实继续执行。_
|
|
365
105
|
|
|
366
106
|
### MCP 客户端配置
|
|
367
107
|
|
|
368
|
-
|
|
108
|
+
直接使用已发布包:
|
|
369
109
|
|
|
370
110
|
```json
|
|
371
111
|
{
|
|
@@ -378,190 +118,60 @@ node dist/index.js
|
|
|
378
118
|
}
|
|
379
119
|
```
|
|
380
120
|
|
|
381
|
-
|
|
121
|
+
正常使用时不需要本地构建。
|
|
382
122
|
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}
|
|
392
|
-
```
|
|
123
|
+
### 快速使用
|
|
124
|
+
|
|
125
|
+
1. 添加上面的 MCP 配置,并重新加载你的 MCP 客户端。
|
|
126
|
+
2. 让 agent 先启动调试会话,并在连接前展示可用的 Chrome 标签页。
|
|
127
|
+
3. 当 agent 调用 `listTargets()` 后,明确确认要调试的页面 URL。
|
|
128
|
+
4. 在本地源码里临时加入 `debugger;`,或者让 agent 调用 `setBreakpoint()`。
|
|
129
|
+
5. 重载页面后,立刻调用 `waitForSpecificPause()` 或 `waitForPause()` 等待暂停。
|
|
130
|
+
6. 用 `getScopeVariables()` 和 `evaluate()` 检查运行时状态,必要时单步跟踪,最后调用 `resume()`。
|
|
393
131
|
|
|
394
|
-
|
|
132
|
+
示例提示词:
|
|
133
|
+
|
|
134
|
+
```text
|
|
135
|
+
使用 chrome-debugger-mcp 帮我调试这个应用。
|
|
136
|
+
先调用 startDebuggingSession(),列出可用的 Chrome 标签页,在我确认之前不要 connect(),然后帮我在 App.jsx 里暂停、检查运行时值,最后恢复执行。
|
|
137
|
+
```
|
|
395
138
|
|
|
396
|
-
|
|
139
|
+
### 核心工具
|
|
397
140
|
|
|
398
|
-
- `startDebuggingSession`:返回推荐调试流程和 agent
|
|
141
|
+
- `startDebuggingSession`:返回推荐调试流程和 agent 行为规则
|
|
399
142
|
- `launchChrome`:启动带远程调试能力的独立 Chrome 实例
|
|
400
|
-
- `listTargets
|
|
401
|
-
- `connect
|
|
402
|
-
- `setBreakpoint
|
|
403
|
-
- `removeBreakpoint`:移除通过 `setBreakpoint` 创建的断点
|
|
143
|
+
- `listTargets`:列出可调试的 Chrome 标签页,并要求用户明确选择
|
|
144
|
+
- `connect`:连接到已经确认的目标标签页
|
|
145
|
+
- `setBreakpoint` 和 `removeBreakpoint`:无需改源码即可管理 CDP 断点
|
|
404
146
|
- `reloadPage`:通过 CDP 重载当前页面
|
|
405
|
-
- `waitForSpecificPause
|
|
406
|
-
- `waitForPause
|
|
407
|
-
- `getScopeVariables
|
|
408
|
-
- `evaluate
|
|
147
|
+
- `waitForSpecificPause`:等待下一次暂停,并按文件加行号容差或 `debugger-statement` 进行匹配
|
|
148
|
+
- `waitForPause`:在不需要精确位置匹配时等待任意暂停
|
|
149
|
+
- `getScopeVariables`:读取当前暂停帧中的 local、closure、module 作用域变量
|
|
150
|
+
- `evaluate`:在当前暂停调用帧中执行 JavaScript
|
|
409
151
|
- `stepInto`、`stepOver`、`stepOut`:标准单步控制
|
|
410
152
|
- `resume`:检查完毕后恢复执行
|
|
411
|
-
- `getStatus
|
|
153
|
+
- `getStatus`:给超时较短的客户端轮询连接和暂停状态
|
|
412
154
|
- `forcePause`:请求在下一条 JavaScript 语句处暂停
|
|
413
155
|
|
|
414
|
-
###
|
|
415
|
-
|
|
416
|
-
对于 AI 客户端,建议流程是:
|
|
417
|
-
|
|
418
|
-
1. 调用 `startDebuggingSession()`。
|
|
419
|
-
2. 调用 `launchChrome()`,或直接复用已经开启 CDP 端口的 Chrome。
|
|
420
|
-
3. 调用 `listTargets()`,并把完整标签页列表展示给用户。
|
|
421
|
-
4. 等待用户明确确认要调试的页面 URL。
|
|
422
|
-
5. 调用 `connect({ targetUrl })`。
|
|
423
|
-
6. 在本地源码插入临时 `debugger;`,或者调用 `setBreakpoint()`。
|
|
424
|
-
7. 调用 `reloadPage()`。
|
|
425
|
-
8. 在同一轮里立刻调用 `waitForSpecificPause()`。
|
|
426
|
-
9. 调用 `getScopeVariables()` 和 `evaluate()` 检查运行时值。
|
|
427
|
-
10. 必要时使用 `stepInto()`、`stepOver()`、`stepOut()` 继续跟踪。
|
|
428
|
-
11. 调用 `resume()`。
|
|
429
|
-
12. 删除源码里临时加入的 `debugger;`。
|
|
430
|
-
|
|
431
|
-
### 给 Agent 作者的重要规则
|
|
432
|
-
|
|
433
|
-
这个服务首先是为会调用工具的 agent 设计的,而不仅仅是给人手动点工具用。如果你要把它接入自己的 MCP 客户端,建议遵守这些规则:
|
|
434
|
-
|
|
435
|
-
- 不要跳过 `listTargets()`。
|
|
436
|
-
- 即使只看到一个标签页,也不要猜测目标 URL。
|
|
437
|
-
- 一定要等用户明确确认后再调用 `connect()`。
|
|
438
|
-
- 调用 `reloadPage()` 后,必须在同一轮里立刻调用 `waitForSpecificPause()` 或 `waitForPause()`。
|
|
439
|
-
- 能读取运行时值时,不要只根据静态代码解释行为。
|
|
440
|
-
- 检查完之后一定要 `resume()`。
|
|
441
|
-
- 如果向源码里插入了临时 `debugger;`,结束前要清理掉。
|
|
442
|
-
|
|
443
|
-
### `waitForSpecificPause` 如何匹配
|
|
444
|
-
|
|
445
|
-
`waitForSpecificPause` 是首选的等待工具,因为它比“等待任意暂停”更可靠。
|
|
446
|
-
|
|
447
|
-
它有两层匹配策略:
|
|
448
|
-
|
|
449
|
-
1. URL 片段加行号容差
|
|
450
|
-
2. URL 片段加 `debugger-statement` 暂停原因
|
|
451
|
-
|
|
452
|
-
第二层匹配对经过 source map、转译、打包后的代码尤其重要,因为编译后的行号可能和编辑器行号不完全一致。
|
|
156
|
+
### 使用建议
|
|
453
157
|
|
|
454
|
-
|
|
158
|
+
- 在把这个服务接入 agent 工作流时,先调用 `startDebuggingSession()`。
|
|
159
|
+
- 调用 `connect()` 之前一定先执行 `listTargets()`,并等待用户明确确认。
|
|
160
|
+
- 已知目标文件或行号时,优先使用 `waitForSpecificPause()`。
|
|
161
|
+
- 调用 `reloadPage()` 后,要在同一轮里立刻调用 `waitForSpecificPause()` 或 `waitForPause()`。
|
|
162
|
+
- 能读取运行时值时,优先使用 `getScopeVariables()` 和 `evaluate()`,不要只看静态代码下结论。
|
|
163
|
+
- 检查完成后一定要调用 `resume()`。
|
|
164
|
+
- 如果加入了临时 `debugger;`,结束前要清理掉。
|
|
455
165
|
|
|
456
|
-
|
|
166
|
+
### 注意事项
|
|
457
167
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
7. `reloadPage()`
|
|
465
|
-
8. `waitForSpecificPause({ urlFragment: "App.jsx", line: 62, actionHint: "click the Refetch payloads button" })`
|
|
466
|
-
9. `getScopeVariables()`
|
|
467
|
-
10. `evaluate({ expression: "payload.modules" })`
|
|
468
|
-
11. `resume()`
|
|
469
|
-
|
|
470
|
-
### Chrome 启动行为
|
|
471
|
-
|
|
472
|
-
`launchChrome()` 会使用独立 profile,不会影响用户平时正在用的浏览器会话。
|
|
473
|
-
|
|
474
|
-
默认值:
|
|
475
|
-
|
|
476
|
-
- 远程调试端口:`9222`
|
|
477
|
-
- profile 目录:`~/.chrome-debug-profile`
|
|
478
|
-
|
|
479
|
-
默认 Chrome 可执行文件路径:
|
|
480
|
-
|
|
481
|
-
- macOS:`/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
|
|
482
|
-
- Linux:`google-chrome`
|
|
483
|
-
- Windows:`C:\Program Files\Google\Chrome\Application\chrome.exe`
|
|
484
|
-
|
|
485
|
-
如果自动启动失败,工具会返回一条可供用户手动执行的启动命令。
|
|
486
|
-
|
|
487
|
-
### 本地 Playground
|
|
488
|
-
|
|
489
|
-
仓库里带了一个可丢弃的测试应用,目录在 [`test/`](./test)。你可以直接用它验证这个调试 MCP 的完整链路。
|
|
490
|
-
|
|
491
|
-
#### 启动 mock service
|
|
492
|
-
|
|
493
|
-
```bash
|
|
494
|
-
cd test/service
|
|
495
|
-
node src/server.js
|
|
496
|
-
```
|
|
497
|
-
|
|
498
|
-
服务监听在 `http://127.0.0.1:3030`。
|
|
499
|
-
|
|
500
|
-
#### 启动 web app
|
|
501
|
-
|
|
502
|
-
```bash
|
|
503
|
-
cd test/web
|
|
504
|
-
pnpm install
|
|
505
|
-
pnpm dev
|
|
506
|
-
```
|
|
507
|
-
|
|
508
|
-
Web 应用运行在 `http://127.0.0.1:5173`。
|
|
509
|
-
|
|
510
|
-
建议下断点的位置:
|
|
511
|
-
|
|
512
|
-
- `test/web/src/App.jsx` 里的 `loadWorkbench`
|
|
513
|
-
- `test/web/src/App.jsx` 里的 `loadModuleDetail`
|
|
514
|
-
- `test/web/src/App.jsx` 里尚未完成的 detail 区域附近
|
|
515
|
-
|
|
516
|
-
值得在运行时查看的 payload 字段:
|
|
517
|
-
|
|
518
|
-
- `summaryCards`
|
|
519
|
-
- `modules`
|
|
520
|
-
- `apiContracts`
|
|
521
|
-
- `nextActions`
|
|
522
|
-
- `responseShape`
|
|
523
|
-
|
|
524
|
-
### 故障排查
|
|
525
|
-
|
|
526
|
-
#### 找不到 targets
|
|
527
|
-
|
|
528
|
-
确认 Chrome 是用 `--remote-debugging-port=9222` 启动的,并且目标页面已经打开。
|
|
529
|
-
|
|
530
|
-
#### `targetUrl` 匹配到多个标签页
|
|
531
|
-
|
|
532
|
-
传入更具体的 URL 子串,保证匹配结果唯一。
|
|
533
|
-
|
|
534
|
-
#### `waitForPause` 或 `waitForSpecificPause` 超时
|
|
535
|
-
|
|
536
|
-
常见原因包括:
|
|
537
|
-
|
|
538
|
-
- 页面操作没有真正触发
|
|
539
|
-
- 断点位置不对
|
|
540
|
-
- MCP 客户端自身的请求超时时间比工具调用更短
|
|
541
|
-
|
|
542
|
-
如果客户端超时比较短,可以改用 `getStatus()` 轮询,或者调大客户端超时。
|
|
543
|
-
|
|
544
|
-
#### 暂停时的行号和编辑器对不上
|
|
545
|
-
|
|
546
|
-
打包和转译会导致编译后的行号偏移。优先使用 `waitForSpecificPause()`,并依赖 URL 片段匹配加 `debugger-statement` 语义匹配。
|
|
547
|
-
|
|
548
|
-
#### Chrome 无法自动启动
|
|
549
|
-
|
|
550
|
-
机器上的 Chrome 安装路径可能不是默认值。可以直接运行工具返回的启动命令,或者按你的环境调整实现。
|
|
551
|
-
|
|
552
|
-
### 开发
|
|
553
|
-
|
|
554
|
-
```bash
|
|
555
|
-
pnpm install
|
|
556
|
-
pnpm build
|
|
557
|
-
node dist/index.js
|
|
558
|
-
```
|
|
559
|
-
|
|
560
|
-
主要实现文件:
|
|
561
|
-
|
|
562
|
-
- [`src/index.ts`](./src/index.ts):MCP 工具定义和面向用户的工作流提示
|
|
563
|
-
- [`src/chrome-manager.ts`](./src/chrome-manager.ts):Chrome DevTools Protocol 集成和调试状态管理
|
|
168
|
+
- 运行要求:本机安装 Google Chrome,MCP 客户端支持 stdio server 和工具调用;如果要插入 `debugger;`,还需要能访问本地源码。
|
|
169
|
+
- `launchChrome()` 使用独立 profile,不会影响用户平时正在使用的浏览器会话。
|
|
170
|
+
- 默认启动参数是远程调试端口 `9222`,profile 目录是 `~/.chrome-debug-profile`。
|
|
171
|
+
- 如果自动启动失败,工具会返回一条可以手动执行的命令。
|
|
172
|
+
- 打包和 source map 可能导致编译后行号偏移,所以 `waitForSpecificPause()` 也会匹配 `debugger-statement` 暂停。
|
|
173
|
+
- 如果 MCP 客户端请求超时时间较短,可以用 `getStatus()` 轮询状态。
|
|
564
174
|
|
|
565
175
|
### 许可证
|
|
566
176
|
|
|
567
|
-
MIT
|
|
177
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,31 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
2
|
+
"name": "chrome-debugger-mcp",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"mcpName": "io.github.bitepro/chrome-debugger-mcp",
|
|
5
|
+
"description": "MCP server for Chrome breakpoint debugging – set breakpoints, inspect scope variables, step through code",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "dist/index.js",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/BitePro/chrome-debugger-mcp.git"
|
|
11
|
+
},
|
|
12
|
+
"homepage": "https://github.com/BitePro/chrome-debugger-mcp",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/BitePro/chrome-debugger-mcp/issues"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
19
|
+
],
|
|
20
|
+
"bin": {
|
|
21
|
+
"chrome-debugger-mcp": "dist/index.js"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "tsc",
|
|
25
|
+
"start": "node dist/index.js",
|
|
26
|
+
"dev": "tsc --watch",
|
|
27
|
+
"test": "tsc && node --test test/unit/*.test.mjs"
|
|
28
|
+
},
|
|
29
|
+
"keywords": [
|
|
30
|
+
"mcp",
|
|
31
|
+
"chrome",
|
|
32
|
+
"debugger",
|
|
33
|
+
"cdp",
|
|
34
|
+
"breakpoint"
|
|
35
|
+
],
|
|
36
|
+
"license": "MIT",
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@modelcontextprotocol/sdk": "^1.12.1",
|
|
39
|
+
"chrome-remote-interface": "^0.33.2",
|
|
40
|
+
"zod": "^3.24.2"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@types/node": "^22.13.10",
|
|
44
|
+
"typescript": "^5.8.2"
|
|
45
|
+
}
|
|
46
|
+
}
|