Zero-setup browser debugging — captures console, network, errors as shareable artifacts. AI-ready export. Chrome + Firefox.
When you hit a bug during development, the context disappears — console logs scroll away, network requests vanish on navigation, and there's no way to package "what just happened" for a teammate or AI assistant.
- Always-on recording — Captures console, network (fetch/XHR), and errors in a circular buffer (constant memory)
- One-click capture — Press
Alt+Shift+Dor click "Capture Now" to snapshot the last 60 seconds - Auto-capture on error — Optionally triggers on uncaught exceptions
- AI-ready export — "Copy for AI" formats errors + failed requests as a structured prompt
- Privacy-first — Auto-redacts auth headers, cookies, passwords. All data stays local.
- Multiple exports — Self-contained HTML report, JSON, or AI prompt
- Cross-browser — Chrome + Firefox via WXT framework
git clone https://github.com/rishapgandhi/devsession-replay
cd devsession-replay
npm install --legacy-peer-deps
npm run dev # Chrome dev mode
npm run dev:firefox # Firefox dev modePage (MAIN world) Content Script (ISOLATED) Background
───────────────── ────────────────────────── ──────────
console/fetch/error →→ window.postMessage relay →→ CircularBuffer
↓ (on trigger)
CaptureArtifact → Storage
↓
Side Panel / Export
- Injected script (MAIN world) monkey-patches
console.*,fetch, and error listeners - Content script (ISOLATED) relays messages to the background service worker
- Background stores entries in a circular buffer (constant memory, last 60s)
- Trigger (manual or auto) drains the buffer into a
CaptureArtifact - Side panel displays captures with console/network/errors tabs
- Export as AI prompt, JSON, or self-contained HTML
| Layer | Technology |
|---|---|
| Framework | WXT |
| UI | React 18 + TypeScript |
| Styling | Tailwind CSS |
| State | Zustand |
| Data Structure | Custom CircularBuffer |
| Testing | Vitest |
Issues and PRs welcome. See CONTRIBUTING.md.
MIT © Rishap Gandhi