Raval — Measure & Inspect Web Pages

Measure, inspect and annotate any webpage: sizes, gaps, fonts, colours and guides. Free and open source.

Raval is a free, open-source Chrome extension for looking closely at any webpage. Open it on a page and you can read sizes, measure gaps, check fonts and colours, line things up with guides, and mark up what you find. No screenshots, no switching apps, no digging through DevTools. INSPECT Hover over anything to see its width and height. Click a piece of text or an element to see its font, size, weight and line height, its colours in HEX, RGB or HSL, and its margin, padding, border and corner radius. Click any value to copy it. MEASURE Click one element, then another, and Raval shows the gap between them in pixels. Pin up to five at a time to check a whole row or column. Click a pinned element again to remove it. GUIDES Place horizontal and vertical guides anywhere on the page. They snap to the edges of nearby elements. Click a guide to delete it, or drag it to move it. Guides are saved for each page, so they are still there when you come back. ANNOTATE Mark up the page as you review it: size callouts, notes, arrows you can bend, and a freehand pen, in a choice of colours. Right-click anything to remove it. ALSO INCLUDED • Screenshots: save the whole view or just a region, with your measurements and notes on it • Design tokens: list a page's CSS custom properties and export them as JSON • Rulers: pixel rulers along the edges of the window • Undo: Cmd/Ctrl+Z works in Measure, Guides and Annotate KEYBOARD SHORTCUTS Open Raval with Alt+Shift+C (Option+Shift+C on a Mac), or click its icon. Press 1 to 4 to switch between Inspect, Measure, Guides and Annotate, S for a screenshot, ? to see every shortcut, and Esc to close. FREE AND OPEN SOURCE Raval is MIT licensed. There is no account and no data collection. Your settings and guides are stored only in your browser. Website: https://raval.solomonakuson.com GitHub: https://github.com/heysolomon/raval