Xray

Enable Xray in any Espresso preview by clicking the “Xray” button in the location field or by choosing Preview ⟩ Show Xray (option command X; this shortcut also works for project previews in external browsers). With Xray enabled, click any element on the webpage to highlight it and see:

• Margins (represented by arrows pointing outwards to a thin border)
• Padding (the space between the edge of the element and the dotted border inside)
• Dimensions (the space inside the dotted borders)

The location field will be replaced with a field showing the DOM path to the selected element. Click any element above it to select that element instead. If the DOM path is too long to render all of the elements, you can click the “…” button to see the rest of the path.

While Xray is enabled, you will not be able to interact with the page normally.

Xray Inspector

To see which styles apply to the selected element in Xray, click the eye button in the inspector that appears when you turn on Xray. Alternatively, right-click anywhere in the page while Xray is active.

If you are working on a project or have overridden the preview's CSS with a local stylesheet, clicking a selector in the Applied Styles menu will jump straight to it in your CSS source code. Even when backed by a SCSS or LESS dynamic style sheet.