FrontBug: notes that know the component

Anatomy of a note

Five things travel with every note.

The component, not a guess

A verified unique selector, the framework component that rendered the element and, on development builds, the file and line it came from.

SubscribeButton in PricingCard

An element capture produced by the extension, cropped to the button with padding.

The element, captured on its own.

The logs around it

Console and network from the thirty seconds before you wrote it.

Who and when

Author and timestamp on every note, so a shared review stays readable.

Where it lives

Page, scroll position and viewport size, because layout bugs depend on all three.

Three ways to point at something.

An element

Right-click it. The note is anchored to that component and survives a reload.

A region

Drag a rectangle. FrontBug lists every component inside it, ranked by overlap.

The whole page

Full height in one image, sticky headers handled, with the pins drawn on top.

noise   Sentry is not configured
noise   GET /favicon.ico 404
noise   net::ERR_BLOCKED_BY_CLIENT
high    POST /api/checkout 500
        2.1s after your click on Subscribe

The error that matters, not every error.

An unconfigured reporter and a missing favicon are not your bug. FrontBug keeps them, summarises them by pattern, and puts the first-party failure that followed your click at the top.

Nothing is discarded. You can always open the full log in the bundle.

Local by default

It works with the network off.

Capture, annotate and export on a plane or on a locked-down client network. Everything stays in your browser until you export a bundle or connect a project.

What the developer receives.

One folder. Readable on its own, and shaped so a coding agent can work straight from it.

Read first

report.md: Every note with its component, source location and log window.
AGENT.md: How to work through the report, for Claude Code or Cursor.

The evidence

screenshots/: Element crops, regions and full pages with the pins drawn in.
notes.json: The same notes as data, with the full component fingerprint.
logs/: Console, network, user actions and navigation, as newline-delimited JSON.

A person reviewing a website on a laptop at night.

Two people, one artifact.

Whoever finds it works in the browser, next to the page. Right-click, type, move on. No ticket form, no screenshot pasted into a chat.

Whoever fixes it opens a folder that already says which component broke, what the console said and what the user had just done.

Where this is.

The extension runs today: sessions, element and region notes, component fingerprints, full-page capture, log triage and the exported bundle all work in Chrome. The review hub for teams is specified and not built yet. This page will say so until it changes.

Notes that know the component.

Identifies components in