Overflow Finder - CSS overflow debugger for DevTools
gsme.dev · Developer Tools
Media
1 item
Description
Find which DOM elements are causing horizontal or vertical overflow. Adds an Overflow Finder tab to Chrome DevTools. Overflow Finder adds a DevTools tab that pinpoints which DOM elements are making your page wider (or taller) than the viewport. Instead of deleting nodes one by one in the Elements panel to bisect, you click Scan and get a ranked list of culprits with the likely cause for each. WHAT IT SHOWS For every element that overflows the viewport, you see: - the axis (horizontal or vertical) and the overflow distance in pixels - the element's tag, id, and class list - a likely cause guessed from computed style — for example "width: 1400px", "white-space: nowrap", "translateX(600px)", a missing max-width on an image, "table-layout: auto", or an absolutely-positioned element placed off-screen - the element's bounding-box size PER-CULPRIT ACTIONS - Scroll to: smoothly scrolls the page so the element is centered, with a red highlight box that tracks it during the scroll. - Inspect: selects the element in the Elements panel. - Delete: removes the element from the DOM so you can see the page reflow without it. Click again on the same card to restore the element to its original position. A toolbar "Restore deleted" link undoes the whole batch at once. - Hovering a result card paints the highlight on the page. HOW IT WORKS The panel walks the DOM (descending into open shadow roots), drops anything safely contained inside an overflow:hidden / auto / scroll / clip ancestor, and reduces the rest to leaf-most culprits — the elements actually causing the overflow rather than parents that just inherited it. Element references stay in the page; only serializable metadata crosses to the panel. INCLUDED TEST PAGE A bundled fixture page (linked from the panel toolbar) contains a dozen planted culprits — wide images, white-space:nowrap pre tags, negative margins, off-screen absolute positioning, transform translations, wide tables, and more — so you can verify the install and learn what each cause looks like. LIMITATIONS - Top-level frame only; iframe content is not scanned. - Scan-on-demand; no live re-scan as the page changes — click Scan again after a resize or DOM mutation. - Chrome / Chromium only. PRIVACY Overflow Finder collects no data, sends no telemetry, and makes no network requests. All scanning happens locally inside your DevTools session. SOURCE https://github.com/IsItGreg/overflow-finder-extension