Media
5 items
Description
Hover inspector for padding/margin plus a CSS-vs-rendered size discrepancy checker. Activated only by a keyboard shortcut. 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 chrome://extensions/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. It sends nothing anywhere. It stores one value: an on/off flag per tab, held in memory so the toggle survives Chrome evicting the extension's idle worker. That flag is cleared when you close the browser and never written to disk. Its content script is declared on all sites because it has to already be running in the tab at the moment you press the shortcut, and it stays inert until then. The only API permissions requested are activeTab and storage. LIMITATIONS ↑ / ↓ walk one frame's DOM and can't cross an iframe boundary. The size check fires on transforms. It does not fire on flex-shrink or zoom, because Chrome's computed style already reports the used value in those cases, leaving nothing to compare. min and max clamping is named by its own info line instead. Source: https://github.com/tomvansichem/layout-lens