A Chrome extension that captures browser debug context and exports structured reports, optimized for AI coding agents.
Debug Helper is a Manifest V3-based Chrome extension that transforms browser debug context into structured reports directly consumable by AI coding agents. It captures four core signal types — DOM interaction events, console logs, network requests, and annotated screenshots — with built-in automatic sanitization (removing Bearer tokens, API keys, etc.) and event deduplication. It supports three export formats: Markdown (for pasting into AI chat windows), JSON (for programmatic consumption and CI pipelines), and TOON (a token-efficient format purpose-built for LLMs). The project has zero external dependencies; the ZIP builder and TOON encoder are fully self-contained. It employs a dual-world Content Scripts architecture — ISOLATED world for event listening and message relay, MAIN world for intercepting native console and network APIs — with a Service Worker handling event buffering (every 2 seconds or 50 events) and session management.
Signal Capture Capabilities#
- DOM Event Capture: Clicks, inputs, scrolls, form submissions with element context
- Console Capture: Errors, warnings, logs with stack traces
- Network Request Capture: Fetch and XHR with status codes, timing, error response bodies
- Screenshot + Annotation: Rectangles, arrows, text, freehand drawing, counters, cropping
- Manual Notes: Add text annotations to the step timeline during recording
Data Processing & Security#
- Auto Sanitization: Automatically removes Bearer tokens, API keys, passwords before export
- Event Deduplication: Auto-folds rapid repeated clicks and overlapping input/change/submit events
- Chunked Storage Management: Chunked event storage with auto-cleanup at 80% quota
Export Formats#
| Format | Purpose |
|---|---|
| Markdown | For pasting into AI assistant chat windows |
| JSON | For programmatic consumption, CI pipelines |
| TOON | Token-efficient format optimized for LLMs |
Architecture Data Flow#
Content Scripts (page) → Bridge → Service Worker → Storage → UI
↓ ↓
DOM events IndexedDB (screenshots)
Console logs chrome.storage (events, sessions)
Network requests
Key Built-in Modules (lib/)#
| Module | Responsibility |
|---|---|
| storage.js | Chrome storage + IndexedDB wrapper |
| export.js | Report generation (JSON / MD / TOON) |
| toon.js | TOON format encoder |
| zip.js | Lightweight ZIP builder |
| utils.js | Shared utility functions |
Typical Workflow#
Start recording → Browse to reproduce the issue → Stop recording → One-click export the report and paste into an AI coding assistant (e.g., Cursor, Claude, GPT).
Keyboard Shortcuts#
Cmd/Ctrl+Shift+R: Toggle recordingCmd/Ctrl+Shift+S: Screenshot
Unconfirmed Information#
- Existence of an independent website / landing page
- Chrome Web Store listing status
- Detailed TOON format specification
- Official integration relationships with specific AI coding agents (Cursor, Windsurf, etc.)
- Future version roadmap
- Internationalization / multi-language support
- Complete auto-sanitization rule list