捕获浏览器调试上下文并导出结构化报告的 Chrome 扩展，专为 AI 编码代理优化。
Debug Helper 是一款基于 Manifest V3 的 Chrome 扩展，专注于将浏览器内的调试上下文转化为可供 AI 编码代理直接消费的结构化报告。它覆盖 DOM 交互事件、控制台日志、网络请求及截图标注四类核心信号，内置自动脱敏（移除 Bearer tokens、API keys 等）与事件去重机制，支持 Markdown、JSON、TOON（专为 LLM 优化的 token 高效格式）三种导出格式。项目零外部依赖，ZIP 构建器与 TOON 编码器全部内置，采用 Content Scripts 双世界架构（ISOLATED world 负责事件监听与消息中继，MAIN world 负责拦截原生 console 与网络 API），Service Worker 负责事件缓冲（每 2 秒或 50 条事件刷新一次）与会话管理。
信号捕获能力#
- DOM 事件捕获：点击、输入、滚动、表单提交，附带元素上下文
- 控制台捕获：errors、warnings、logs，含堆栈跟踪
- 网络请求捕获：fetch 与 XHR，记录状态码、耗时、错误响应体
- 截图 + 标注：矩形、箭头、文本、自由画笔、计数器、裁剪
- 手动笔记：录制过程中可向步骤时间线添加文本注释
数据处理与安全#
- 自动脱敏：导出前自动移除 Bearer tokens、API keys、密码等敏感信息
- 事件去重：自动折叠快速重复点击及 input/change/submit 重叠事件
- 分块存储管理：事件分块存储，达到 80% 配额时自动清理
导出格式#
| 格式 | 定位 |
|---|---|
| Markdown | 适合粘贴到 AI 助手聊天窗口 |
| JSON | 适合程序化消费、CI 管线 |
| TOON | 专为 LLM 优化的 token 高效格式 |
架构数据流#
Content Scripts (page) → Bridge → Service Worker → Storage → UI
↓ ↓
DOM events IndexedDB (screenshots)
Console logs chrome.storage (events, sessions)
Network requests
关键内置模块（lib/）#
| 模块 | 职责 |
|---|---|
| storage.js | Chrome storage + IndexedDB 封装 |
| export.js | 报告生成（JSON / MD / TOON） |
| toon.js | TOON 格式编码器 |
| zip.js | 轻量 ZIP 构建器 |
| utils.js | 共享工具函数 |
典型工作流#
开始录制 → 正常浏览复现问题 → 停止录制 → 一键导出报告粘贴给 AI 编码助手（如 Cursor、Claude、GPT）。
快捷键#
Cmd/Ctrl+Shift+R：切换录制Cmd/Ctrl+Shift+S：截图
待确认信息#
- 是否有独立官网 / Landing Page
- Chrome Web Store 上架情况
- TOON 格式的详细规范说明
- 与特定 AI 编码代理（Cursor、Windsurf 等）的官方集成关系
- 后续版本路线图
- 国际化 / 多语言支持情况
- 自动脱敏的完整规则列表