tool · one of 34free, 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 itPress ⌘+K on any tab and type ruler.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin 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.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits