Frontend QA with Calipers

Catch spacing and alignment bugs before they reach production. Calipers lets you measure any element on a live page in seconds.

The problem

Layout bugs are hard to spot by eye. A button might be 22px from its neighbour when the spec says 24px. A card grid might drift at certain breakpoints. DevTools shows computed values, but measuring the gap between two arbitrary elements still takes too many steps.

QA workflow

Activate Calipers with Cmd+Shift+M (or Ctrl+Shift+M). Switch to Measure mode (2) and click the two elements you want to compare — Calipers draws the distance between their closest edges and labels it in pixels. Click the label to copy the value to your clipboard.

For broader checks, use Spacing Grid mode (5) to see all gaps between sibling elements at once. Toggle the box model overlay (B) to verify padding and margin values match the design system.

Before you ship

Resize the viewport and re-measure at mobile, tablet, and desktop breakpoints. Pin alignment guides (3) to check that columns and headings line up across sections. Export a screenshot (S) with measurements baked in to attach to your PR or ticket.

Related

Designers verifying specs should read the design handoff guide. Compare Calipers with Page Ruler Redux.