Layout Lens tomvansichem توسط

Layout Lens answers one question on hover: why is this element the size it is?

It draws the padding and margin overlay, then names the reasons the rendered size disagrees with the CSS you wrote.

What it flags

• Size mismatch (red). The CSS box size and the painted size disagree. A CSS transform on the element or an ancestor is the usual cause, and the tooltip names which ancestor.
• Clipped content (amber). overflow: hidden or clip is cutting content off with no scrollbar to reach it, including text-overflow: ellipsis truncation. Scrollable containers are not flagged; that content isn't lost.
• Width or height pinned by min- or max- (info line). The element is sized by min-width, max-width, min-height or max-height rather than by width or height. Computed style can't show you this; it reports the clamped result.
• Wider than the viewport (info line). The element's own box runs past the page, a common source of an unwanted horizontal scrollbar.

How it works

• Alt+S: toggle the inspector on the current tab, all frames
• Mouse: measure the element under the cursor
• ↑ / ↓: walk to the parent, then back down toward where you started
• f: pin an element. The overlay keeps tracking it through scroll, so you can scroll away to compare, or move to DevTools
• c: copy the measurement block to the clipboard
• Alt+U: cycle the displayed unit: px → rem → em
• Esc: off

Shortcuts are rebindable at about:addons → gear menu → Manage Extension Shortcuts.

The page stays fully interactive throughout. Clicks, hovers and scrolling all work. Only ↑ / ↓ / c / f are intercepted, and never while you're typing in a field.

What it doesn't do

No account, no options page, no settings. It does nothing until you press the shortcut, and leaves no trace on the page when you turn it off.

It collects nothing and sends nothing anywhere. It stores one value: an on/off flag per tab, held in memory and cleared when you close the browser. Never written to disk.

Limitations

↑ / ↓ walk one frame's DOM and can't cross an iframe boundary. The size check fires on transforms, not on flex-shrink or zoom, because computed style already reports the used value in those cases.

Source: https://github.com/tomvansichem/layout-lens