Outline all elements with X-Ray Mode

Press one key and every element on the page gets an outline, colored by how deeply it is nested, so you can see the structure behind the design.

What it does

X-Ray Mode draws a thin outline around every element on the page at the same time. The result is a wireframe of the page laid over its design: every wrapper, column, card and inline element shows its real box.

Outline colors change with nesting depth. Top level sections are red, the next level orange, then yellow, grey, and a run of blues that get darker the deeper you go. Eleven levels have their own color, and anything deeper shares the darkest blue. That makes it easy to tell a container from its children, and to spot an extra wrapper that has no business being there.

How to use it

1. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
2. Press 2, or click X-Ray Mode in the control bar.
3. Press 2 again to turn it off.

X-Ray Mode works together with the rest of Screen Ruler. Keep it on while you hover and click elements to inspect them, so you see both the overall structure and the exact values of the box you are pointing at.

How it works

X-Ray Mode adds a temporary stylesheet that gives each element a CSS outline. Outlines are drawn outside the box and take up no space, so unlike the common trick of adding a border to everything, turning X-Ray on does not shift the layout or change any measurement. Turn it off and the stylesheet is removed with nothing left behind.

It also skips the noise that would otherwise clutter the view:

• Shapes inside SVG icons, such as paths, circles and groups.
• Line breaks and horizontal rules.
• Elements hidden with inline styles, such as zero width or height, display: none or opacity: 0.
• The page's <head>, scripts and styles.
• Screen Ruler's own interface.

Web components are covered too. X-Ray Mode reaches inside open shadow roots, and the colors carry on from the depth of the component's host element, so a component's internals read as deeper nesting rather than starting again at red.

Your choice is remembered. If X-Ray Mode was on when you closed Screen Ruler, it is on again the next time you start it. It is hidden while you are in Edit Mode and comes back when you return to inspecting.

Limits

• Existing outlines are replaced. While X-Ray is on, the page's own outlines, such as focus rings, are covered by the X-Ray outlines. They come back when you turn it off.
• Closed shadow roots. Components that use a closed shadow root cannot be reached by any extension, so their insides are not outlined.
• Deep nesting shares a color. Past eleven levels every element uses the same dark blue.
• Busy pages get busy. On a dense page the outlines can be a lot to take in. Click an element to select it and step up and down the tree with Alt + Shift + Up and Down to focus on one part.

When it is useful

• Finding horizontal scroll. An element wider than the page stands out immediately when every box is outlined.
• Mystery spacing. See whether a gap comes from margin, padding or an empty wrapper.
• Understanding someone else's layout. Get the structure of a page or component before you rebuild it, without reading through the DOM tree in DevTools.
• Checking alignment. Combine it with the Layout Grid Overlay to see whether boxes, not only their visible content, sit on the grid.

To see how a single flex or grid container arranges its children, use the Flexbox and Grid Inspector.

X-Ray Mode is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

How is this different from adding * { outline: 1px solid red } in CSS?

It is the same idea without the setup. You do not need DevTools or access to the stylesheet, it turns on and off with one key, outlines are colored by nesting depth so you can tell parents from children, it reaches inside open shadow roots, and it skips SVG internals and hidden elements that would only add clutter.

Does X-Ray Mode change the page layout?

No. It uses CSS outlines, which are drawn outside the box and take up no space, so every size and position stays exactly as it was.

What do the colors mean?

Each color marks a nesting level, starting from the top level children of the page: red, orange, yellow, grey, then blues that darken with depth. Elements more than eleven levels deep share the darkest blue.

Does it work on sites built with web components?

Yes, for open shadow roots, which most component libraries use. The outline colors continue from the component's position on the page. Closed shadow roots cannot be reached by extensions.