Measure, inspect and annotate any webpage
Raval is a free, open-source browser extension for designers and developers.
Install it for Chrome (opens in new tab), or on this page.
How it works
Raval reads the page itself, not a picture of it, so every size, gap and colour is the value the browser is actually using.
Open it on any page and a small toolbar appears. Press 1 to 4 to switch between Inspect, Measure, Guides and Annotate, and ? to see every shortcut.
It is MIT licensed, collects no data and runs entirely in your browser. Start with the documentation.
Check your own work
Design review and frontend QA
Compare the build with the design without opening DevTools.
Measure the gap between any two elements- Line things up with guides that snap to edges
- Mark up what is off and screenshot it
Study any site
For designers and design engineers
Take apart a site you admire and see how it was put together.
- See the fonts, sizes and colours it uses
- Read its spacing and layout at a glance
- Pull out its design tokens as JSON
Get it on the Chrome Web Store (opens in new tab)