InspectDev
Page Ruler
Not sure if that gap is 12px or 16px? Page Ruler gives you pixel-precise measurements between any two elements — width, height, angle, and diagonal. Snap to element edges automatically. Measurements stay on screen while you adjust your code.
About Page Ruler
Page Ruler measures anything on your screen — distances, spacing, and alignment between elements. Click to set a starting point, drag to measure, and keep the measurement visible while you adjust your code.
Features
Measure anything on the page with pixel-perfect precision.
Click-to-Measure
Click to set the ruler origin, drag to your target. Live readouts show width, height, angle, and diagonal distance as you move.
Element Snap
The ruler snaps to element boundaries, borders, and content edges automatically. No more estimating where one element ends and the next begins.
Alignment Guides
Horizontal and vertical guide lines appear as you measure, helping you verify alignment across the full page at a glance.
How to use
- 1
Select Page Ruler from the InspectDev toolbar.
- 2
Click anywhere on the page to set the measurement origin.
- 3
Drag to the target — the ruler displays width, height, angle, and diagonal distance live.
- 4
Release to keep the measurement on screen as a reference, or press Escape to clear.
Try Page Ruler free
Page Ruler is included in the free version of InspectDev. Upgrade to Pro for advanced features like persistent workspaces and team sync.
