How to write a bug report with a useful screenshot
Show the unexpected result, keep useful context, and pair an annotated screenshot with steps someone else can reproduce.
“It looks wrong” tells someone there is a problem. A good screenshot and a few precise sentences help them find it. The aim is to show what happened, explain what you expected, and make it possible for another person to try the same steps.
1. Capture the state where the problem appears
Take the screenshot while the error or unexpected layout is visible. Capture the relevant area rather than your whole desktop, but keep helpful context such as the page heading, the selected tab, or the control you just used.
If the issue involves two screens or states, keep them as separate images and label them in the report. A screenshot shows one moment; it cannot explain a timing problem by itself. Describe any delay, repeated clicks, or intermittent behavior in words.
2. Mark the result, not every element
Open the capture in Framio and put an arrow next to the unexpected result. Use a rectangle for an area with an alignment or spacing problem. A magnifier can help with a small visual defect without forcing the reader to zoom into the whole image.
Avoid covering the error message with a pin. Keep its text readable and include the exact wording in the written report so someone can search for it. If several things are wrong, number them and describe each one separately.
3. Add the details a screenshot cannot show
Write down the steps you took, starting from a state the reader can reach. Include what you expected and what happened instead. “Clicking Save closes the dialog without saving the new name” is more useful than “Save is broken.”
Mention the app or browser version, operating system, and anything that seems relevant, such as display scaling or a narrow window. Say whether you can reproduce the problem every time. You do not need to guess at the cause to write a useful report.
4. Share a clean copy
Check for email addresses, customer names, tokens, and unrelated windows before sending the image. Remove sensitive content or cover it completely with an opaque shape, then inspect the exported file. Softening text with blur is not a reliable way to remove it.
Save the screenshot as PNG or WebP and attach it to the report beside the reproduction steps. Keep the original capture if you may need to show more context later. Framio’s current desktop editor works with still images; describe motion and sequences in the report rather than expecting the image to show them.
A useful report gives the next person a starting point: the state to reproduce, the result to look for, and the result you expected.