Every developer has received the bug report that just says "the save button is broken." No steps, no screenshot, no browser — so the first reply is always the same: "Can you reproduce it? What did you click?" A round-trip later, you finally have enough to start.
A good bug report answers those questions before they're asked. Here's what to include, and a faster way to capture it.
What a reproducible bug report needs
Whoever picks up the bug should be able to trigger it without messaging you. That means:
- Steps to reproduce — the exact clicks, in order, from a known starting point
- Expected vs. actual — what should happen, what actually happened
- Screenshots — the state at each meaningful step, and the failure
- Environment — browser, OS, and the URL or build
The steps and screenshots are the part people skip, because capturing them by hand is tedious.
The manual way (and where it breaks down)
The usual flow: reproduce the bug, take a screenshot at each step with your OS shortcut, crop each one, paste them into the issue, and write out the steps from memory. It works, but it's slow, and "from memory" is where steps get dropped — you forget the filter you'd set three clicks ago that actually triggers the bug.
A faster way: Procshot
Procshot is a free Chrome extension that records what you do in the browser and turns it into a step-by-step guide — one screenshot and one written step per action.
For a bug report:
- Click record, then reproduce the bug exactly as it happens
- Stop recording — you now have every click captured as a numbered step with a screenshot
- Annotate the failure screenshot with an arrow or box (and blur anything sensitive)
- Export to Markdown and paste straight into a GitHub / GitLab issue, or PDF for a ticket
Because Procshot captures each click as you go, you can't forget a step — the repro is the recording.
Why Markdown export is the useful part
A Markdown export drops into an issue tracker with the steps and images already formatted. The person triaging reads a numbered repro instead of a paragraph, and they can follow it without asking you anything.
One honest note: Procshot makes screenshot-based guides, not video. For a bug report that lives in an issue and needs to be read, numbered screenshots beat a screen recording someone has to scrub through.
Pricing
- Free: 5 guides per month, all export formats, all annotation tools
- Pro ($4.99/month): unlimited guides, custom branding, PDF templates, priority support
Install
Free, no Procshot account — your guides are built and stored in your browser (IndexedDB).
→ Install free: https://dev-tools-hub.xyz/extensions/procshot/?utm_source=dev.to&utm_medium=referral&utm_campaign=write-a-reproducible-bug-report
Chrome Web Store: https://chromewebstore.google.com/detail/procshot/ieblehdloggcpmkncplccjofeoakhkll
What's the one thing you wish every bug report included? For me it's the exact starting URL — half of "can't reproduce" is starting from the wrong place.
Built by S-Hub — minimal, MV3-native Chrome extensions.
Top comments (0)