How to Record Screen for Bug Reports: A Step-by-Step Guide
A picture is worth a thousand words, but a video is worth a thousand pictures. When it comes to bug reports, screen recordings can be the difference between a ticket that gets fixed in minutes and one that sits in the backlog for weeks.
In this guide, we'll show you when to use screen recordings, how to create them with BugCapturer, and best practices for making your recordings as useful as possible.
When to Use Screen Recording vs Screenshots
Not every bug needs a recording. Here's a quick guide to help you decide:
| Bug Type | Screenshot | Screen Recording |
|---|---|---|
| Static layout issue | β Best choice | β Overkill |
| Missing or incorrect text | β Best choice | β Overkill |
| Animation or transition glitch | β Can't capture | β Essential |
| Hover state or tooltip issue | β Hard to capture | β Best choice |
| Multi-step workflow bug | β Needs many screenshots | β One recording covers all |
| Performance / lag issue | β Can't show speed | β Shows timing |
| Intermittent / timing-sensitive bug | β Can't capture | β Best chance to catch it |
General rule: If you can describe the bug clearly with one annotated screenshot, use a screenshot. If the bug involves movement, timing, or multiple steps, record a video.
How to Record Screen with BugCapturer
BugCapturer v1.2.0 makes screen recording simple and keeps everything local β no uploads, no third-party services.
Step 1: Open BugCapturer
Click the BugCapturer icon in your browser toolbar. The popup will appear with the available options.
Step 2: Start Recording
Click the "Record Screen" button. BugCapturer will ask for permission to share your screen β select the browser tab you want to record and click "Share."
Step 3: Record the Bug
Perform the steps that reproduce the bug. Recording controls appear at the bottom of the screen, showing elapsed time. You can pause and resume if needed.
Step 4: Stop and Review
Click "Stop Sharing" when you're done. The recording will appear in the BugCapturer popup for review.
Step 5: Trim (Optional)
If the recording has unnecessary footage at the beginning or end, use the trim tool to cut it down. Drag the handles to select the portion you want to keep.
Step 6: Extract Key Frames (Optional)
Highlight critical moments by extracting frames from the recording as PNG images. These can be used alongside the recording for quick reference.
Step 7: Attach to Your Bug Report
The recording is now ready to be included in your bug report. When you send the email via BugCapturer, the recording file is attached automatically.
Best Practices for Screen Recordings
Keep It Short
Aim for 15-30 seconds. If the bug takes longer to reproduce, consider trimming the recording to show only the relevant parts.
Show the Steps
Start the recording, then perform the reproduction steps. This gives developers both the visual evidence and the steps in one package.
Highlight the Problem
Use the annotation tools after recording β add arrows or boxes to draw attention to the issue area in extracted frames.
Check File Size
WebM recordings are typically 1-3 MB for 15-30 seconds. If your recording is much larger, try reducing the recording quality or trimming more aggressively.
Name It Clearly
Use descriptive filenames like cart-counter-stale-on-firefox.webm instead of recording-001.webm.
Common Use Cases
Hover State Bug
A dropdown menu that disappears when the cursor moves slightly off-target is nearly impossible to describe with a screenshot. A 5-second recording captures the exact behavior.
Animation Performance
A page transition that stutters or lags β a recording shows the actual frame rate and timing, which is much more informative than a description.
Multi-Step Form Bug
A form that fails on step 4 of 5 β instead of five screenshots, one recording shows the entire flow and where it breaks.
Troubleshooting
Recording permissions not showing
Make sure you're using a supported browser (Chrome 100+). If the permission dialog doesn't appear, check your browser's site settings for screen recording permissions.
Recording is too large
Try trimming the recording to the minimum length needed. If you're recording a high-resolution display (4K), consider reducing the browser window size before recording.
Can't hear audio
BugCapturer records the tab's audio by default. If you need to add narration, use your operating system's screen recording tool instead.
---
BugCapturer is a free Chrome extension for bug reporting and web feedback. All data processing happens locally in your browser β no servers, no accounts, no tracking.