内容
[](README.zh.md)
# @oussamaexe/electron-debugger
**状态: v3.0.0** — 在 npm 上发布为 `@oussamaexe/electron-debugger`。
用于通过 Chrome DevTools 协议（CDP）调试 Electron 应用程序的 MCP 服务器。
## 前置条件
您的 Electron 应用程序必须在启用远程调试的情况下运行：
```bash
/path/to/your-electron-app --remote-debugging-port=9222
```
## 安装
```bash
npm install -g @oussamaexe/electron-debugger
```
或直接运行：
```bash
npx @oussamaexe/electron-debugger mcp
```
## 配置
| 变量 | 默认值 | 描述 |
|---|---|---|
| `ELECTRON_DEBUG_PORT` | `9222` | CDP 调试端口 |
| `ELECTRON_DEBUG_HOST` | `127.0.0.1` | 调试主机地址 |
## 使用方法
### MCP 服务器
```bash
electron-debugger mcp
```
对于 opencode，添加到 `opencode.json`：
```json
{
"mcpServers": {
"electron-debugger": {
"command": "npx",
"args": ["@oussamaexe/electron-debugger", "mcp"]
}
}
}
```
### 命令行界面
```bash
electron-debugger exec get-dom-snapshot depth=3
electron-debugger exec click-element selector=button.submit
electron-debugger exec take-screenshot format=png
```
## 可用工具
| 工具 | 描述 |
|---|---|
| `get-dom-snapshot` | 获取 DOM 树快照 |
| `get-element-box` | 获取 CSS 选择器的边界框 |
| `get-element-styles` | 获取计算样式 |
| `take-screenshot` | 捕获页面或元素截图 |
| `get-console-logs` | 检索控制台日志 |
| `get-metrics` | 获取性能指标（FPS、内存、DOM 节点） |
| `click-element` | 通过 CSS 选择器点击元素 |
| `type-text` | 在输入字段中输入文本 |
| `highlight-element` | 直观地突出显示元素 |
| `list-windows` | 列出所有打开的 BrowserWindows |
## 1. 概况 — 这个工具的作用
## 2. 连接方式 — 管道
## 工作原理
1. Electron 应用程序通过 `--remote-debugging-port` 暴露 CDP WebSocket
2. `electron-debugger` 在 `http://127.0.0.1:9222/json` 处发现页面目标
3. 通过 WebSocket 连接到第一个 `page` 目标
4. 工具使用 Chrome DevTools 协议命令进行通信
5. MCP 服务器将这些工具定义为 AI 助手的工具定义
## 开发
```bash
git clone https://github.com/oussamaexe/electron-debugger.git
cd electron-debugger
npm install
npm run build
npm test
```
## 许可证
MIT
