What screenshots should I include in a bug report?

A tight capture of the broken element with a box and an "expected" label, a wider capture showing which page and state, and the browser console with any errors. Add an "expected" example if you have one.

How do I show expected versus actual behaviour in a bug report?

Capture both if you can, label them "expected" and "actual", and place them side by side or one after the other in the report.

Should I attach the HTML of the page to a bug report?

For layout and rendering bugs, yes -- a self-contained HTML snapshot lets the developer inspect the real elements. Save it as one file with a tool that inlines styles and removes scripts.

← Back to blog

How to Take Screenshots for a Bug Report Developers Will Thank You For

September 22, 2026

Developers triaging bugs work from what they are given. A report that says "the button does not work" with a full-screen capture at 30% zoom costs them a round trip; one with a tight capture of the button, its state, and the error in the console gets fixed in the same afternoon.

The three captures that cover most bugs

The wrong thing -- a tight area capture of what is broken, with a box around it and, if it is not obvious, a label saying what you expected instead.
Where it is -- a wider capture of the page so the developer knows which screen and which state. The URL, with any IDs blurred, if it is a specific record.
The console -- F12, Console tab, capture any red lines. This is the one most reporters skip and the one developers want most.

Show expected versus actual

If you have an example of the correct behaviour -- another record, another browser, yesterday -- capture it too and label the pair "expected" and "actual". Two labelled images answer a question that a paragraph struggles to.

Send the page, not just a picture of it

For layout bugs and anything where the markup matters, a snapshot of the page as an HTML file lets the developer inspect the real elements rather than guess from pixels. Demorta’s recorder bar has Save as HTML for exactly this: one file, styles inlined, scripts removed, the page as it was on your screen. Attach it alongside the screenshots.

Blur, then attach

Bug trackers are seen by more people than the developer, and often by contractors. Pixelate customer names, emails and IDs before attaching. The whole workflow -- area capture, box, label, blur, download -- is a minute in Demorta’s screenshot tool. Try the free screenshot tool.

Frequently asked questions

What screenshots should I include in a bug report?: A tight capture of the broken element with a box and an "expected" label, a wider capture showing which page and state, and the browser console with any errors. Add an "expected" example if you have one.
How do I show expected versus actual behaviour in a bug report?: Capture both if you can, label them "expected" and "actual", and place them side by side or one after the other in the report.
Should I attach the HTML of the page to a bug report?: For layout and rendering bugs, yes -- a self-contained HTML snapshot lets the developer inspect the real elements. Save it as one file with a tool that inlines styles and removes scripts.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →