Workflow · 5 min read · 31 October 2026

How to Write a Bug Report With Screenshots Developers Love

A simple template and annotation tips: arrows, numbered steps, blur and console details that make bugs easy to fix.

A clear screenshot saves a long email. A great one gets your bug fixed the same day. Here is a template and a few annotation habits.

The template

What I did: three or four numbered steps.
What I expected: one sentence.
What happened instead: one sentence plus the screenshot.
Where: page address, browser, window size and date.

Annotation habits

Arrow plus short label on the exact problem.
Numbered steps when the order matters.
Spotlight to dim everything except the issue.
Blur any private data of customers.
Crop to what is needed, but keep the page address visible.

Add technical details automatically

In PageSnap, press Copy bug report details. It copies the page address, browser, window size and time, ready to paste into GitHub, Jira or Slack next to the image. Use Record console first and errors from the page go into the report too.

Full page or part?

Use a full page capture when the bug depends on the whole layout, such as a footer overlapping content. Use a selection for a single broken component.