Session Recorder → Session Recorder with Claude Code

Workflow

Debug browser bugs with Claude Code

Claude Code reads your repository, not your browser. Session Recorder records the browser and writes the missing half of the story to a file Claude Code can open.

Why Claude Code needs a recording

Claude Code is excellent at reading code and terrible at guessing runtime state, because it has no access to it. When you say “checkout is broken,” it has to infer the request you sent, the status you got back, the console exception that followed, and the order those happened in. Each inference is a chance to fix the wrong thing.

A recorded session replaces all of that inference with evidence: the exact POST /api/checkout body, the 500 response, the TypeError two hundred milliseconds later, the screenshot of the broken state, and your own voice saying what you expected instead.

The workflow

1. Start Session Recorder

   Click the toolbar icon to open the side panel, then click Record on the tab running your app. Chrome shows a “being debugged” banner — that is the extension tapping the network and console streams.

2. Reproduce the bug

   Use the app normally. Talk while you do it if you want narration in the report, drop a marker at the moment it breaks, and freeze the screen to draw an arrow at the thing that is wrong.

3. Export at Standard or Compact

   Stop recording and pick a detail level. Each level shows a live token estimate. Compact (about 50k tokens) is the usual choice for Claude Code; it stays self-sufficient without the asset files. Download the zip.

4. Unzip it inside the repository

   Claude Code works from your project directory, so put the report where it can read it — and where it can also open the referenced screenshots and network bodies.

   unzip ~/Downloads/checkout-500.zip -d .bugs/
   # .bugs/checkout-500/report.md
   # .bugs/checkout-500/screenshots/…
   # .bugs/checkout-500/network/…

   Add .bugs/ to .gitignore unless you want recordings in version control. Recordings can contain real data from your app.

5. Ask Claude Code to work from the recording

   Point it at the file and tell it what the timestamps mean:

   Read .bugs/checkout-500/report.md. It is a chronological recording of a
   browser session against this app, with [mm:ss] timestamps that join
   interactions, network requests, console output, and my spoken narration.
   Blockquotes are my own notes and are the most important signal.
   
   1. Summarize what I was trying to do.
   2. Find the first real failure and trace it to the code in this repo,
      citing the [mm:ss] timestamps and the requests involved.
   3. Propose the fix, then make it.
   
   Screenshots referenced in the report are in the same folder if you need them.

What Claude Code actually receives

report.md is one chronological narrative, not a pile of logs. It contains:

• every interaction with the element you touched, in order
• network requests with method, URL, status, timing, and bodies (or a JSON shape summary at Compact)
• console output and exceptions, linked to the request that caused them
• screenshot references at key moments, and every annotated screenshot
• your voice, transcribed and slotted in next to what you were doing
• markers and notes as blockquotes — never trimmed, at any level

See a complete example report if you want to read one before installing anything.

Recorded evidence vs. driving a live browser

Claude Code can also drive a browser directly through an MCP server or an extension. That is the better tool when the agent needs to explore — try inputs, check whether a fix worked, walk a flow it can trigger itself.

Recorded evidence is the better tool when the bug is yours to reproduce: it needs your login, your data, three steps in a specific order, a race that only happens on your machine, or a judgement call about what “wrong” looks like. Recording is also cheaper — the agent reads one file instead of spending turns clicking around.

The two compose well: record the failure, let the agent verify the fix live.

Nothing leaves your machine

The recording is written to IndexedDB in your own browser and exported as a zip you save yourself. There is no account and no backend. Passwords, authorization headers, and token-like fields are masked at capture time, before anything is written to storage. The only outbound call is optional voice transcription, and only if you add your own API key. More on the local-first design.