Capture the bug. Let AI fix it.
Stop spending 30 minutes explaining bugs to Claude Code or Cursor — your AI can't fix what it can't see. One shortcut captures everything — replay, console errors, network calls, a repro timeline — into one offline .html file your agent reads over MCP. A human dev can just open it too.
Capture and export locally. No account or server required. Free & open source.
API POST /api/orders failed with 500 after clicking 'Place Order'
TypeError on /checkout — Cannot read 'status' of undefined.
- 00:02click "Cart"
- 00:04nav → /checkout
- 00:09click "Place Order"
- 00:09POST /api/orders → 500
- Open source
- MIT licensed
- Privacy first
- Works offline
- Star on GitHub
From bug to fix in three steps
No forms, no back-and-forth, no “cannot reproduce.” Just the bug, captured and handed off.
Capture
Hit the shortcut when a bug happens. The full session — replay, console, network, screenshot — is recorded automatically.
Share
You get one self-contained report. Send it anywhere — no account, no upload, nothing to set up on the other end.
Fix
Your developer opens it offline, sees the root cause first, and knows exactly where to look before scrolling.
See it in action
A crash happens, TraceBug catches it live, and one click builds the ticket — console error, failed request, and repro steps attached. Recorded on the live sandbox; nothing staged.
The whole bug flows into one file — and out to any AI
Replay, console, network, and repro steps land in a single .html. From there, any MCP-connected agent reads it and starts fixing — no uploads, no accounts.
From “it's broken” to a fixable ticket
Vague reports cost days of back-and-forth. TraceBug records what actually happened — down to the button that was clicked and the request that failed.
- “The page is broken”
- “I don't remember what I clicked”
- “There was a red error message”
→ 3+ days of back-and-forth
- › Click Edit → Select Inactive → Click Update
- ✕ TypeError: Cannot read 'status' · line 42
- ⟳ POST /api/vendor → 500 · Chrome 121 · Win 11
→ Fixed in minutes
Captured automatically, every session
Clicks
Tag, id, aria-label, role, data-testid
Network
Method, URL, status, duration — failures flagged
Console
Errors, stack traces, source file, line
Screenshots
Full-page or region · annotate · draw markup
Navigation
Every route, timestamp, time on page
Environment
Browser, OS, viewport, device, connection
What your developer actually receives
A real report, generated from a real bug. It opens with TraceBug's root-cause hint, so the developer knows where to look before scrolling a single line.
Vendor Update Fails — TypeError
API POST /api/vendor/update failed with 500 after clicking 'Update' — the thrown TypeError suggests the response body was missing.
Environment
Steps to reproduce
- 1Navigate to
/vendor - 2Click “Edit” button (role=button, id=vendor-edit-btn)
- 3Select “Inactive” from Status dropdown (was: “Active”)
- 4Click “Update” button (type=submit)
- 5Observe TypeError thrown in browser console
Console errors
Network log
Session timeline
Hand the bug straight to your AI coding agent
TraceBug exports are agent-ready. Point Claude Code, Cursor, or any MCP client at the report — it reads the console, network, repro steps, and screenshots, then fixes the bug in your codebase. Fully local; nothing is uploaded.
$ claude mcp add tracebug -- npx -y tracebug mcpOne-time setup. No --dir needed — the server auto-finds reports in your Downloads/Desktop. See a real transcript →
Export
Capture the bug and click Export .html — one self-contained report lands in your Downloads.
Connect
Register the local MCP server once (command below). It auto-discovers reports — no path setup.
Fix
Your agent reads the console, network, repro steps, and screenshots — then fixes it in your code.
Monitoring platforms watch production. TraceBug files the bug.
Sentry and LogRocket are built for observability — TraceBug complements them for the moment someone hits a bug and needs to hand it to a developer. In that hand-off it does what dedicated bug-reporting tools do, with no account and nothing to upload.
Already running Sentry or LogRocket? Keep them — TraceBug lives in the browser and doesn't touch your monitoring stack. It just makes the hand-off to a developer effortless.
Early testers using TraceBug on real bugs
Real quotes, real names, real bugs — captured before launch. No stock photos, no invented reviews.
“TraceBug helped me report a bug instantly. I didn't have to explain every step manually — the report already captured the important details.”
Rohit Singh“Finally, a bug reporting tool that doesn't make you fill out a huge form. Just capture what happened and share the report.”
Khushi Kumari“Instead of saying 'something went wrong,' I can send a report with the actual evidence.”
Steve“It gives you much more useful information than just sending a screenshot.”
One click to capture. One command to debug with AI.
Install the Chrome extension and capture a bug on any site — no code. Hand the exported report to your AI coding agent through the local MCP server to fix it. Embedding in your own app instead? The SDK is two lines.
For QA, designers, PMs — anyone who reports bugs. Capture on any site, nothing to add to the codebase.
Hand the report to Claude Code, Cursor, or any MCP client — it debugs from the real console, network, and repro data.
Questions, answered honestly
The things people ask before installing — including the catch (there isn't one).
TraceBug is a free, open-source bug-capture tool. When a bug happens in the browser, it captures the session replay, console errors, network requests, screenshots, and reproduction steps, and exports everything into one self-contained .html file that a developer — or an AI coding agent — can open and investigate. There's a Chrome extension for any website, and an npm SDK (tracebug-sdk) for your own app.
Ship better bug reports today
Install in 30 seconds. Works in any front-end framework. Your data stays yours.