Your debugging assistant • Zero setup • Free

Stop opening DevTools for every bug

Capture a bug → instantly know the likely cause → create a GitHub issue in one click.

Get Started FreeInstall Chrome Extension
Works with your existing workflow
No setup, no config
Privacy-first
TraceBug — Bug captured in 2 clicks
Ready
🔍Possible Cause(high confidence)
API POST /orders failed with 500 after clicking 'Place Order'
TL;DR
TypeError thrown on /checkout — Cannot read 'status' of undefined
Recent actions
●Clicked 'Cart' link
→Navigated to /checkout
●Clicked 'Place Order' button
⟳POST /orders → 500
Try it:Ctrl+Shift+B
INTERACTIVE DEMO

See it in action

Watch TraceBug capture a bug, find the root cause, and create a GitHub issue — in seconds.

Loading interactive demo…
11-second interactive walkthrough
Plays automatically · no install needed
The Problem

Debugging bugs is still painful

You open DevTools, copy logs manually, try to reproduce the steps, and write issues from scratch. Debugging a simple bug shouldn't take 10 minutes.

#bugs-and-issuesSlack workspace
S
Sarah (QA)2:14 PM
Hey, the vendor page is broken again 😤
A
Alex (Dev)2:15 PM
What do you mean? Works for me. What exactly happened?
S
Sarah (QA)2:16 PM
I clicked something and it showed an error. It stopped working.
A
Alex (Dev)2:17 PM
What did you click? What browser are you using? Can you reproduce it?
S
Sarah (QA)2:18 PM
I don't remember exactly what I clicked... I think it was the edit button? Or maybe save?
A
Alex (Dev)2:31 PM
I've been trying to reproduce this for 15 min. I need the exact steps. Did you see any error message?
S
Sarah (QA)2:45 PM
I didn't copy it down, sorry. Let me try again and see if it happens...
3 days later...
A
Alex (Dev)5 days later
Still can't reproduce this. Closing as 'cannot reproduce'. Please reopen if you see it again.
3+ days
Average time to reproduce a bug
40%
of dev time spent on debugging
60%
of bug reports are "cannot reproduce"
$10k+
monthly cost of wasted dev hours per team

The Real Pain Points

✗
Vague bug reports — "The page is broken" — no steps, no context, no error details
✗
Missing reproduction steps — Testers forget exactly what they clicked by the time they file the ticket
✗
No console errors captured — The stack trace that would solve the mystery is never included
✗
No network log — Failed API calls go unrecorded — developers have no idea which request broke
✗
Environment info missing — Which browser? Which OS? What viewport? Nobody knows.
The Solution

Meet your debugging assistant

TraceBug captures everything automatically — logs, network errors, user actions — and tells you what likely went wrong.

Before TraceBug

“The page is broken”

“I don't remember what I clicked”

“There was some red error text”

“It's Chrome... or maybe Firefox?”

→ 3+ days of back-and-forth
After TraceBug

✓ Exact steps: Click Edit → Select Inactive → Click Update

✓ TypeError: Cannot read 'status' at line 42

✓ POST /api/vendor/update → 500 Internal Server Error

✓ Chrome 121, Windows 11, 1920×1080

→ Developer fixes in minutes, not days
User Clicks
Tag, text, id, aria-label, role, data-testid — every click recorded with full element context
Form Inputs
Field name, type, value (passwords auto-redacted), placeholder — all captured securely
Navigation
Every route change tracked — from path, to path, timestamp, duration on page
Console Errors
Full error messages, stack traces, source files, line numbers — everything a dev needs
Network Calls
Fetch + XHR, URL, method, status code, duration — failed API calls flagged automatically
Screenshots
html2canvas-powered snapshots with smart auto-naming, annotation, and drawing tools
Environment Data
Browser, OS version, viewport size, device type, connection type — auto-captured
Voice Descriptions
Web Speech API — testers describe bugs by voice, transcript saved in the report
User Identity
setUser({ id, email, name }) attributes bugs to specific users — persisted across sessions
🔍The Differentiator

Know the cause instantly

No digging through logs. No guessing. TraceBug's root-cause engine reads the signals and tells you what likely went wrong — every time you capture a bug.

GitHub Issue — auto-generated
Checkout: “Place Order” Fails — 500 Server Error
🔍Possible Cause(high confidence)
API POST /orders failed with 500 after clicking ‘Place Order’
Endpoint
POST /api/orders
User clicked
‘Place Order’ button
Page
/checkout
Every bug report opens with this line. Developers know exactly where to look — no DevTools, no back-and-forth.

Three confidence tiers

Deterministic rules. No AI APIs. Just signals.

High confidence
🔍 API POST /orders failed with 500 after clicking 'Place Order'
Signal: Network failure + click context
Medium confidence
🔍 TypeError suggests undefined/null data — the response or upstream value was likely missing
Signal: Runtime error, no network failure
Low confidence
🔍 Click on 'Submit' did not trigger any observable effect
Signal: Only a click, no downstream signal

No digging through logs. No guessing.

Just clarity.

Features

Built to make debugging effortless

Four pillars that eliminate the manual work between “I found a bug” and “here's a fully-filled GitHub issue.”

⚡
Instant Capture
Report a bug in 2 clicks with the Ctrl+Shift+B shortcut. No menus, no forms.
🧠
Smart Debugging
Auto-detects errors, failed APIs, and the exact user action that preceded the bug.
📊
Full Context
Console logs, network failures with response snippets, and session steps — all captured.
🔗
One-Click GitHub Issues
Open a fully-filled issue instantly — no copy-paste, no formatting.
Plus everything else
Core Feature

Automatic Bug Reports

TraceBug converts user sessions into developer-ready bug reports with zero manual effort. Auto-generated titles, flow summaries, reproduction steps, and environment data — all structured and ready to paste into Jira or GitHub.

Recording

Session Recording

Every user action is silently captured — clicks with full element context, form inputs (passwords auto-redacted), navigation, selects, and form submissions. Sessions are capped at 200 events and stored in localStorage.

Monitoring

Console & Network Monitoring

Automatically intercepts console.error(), unhandled promise rejections, and all fetch/XHR requests. Failed API calls are flagged with status codes. Framework noise (Next.js, Vite, Webpack HMR) is filtered out automatically.

QA Tools

Screenshot Capture

Capture full-page screenshots using html2canvas with smart auto-naming based on event context. Annotate with rectangles, arrows, and text overlays using the built-in editor. Color picker, undo support, and session gallery included.

Voice

Voice Bug Description

QA testers describe bugs by speaking — no typing required. Uses the Web Speech API (completely free, no paid services). Auto-capitalizes, adds punctuation, converts spoken "period" and "comma". Works in Chrome, Edge, Brave, Opera.

Export

GitHub & Jira Integration

One-click export to GitHub Issues or Jira tickets. TraceBug generates properly formatted markdown (GitHub) and Jira markup with steps, errors, network log, environment, and screenshots. Copy to clipboard instantly — zero account setup needed.

Workflow

User Identification & Bug Flagging

Attribute bugs to specific users with TraceBug.setUser({ id, email, name }). Flag sessions as bugs with markAsBug() and get Slack-friendly 2-sentence summaries with getCompactReport(). All persisted in localStorage.

UX

Clickable Annotation Badges

Numbered badges on annotated elements are clickable — opens a popover showing intent, severity, and comment. The annotation list panel shows screenshots alongside annotations with inline previews and per-item download.

Extensibility

Plugin & Hook System

Extend TraceBug without forking. Plugins can filter events, enrich reports, and transform exports. Subscribe to lifecycle hooks (session:start, error:captured, screenshot:taken) for Slack/Discord webhooks, analytics, or custom integrations.

Works with Any Frontend Framework

ReactNext.jsVueNuxtAngularSvelteRemixAstroVitePlain HTML

2 lines of code. Zero runtime dependencies. Dual CJS/ESM output for universal compatibility.

How It Works

From Bug to Report in Under 60 Seconds

Four simple steps. No training required. Works for developers and non-technical QA testers alike.

STEP 01

Install in 30 Seconds

Install from the Chrome Web Store with one click, or add the SDK to your app with 2 lines of code. Also works in Edge, Brave, and Opera.

STEP 02

Start TraceBug Session

Click the 🐛 floating button or the extension popup to enable recording. A green dot confirms TraceBug is active.

STEP 03

Reproduce the Bug

Navigate through the app as you normally would. Click buttons, fill forms, trigger the error. TraceBug captures everything silently in the background.

STEP 04

Generate Bug Report Instantly

Open the dashboard, select the session, and click GitHub Issue or Jira Ticket. A complete, developer-ready report is copied to your clipboard in under 10 seconds.

⚡

Zero Meetings. Zero Back-and-Forth.

Tester finds bug → clicks one button → pastes into Jira. Developer has everything. The entire process takes less than 60 seconds.

Installation

Get Started in Under 2 Minutes

Choose the installation method that fits your workflow. SDK for developers, Chrome Extension for everyone else.

Install the SDK into any JavaScript/TypeScript project. Works with React, Vue, Angular, Next.js, Svelte, and plain HTML.

Terminal
$ npm install tracebug-sdk
app/layout.tsx or index.tsx
import TraceBug from "tracebug-sdk";

// Add this to your app entry point
TraceBug.init({
  projectId: "my-app",
  enabled: "auto",    // dev + staging only
});
💡

That's it!

A floating 🐛 button will appear in the bottom-right corner of your app. Click it to open the dashboard, view sessions, and generate bug reports.

Live Preview

What a Real TraceBug Report Looks Like

This is an actual report generated by TraceBug from the demo “Vendor Update” bug — complete, structured, and ready for a developer.

TraceBug Report — GitHub Issue Format
✓ Ready to paste
🐛 Vendor Update Fails — TypeError
Reported: 2026-03-12 14:23:01Session: tb_20260312_142301Duration: 18 seconds
── Environment ────────────────────────────
Browser
Chrome 121.0.6167.85
OS
Windows 11 Pro
Viewport
1920 × 1080
Device
Desktop
Connection
4G — fast
Page
/vendor
Events
6 captured
Errors
1 critical
── Steps to Reproduce ─────────────────────
1.Navigate to /vendor
2.Click "Edit" button (role=button, id=vendor-edit-btn)
3.Select "Inactive" from Status dropdown (was: "Active")
4.Click "Update" button (type=submit)
5.Observe TypeError thrown in browser console
── Console Errors ──────────────────────────
TypeError — Critical
Cannot read properties of undefined (reading 'status')
Stack trace:
at updateVendor (vendor/page.tsx:42:18)
at handleSubmit (vendor/page.tsx:67:5)
at onClick (vendor/page.tsx:112:24)
── Network Log ─────────────────────────────
MethodURLStatusDurationTime
GET/api/vendor/123200124ms+0.3s
POST/api/vendor/update50089ms+3.5s
── Session Timeline ─────────────────────────
+0.0s→navigate/ → /vendor
+1.2s●clickbutton "Edit" [id=vendor-edit-btn]
+2.1s◆selectStatus: "Active" → "Inactive"
+3.4s●clickbutton "Update" [type=submit]
+3.5s⟳apiPOST /api/vendor/update → 500
+3.5s✕errorTypeError: Cannot read 'status'
Comparison

Why not just use existing tools?

Built for speed. Not dashboards. See how TraceBug compares to the heavyweight monitoring platforms developers already use.

Feature
TraceBug
Recommended
Sentry
LogRocket
Instant bug capture
Root cause hint
2-click workflow
Setup required
Free, no account
Data stays in browser

Built for speed.

Not dashboards.

TraceBug vs. Manual Bug Reporting

And here's how it compares to the tester-writes-a-Slack-message workflow most teams still rely on.

Steps to reproduce
Written manually, often incomplete or inaccurate
Auto-generated from session timeline with exact element selectors
Console errors
Manually copied (if the tester even opened DevTools)
Auto-captured — full message, stack trace, source file, line number
Network logs
Almost always missing — developers have to guess which API failed
Full API log — URL, method, status code, duration, timestamp
Screenshots
Manually taken with OS screenshot tool, often without context
Auto-captured via html2canvas with smart naming and annotation support
Browser & OS info
Usually missing or just "Chrome on Windows"
Auto-captured — browser version, OS, viewport, device, connection type
Time to create report
30–60 minutes of back-and-forth
Under 60 seconds from bug found to report ready
Developer time to reproduce
3+ days average, often closed as "cannot reproduce"
Minutes — everything needed is in the report
Voice description
Not possible — requires typing everything
One-click voice recording, transcript auto-saved to report
Framework compatibility
N/A — manual process regardless of framework
React, Vue, Angular, Next.js, Svelte, Nuxt, Remix, Astro, plain HTML
Privacy / data storage
Data sent to external bug tracker (Jira, Linear, etc.)
All data stays in localStorage — zero backend, no server calls
Cost
Dev time @ $80–200/hr × hours of back-and-forth
Free — open source, zero API keys, no subscriptions
Start Using TraceBug — Free
No account needed • No API keys • Works in 2 minutes
Use Cases

Built for developers who ship fast

Every workflow benefits. No learning curve. No dashboards to maintain.

Frontend developers
Fixing UI bugs without opening DevTools every time.
Indie hackers
Building a SaaS. Every minute counts — debug in seconds, ship faster.
Small product teams
Reporting bugs instantly — no back-and-forth between dev and PM.
QA engineers
Speeding up reports. Zero typing — auto-filled with everything a dev needs.
Free · No account required

Fix bugs faster starting today

Install in seconds. No setup required. Works with every frontend framework.

Install ExtensionGet Started
No API keys
No server
Data stays in your browser
Open source