Bug Recorder

About

# 🐛 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