ClarShot is now on the Chrome Web Store, for Chrome, Brave and Opera too.

Guide

How to write a bug report with screenshots and a recording

The short answer

Say what you did, step by step, what you expected and what happened instead, and on which browser and device. Add a screenshot with the problem marked, or a short screen recording while it happens. Cover any private data before you send it.

On a phone? The ClarShot steps below are for a computer: ClarShot runs in Chrome and Edge on Windows, Mac, Linux and ChromeOS.

A good bug report lets someone else see the problem on their own screen, without asking you anything. Reports often bounce back because one of four things is missing: the steps, what you expected, the browser, or a picture of what happened. Here is how to include all of them.

What to include

  1. A title that says where and what. "Checkout: Pay button does nothing after a failed card" is found and understood; "Payment broken" is not.
  2. The steps, numbered. Start from a place anyone can reach, such as the home page after sign in, and write every click. If you are not sure a step matters, keep it.
  3. Expected and actual. One line each: what should have happened, and what happened instead. Copy error messages word for word.
  4. The environment. Browser and version, operating system, and the account type if it matters. In the browser, the version is under Settings, About.
  5. How often. Every time, sometimes, or once. A problem that happens once is still worth reporting, with that said.
  6. Evidence. A screenshot with the problem marked, a short recording if it involves movement or several steps, and any red errors from the browser console.

A template you can copy

Title: [Where] [what goes wrong], e.g. "Checkout: Pay button does nothing after a failed card"

Environment:
- Browser and version:
- Operating system:
- Page or app version:
- Account type or role (no passwords):

Steps to reproduce:
1.
2.
3.

Expected:

Actual:

How often: every time / sometimes / once

Attached: screenshot (problem marked), recording, console errors

Screenshots that help

  • Show enough context. Include the address bar or the page title, so the reader knows where it is, unless it holds something private.
  • Mark the problem. A box around the wrong value and an arrow to the button that fails save a paragraph of description. Number the marks if there are several, and use the same numbers in the steps.
  • Cover private data with a solid block. Customer names, emails, card numbers and tokens do not belong in a ticket. Blur can be reversed; our guide to hiding private information explains why.
  • Add the console. Press F12, open Console, and screenshot any red errors that appear when the problem happens.

When to record instead

Record when the problem depends on timing or on several steps in a row: a button that works the second time, a page that jumps, a form that loses what you typed. Keep it short, start just before the problem, and say what you are doing as you do it. A 30-second recording with your voice often replaces the whole list of steps.

Windows and macOS can record the screen without installing anything; the screen recording guide shows how.

With ClarShot

ClarShot does the screenshot, the marks, the cover and the recording in one place, in the browser, and sends nothing anywhere.

  1. Capture the page (Alt Shift V for what you see, Alt Shift F for the full page).
  2. In the editor, box the problem, add step numbers and an arrow, and cover private data with the hide tool (its button says Blur), which covers with Solid by default.
  3. Copy it and paste it into the ticket, or download a PNG.
  4. For a recording, open the Record tab, choose This tab, turn on Microphone under More options, and record while you reproduce the problem. Download the video and attach it.

A real recording: a failed payment retry, recorded and downloaded with ClarShot.

Common questions

How long should a bug recording be?

As short as it can be while still showing the problem: often under a minute. Start a few seconds before it happens.

Should I send a screenshot or a recording?

A screenshot for something wrong on the page, such as a wrong value or a broken layout. A recording for something that goes wrong over time. Both, when in doubt.

The file is too large for the ticket

Trim the recording to the part that matters, or share it through your team's drive and paste the link. For screenshots, a JPEG or WebP is smaller than a PNG.

Try it in ClarShotFree, no account, and nothing you capture leaves your computer.
Add to Chrome

ClarShot works in Chrome and Edge on a computer, not on phones. Send yourself the link and open it there.