tool · one of 34 free, no counter
Ruler
How far is that from the edge, exactly?
The browser will tell you an element’s box and nothing about the space around it. Two rules and a set of pinned guides is how that gets measured in every design tool, and it is the one thing devtools has never had. Guides are stored per origin as document coordinates, so a column edge pinned on one page of a site is there on the next.
Reach it Press ⌘ + K on any tab and type ruler. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
two rules down the edges, with pinned guides and a choice of zeroWhen a gap has to be checked against a spec rather than eyeballed, and when the same vertical edge matters across several pages of one site - that is the case the per-origin store exists for.
Asked about this tool
4 of themWhat does changing the origin actually move?
The numbers, never the rules and never a pinned guide. A guide is a document coordinate; the origin decides what it is called. The alternative would be a setting that appeared to move your measurements.
Why are guides kept per site rather than per page?
Because a column edge is a fact about a site’s layout rather than about one page of it. They come back the moment the rules are switched on, and an origin whose last guide is removed is dropped from the store entirely.
Do the rules come back after a reload?
No. The guides come back with them when you switch them on again, which is the distinction: a stored measurement is not a drawn surface.
Does the ruler change the page’s layout?
No. Both rules are drawn in our own layer above the document and the page underneath is not reflowed, which is the same promise every overlay here makes.
how to use ruler
- Open Ruler. Two rules follow the pointer and the scroll position.
- Measure from the viewport's zero, or from the rules' own corner.
- Pin guides on the edges that matter. They are stored per origin as document coordinates.
- Open another page on the same site and the guides are where you left them.
70 of these · no host permissions · three free audits