Ruler and Measurement Extensions for Chrome: Pixels, Spacing and Design QA

Which ruler extension for Chrome should you use?

Use a dedicated page ruler extension when you want to drag a box across anything on screen and read its size, and use Chrome DevTools when you need exact CSS values such as padding and margin. Most people doing design QA end up using both.

Two ruler extensions dominate the Chrome Web Store results for this search. Page Ruler describes itself simply: measure page elements' size in pixels with an easy-to-use ruler. Ruler Measurement, also called Chrullex (short for CHrome RULer EXtension), targets the same job. Neither is in our reviewed catalogue yet, so check each listing for its current features, pricing and permissions before installing.

If you only measure something once a month, skip the extension and use DevTools. If you review layouts daily, a one-click ruler saves time because it works on any area, including whitespace that has no element of its own.

How do you enable a ruler in Chrome?

Chrome has no on-page ruler switch for normal browsing, so you enable one by installing an extension or by turning on the rulers inside DevTools. The extension route takes about a minute.

1. Open the ruler extension's page in the Chrome Web Store and click Add to Chrome.
2. Read the permission prompt, then click Add extension.
3. Click the puzzle-piece Extensions icon at the right of the address bar and click the pin next to the ruler so its icon stays visible.
4. Reload any tab that was already open (Ctrl+R on Windows, ChromeOS and Linux, Cmd+R on Mac). Extensions often cannot draw on pages loaded before they were installed.
5. Click the ruler icon on the page you want to measure. The cursor usually changes to a crosshair to show the ruler is active.
6. Press Esc or click the icon again to switch it off; the exact exit method varies by extension.

Some extensions also let you assign a keyboard shortcut. Open chrome://extensions/shortcuts, find the ruler, and type the key combination you want in the activation box. A shortcut is handy when you measure dozens of elements while scrolling through a long page.

How do you use a page ruler extension for real design checks?

Activate the ruler, drag a rectangle from one edge to the other, and read the width and height it reports. The value is in the skill of choosing edges, not in the dragging.

Common checks that a ruler handles faster than DevTools:

• Gaps between cards or grid items. Drag from the right edge of one card to the left edge of the next; the width is the gutter. DevTools cannot select empty space directly.
• Vertical rhythm. Measure the space between a heading and the paragraph below it on several pages to spot inconsistent spacing.
• Tap target size. On a narrow window, measure buttons and links to check they are comfortably large for touch.
• Ad and banner slots. Confirm a placeholder matches the size your ad network or client specified before creative is uploaded.
• Image containers. Check the rendered size of a hero image so you export assets at the right dimensions, not guesswork.
• Alignment drift. Measure the left offset of a logo, heading and body text to confirm they share the same edge.

Many ruler extensions let you nudge the box one pixel at a time with the arrow keys, and some snap to element edges. Check the listing or the extension's options page, since these behaviours differ between tools and are the main reason to prefer one over another.

For a written record, capture the measured area with a screenshot tool rather than copying numbers into chat. A full-page capture from our full-page screenshot picks keeps the context around the measurement visible.

Can you measure elements in Chrome without an extension?

Yes. Chrome DevTools shows element dimensions on hover, lists the full box model, and can draw rulers along the top and left edges of the page. It is free, already installed and reads values straight from the browser's layout engine.

1. Open DevTools with F12 or Ctrl+Shift+I on Windows, ChromeOS and Linux, or Cmd+Option+I on Mac.
2. Press Ctrl+Shift+C (Cmd+Shift+C on Mac) to enter inspect mode, then hover any element. A tooltip shows its tag, class and rendered width by height.
3. Click the gear icon (Settings), open Preferences, and under Elements tick Show rulers on hover. Rulers now appear along the page edges whenever you hover an element in inspect mode.
4. Select an element and open the Computed tab in the Elements panel. The box-model diagram shows content size, padding, border and margin as separate numbers.
5. For a fixed viewport, toggle the device toolbar with Ctrl+Shift+M (Cmd+Shift+M on Mac), open its three-dot menu and choose Show rulers.
6. To save a single element as an image, right-click its node in the Elements panel and choose Capture node screenshot.

The limitation is that DevTools measures elements, not arbitrary spans. To find the distance between two unrelated items you have to inspect both and do arithmetic from their positions, which is exactly where a drag ruler wins. Google documents these features in the Chrome DevTools guide.

Why do measurements differ between tools?

Different tools count different kinds of pixels. Browsers measure in CSS pixels, while screenshots and screen-level rulers often count device pixels, and the two only match on a standard-density display at 100% zoom.

CSS pixel

The unit web layouts are written in. DevTools and most page ruler extensions report this, and it is the number a developer needs.

Device pixel

A physical dot on your screen. High-density displays, such as Retina Macs and many modern laptops, pack two or more device pixels into each CSS pixel.

Device pixel ratio

Device pixels per CSS pixel. A screenshot taken on a 2x display is twice as wide in pixels as the CSS layout it shows.

Browser zoom

Scales CSS pixels up or down. At 125% zoom an element looks larger, but its CSS width stays the same in DevTools.

This is the usual cause of a designer and developer disagreeing about a size. The designer measures a screenshot in an image editor and gets 640; the developer inspects the element and sees 320. Both are right: the screenshot came from a 2x display.

Can you get a ruler on your screen for real-world measuring?

Only roughly. A browser ruler can show centimetres or inches, but on-screen size depends on your monitor's pixel density, so you must calibrate it against an object of known size before trusting it for physical measurements.

A standard bank card is a common reference because its dimensions are fixed by an international standard (85.60 mm wide). Hold the card against the screen, adjust the calibration setting until the on-screen ruler matches, and only then measure. Recalibrate if you move the browser window to a different monitor.

Chrome extensions also stop at the edge of the browser tab. They cannot measure a desktop app, a PDF opened in another program, or the gap between two windows. For screen-wide measuring on Windows, Microsoft's free PowerToys suite includes a Screen Ruler utility that works across every app. macOS has no equivalent built in, so Mac users typically rely on third-party utilities or the screenshot tool's crosshair, which shows coordinates while you drag.

If your search was about a ruler on Google's own products, the answer is simpler: Google Docs has one. Open a document and choose View then Show ruler to display margins and indents along the top and left edges.

Are ruler extensions safe, and what permissions do they need?

A ruler only needs to draw an overlay on the tab you are looking at, so the safest ones request access to the current tab when you click them rather than to every site all the time. Treat broad access as a reason to look twice.

Ideally a ruler asks for activeTab, which grants temporary access to a page only after you click the icon. If an extension instead shows Read and change all your data on all websites at install, you can still limit it: open chrome://extensions, click Details on the ruler, and set Site access to On click. For a tool you invoke by hand anyway, you lose nothing. Our permissions guide explains each warning in plain English.

Other points worth checking on the listing: when it was last updated, whether the publisher has a website, and whether the privacy disclosure says it collects browsing data. A measuring tool has no reason to send page content anywhere. Our review methodology lists the same signals we use when deciding what to include.

Platform support is narrow. Ruler extensions work on Chrome for Windows, Mac, Linux and ChromeOS. Chrome on Android and iPhone does not support extensions at all, so for mobile layouts use the DevTools device toolbar on a computer instead.

Which extensions pair well with a ruler for design QA?

Size is only one part of checking a layout against a design. Colour, typography and a shareable capture cover most of the rest, and each has a well-established extension.

Browse more tools like these in our design extensions category. A tidy setup is three pinned icons: ruler, colour picker and font finder, with a screenshot tool one click away in the Extensions menu.

Why is my ruler extension not working?

The most common cause is a page the extension is not allowed to touch, followed by a tab that was open before you installed it. Work through these in order.

• Nothing happens when you click the icon: reload the tab. Pages loaded before installation often lack the extension's script.
• It never works on certain pages: Chrome blocks all extensions on chrome:// pages, the Chrome Web Store and some built-in viewers. Open the content in a normal web page instead.
• Site access is restricted: if you set the ruler to On specific sites, it stays inactive everywhere else. Check Details in chrome://extensions.
• Numbers look wrong: reset zoom with Ctrl+0 or Cmd+0 and compare with the DevTools hover tooltip to see whether the tool reports CSS or device pixels.
• The overlay hides behind page content: sticky headers, video players and embedded frames can sit above the ruler. Scroll so the element is clear, or measure inside the frame with DevTools.
• Two overlays clash: another inspection or screenshot extension may be active at the same time. Switch one off from the toolbar.
• Work or school Chrome: administrators can block extensions by policy. Visit chrome://policy to see if restrictions apply, and use DevTools if it is still allowed.

If none of these help, the extension may not have been updated for recent Chrome versions. Check the last-updated date on its Web Store listing and try the other ruler, or fall back to DevTools, which is always current with your browser.