Bug Session Recorder

Bug Session Recorder automatically captures everything that happens on the page as you browse, so reporting a bug stops being "it worked for me" and becomes "here's exactly what happened." Like an airplane's black box, the extension logs session events in the background — no need to click "start recording" — and when something goes wrong, you export the full history, take a screenshot, or record the screen with one click. How it works Add the sites you want to monitor in Settings. From there, recording is automatic: as soon as the page loads, the extension starts capturing clicks, form submissions, navigations, and network calls — no blinking indicators, no manual start/pause. What gets captured • Clicks and form submissions, with the element's text, CSS selector, and click position • Navigations and route changes (SPA-friendly) • Every HTTP request (fetch and XHR): method, URL, query params, headers, and body — paired with the response (status, headers, body, and response time) • Console errors (console.error, uncaught exceptions, and rejected promises) • Session info: URL, title, browser, operating system, and screen resolution Visual timeline A DevTools-style side panel shows the session's timeline in real time, with icons and colors per event type. HTTP requests show the method in a color-coded badge (Swagger convention: GET blue, POST green, PUT/PATCH amber, DELETE red) and update themselves the moment the response arrives, with a "waiting" spinner and a color-coded status (green/amber/red). Click any request to see the full details: URL, query params, collapsible headers, and the request/response body formatted as JSON, with a copy button on every block. Filter the timeline by text (route, method, message) or combine filter chips — Requests, Errors, Actions, and Console — to isolate exactly what you need. Screenshot and screen recording Beyond the event history, you can capture visual evidence on the spot: • Screenshot — one click captures the visible page and downloads it as a PNG • Screen recording — record the tab while you reproduce the bug; the panel shows a red "Recording" indicator with a live timer, and stopping it automatically saves the video as a .webm file Share Timeline When you find an issue, click "Share Timeline" to download: • A JSON file with the full sequence of calls, timeline, and session data — ready for automation or attaching to a ticket • A self-contained HTML report with the same visual timeline, which opens in any browser with no tooling needed — including expandable requests to inspect the request/response You can also export a single request on its own — handy for quickly reporting that one call that came back with a 500. Replay against another environment When a request needs to run somewhere else — your local dev server, staging, whatever — click "Repeat on another environment" on any request's detail view, paste the target origin (e.g. http://localhost:3000), and send it as-is: same method, headers, and body, remapped to the new host. Configure a default replay token in Settings for environments that need auth, or check "Use the current site's token" to reuse the real token from that specific request — kept only for the current browser session, never written to history or exports. Privacy first Passwords, tokens, cookies, and authorization headers are automatically redacted ([REDACTED]) before they're even stored — in saved data, exported files, and screenshots alike. Nothing is sent to external servers: everything stays local, in your browser. Language The interface automatically follows your browser's language (Portuguese or English), with an option to switch manually in Settings at any time. Who it's for Developers, QA, and support teams who need to shrink the time between "the user reported a bug" and "I understand exactly what happened."