Inspect element without DevTools

Point at anything on a web page to see its exact size, padding and margins drawn right on top of it, then click to select it and read its CSS in the side panel.

What you see when you hover

With Screen Ruler active, the element under your cursor is outlined as you move. Each outline carries the information you would otherwise dig out of DevTools:

• A name tag with the tag name, ID and classes, for example button#signup.btn.btn-primary.
• Width and height in pixels, shown in the same tag.
• Padding drawn as a tinted band inside the box and margin as a band outside it, with the value written on each side that is large enough to label.
• Flex and grid hints. Hover a flex container and its main axis and items are marked. Hover a grid container and its tracks are drawn.

The values come from the browser's own layout and computed styles, so they match what is rendered, including styles that JavaScript added after the page loaded.

How to inspect an element

1. Open the page you want to look at.
2. Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
3. Move your cursor over the page. Every element you pass over is outlined and measured.
4. Click an element to select it. The highlight stays, guide lines extend from its four edges across the page, and the Element tab in the side panel fills with its details.
5. Click the selected element again, or press Esc, to release it.

While Screen Ruler is active, clicks select elements instead of following links or pressing buttons, so you can inspect a navigation bar or a form without leaving the page. Use Pause in the control bar when you need to click through to the page itself.

Walking up and down the DOM

The thing you click is often not the element you care about. A click on a label inside a card selects the label, when you wanted the card. With an element selected:

• Press Alt + Shift + ↑ (Option + Shift + ↑ on a Mac) or use Select Parent in the control bar to move the selection to the parent element.
• Press Alt + Shift + ↓ or use Select Child to step back down the path you came up.

The overlay and the side panel follow each step. Navigation stops at <body>, and it follows the layout you actually see on components built with shadow DOM, where an element can appear inside a slot rather than under the host it is written beneath.

What the side panel adds

Selecting an element opens its details in the Element tab. The header shows its selector and exact size, including fractional pixels the on-page tag rounds off. Below it you get the parent and child in an outline, a box model diagram with width, height, padding, border and margin, and the element's computed CSS, ready to copy. See computed CSS for what that section shows, and the inspecting elements docs for the full walkthrough.

Where it works and where it does not

Screen Ruler works on ordinary web pages in Chrome, Edge, Brave, Arc, Vivaldi and other Chromium browsers, including local development servers, staging sites and pages behind a login. It reads elements inside open shadow roots, so web components are inspectable too. Browsers do not let extensions run on chrome:// pages, other extensions or the Chrome Web Store, so it cannot inspect those.

Who it is for

• Designers checking a build against a mockup without learning DevTools.
• Developers who want sizes and spacing at a glance instead of scrolling the Styles pane.
• QA and reviewers confirming that a component uses the padding and margins the spec calls for.

Once an element is selected, hover another one to measure the distance between them, or turn on the Floating Inspector for a cursor-side summary of key styles.

Element inspection, parent and child navigation and computed CSS are free in Screen Ruler, with no account needed.

Common questions

How is this different from Inspect in Chrome DevTools?

DevTools shows the full DOM tree and every style rule, which is a lot to wade through for a quick question. Screen Ruler draws size, padding and margin straight onto the page as you hover, and keeps the details for the element you click in a side panel. It is built for reading a layout, not debugging JavaScript.

Can I inspect elements without clicking links by accident?

Yes. While Screen Ruler is active, clicks select elements and do not reach the page. Press Pause in the control bar when you want to click through to a link or open a menu, then press it again to carry on inspecting.

How do I select a parent element?

Select an element, then press Alt + Shift + ↑ (Option on a Mac) or click Select Parent in the control bar. Alt + Shift + ↓ steps back down.

Is element inspection free?

Yes. Hover inspection, selection, parent and child navigation and computed CSS are part of the free plan and stay free.