QA Bug Bench

A checkout page that breaks on demand. Every button provokes something a bug report would have to describe — a console error, a failing request, a silent failure — and tells you what it did, so a click never looks like nothing happened.

Made to try bug-reporting tools on. It pairs with Screen Recorder · QA mode: record this page, then check the report against the panel on the right.

How to use it

  1. Open DevTools if you like, but you do not need it: the panel mirrors everything.
  2. Press buttons. Each one names what it did and what came back.
  3. If you are recording, stop and compare the downloaded logs with the panel — they should tell the same story, with the same timings.

Console and JS errors

What a report needs: the exact message, and the moment it happened.

Network

Status, duration and headers. This is what a HAR export is for.

Silent failure

The hardest kind to report: the screen says it worked. The only evidence is in the payload, and nobody looks at the payload unless they were taught to.

User steps · typed values are never recorded

Fill the password in. It must not appear anywhere — not in this panel, not in a recorder's log. A bug report does not need the tester's password.

The full scenario

Cause and effect, 130 ms apart. This is the one worth recording.

A POST returns 500 and, moments later, the TypeError it causes. Root cause and symptom land next to each other on the timeline — which is exactly what makes a report actionable.