Frontend QA with Raval

Catch spacing and alignment bugs before they reach production. Raval 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 Raval with Option+Shift+C (Alt+Shift+C on Windows and Linux). Switch to Measure mode (2) and click the two elements you want to compare — Raval 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, pin up to five elements in Measure mode to see every gap between them at once. Click an element in Inspect mode to verify its 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 Raval with Page Ruler Redux.

Install Raval for QA (opens in new tab), or view the source on GitHub (opens in new tab).