How-to · Measurement
How to measure elements on a web page in pixels
The short answer
Click the Screen Ruler icon and drag across anything on the page to read its size in pixels, or hover an element to get its rendered dimensions. The overlay only runs on the tab where you invoke it, and Esc removes it completely.
- 1
Click the Screen Ruler icon on the tab you want to measure.
- 2
Drag across any region to read its width and height in pixels.
- 3
Switch to element mode and hover to get an element's rendered size.
- 4
Drop a guide if you need a fixed reference line for more checks.
- 5
Press Esc to remove the overlay completely when you're done.
The usual ways to answer "how many pixels is that?" are a screenshot pasted into an image editor, or a detour through DevTools' box model. Both work; both are heavy for a two-second question. Screen Ruler puts a measuring overlay on the page you're already looking at — click the icon, then drag or hover to read sizes in pixels.
Drag to measure anything visible
Drag mode draws a box between any two points and shows its width and height as you go. Because it measures the rendered page rather than the DOM, it works on things the inspector can't cleanly select: a region inside a canvas, part of an image, the gap between two unrelated components, an embedded map.
Hover an element for its exact size
Element mode snaps to whatever is under your cursor and reads out its rendered dimensions — the size the browser actually painted, not the width someone wrote in the stylesheet before padding and scaling had their say. For "is this avatar really 48px?" it's one hover instead of an inspect-and-scroll through computed styles.
Drop guides for repeated checks
Guides are persistent horizontal and vertical lines you place on the page. Pin one to an edge you care about and measure other elements against it — useful when one reference position has to hold across a whole section, or when you're checking the same offset in five places and don't want to re-drag it five times.
Pick a color while you're there
The fourth mode is a color loupe: hover any pixel and read its value. Measuring a component and grabbing its exact background color usually happen in the same breath, so the overlay does both.
Esc removes it, and nothing is watching
Screen Ruler has no host permissions and no content script waiting on every site you visit. The overlay is injected via activeTab only when you click the icon, pressing Esc removes it completely, and measurements and picked colors stay on your machine — the extension makes no network calls.
When DevTools is still the right tool
Screen Ruler measures what's rendered. If you need the authored CSS — the margin as written, which breakpoint applies, why the box ended up that size — open DevTools; that's what it's for. The two answer different questions: DevTools explains the layout, the ruler verifies it. For the quick question of what size something actually is on screen, the ruler is the shorter path.