Bug Recorder

Capture user interactions and generate bug recreation reports

# 🐛 Bug Recorder Chrome Extension > **🎬 Your Personal Bug Reporter** - Never struggle to explain a bug again! This extension automatically records everything you do on a webpage and generates a step-by-step bug report that developers can use to recreate issues instantly. ## 🎯 What It Does Transform your bug reporting workflow from hours of writing to **one click**! This powerful Chrome extension watches everything you do, captures all the important details, and generates professional bug reports that developers actually want to read. ### 🎥 Core Recording Features - **🖱️ Click & Input Tracking** - Automatically captures every button click and form entry with field labels, so developers know exactly what you interacted with - **⚠️ Error Detection** - Instantly records JavaScript errors and form validation messages as they happen, no more "it just broke" reports - **🌐 Network Monitoring** - Tracks API calls and identifies slow or failed requests, perfect for debugging backend issues ### 📄 Report Generation - **📥 HTML Export** - Download a beautifully formatted report with all steps, details, and visual elements - ready to share with your team - **📋 Text Copy** - One-click copy of a plain text version perfect for pasting into Jira, emails, or Slack - **📸 Screenshots** - Optionally capture visual snapshots at each step to show exactly what the page looked like ### 🧠 Smart Features - **🔄 Multi-Page Support** - Continues recording seamlessly as you navigate between pages - no need to restart for complex workflows - **🔒 Sensitive Data Masking** - Automatically hides passwords and credit card numbers to keep your reports secure - **⚙️ Customizable Settings** - Choose exactly what to record (clicks, inputs, errors, network, screenshots) - tailor it to your needs --- ## Features ### Capture Options - ✅ **Clicks** - Records all button clicks, links, and interactive elements - ✅ **Form Inputs** - Captures text entry, dropdowns, checkboxes with field labels - ✅ **Navigation** - Tracks page navigation and URL changes - ✅ **Scrolling** - Records scroll positions (optional) - ✅ **Console Errors** - Captures JavaScript errors and promise rejections ### Report Options - 📊 **Timestamps** - Include time for each action - 🔗 **URLs** - Track which page each action occurred on - 📸 **Screenshots** - Capture visual state at each step (optional) - 📥 **Export Formats** - Download as HTML or copy as text ## Usage ### Recording a Bug 1. **Click the extension icon** in the toolbar 2. **Configure capture settings** (checkboxes for what to record) 3. **Click "▶️ Start Recording"** 4. **Perform the steps** that lead to the bug 5. **Click "⏹️ Stop Recording"** when done ### Generating a Report After recording: 1. **Download HTML Report**: Click "📥 Download Report (HTML)" - Opens a beautiful, formatted report in your browser - Includes all steps with descriptions and details - Can be shared with developers 2. **Copy to Clipboard**: Click "📋 Copy to Clipboard" - Copies plain text version