Overflow Debugger

WHAT IT DOES

Overflow Debugger is a developer tool that scans the current webpage and identifies every element with overflow styling that may cause layout problems. It detects elements with overflow: hidden, auto, scroll, or visible and analyzes whether they clip content or generate scrollbars. For each element, the tool displays its overflow properties (X and Y), dimensions, scroll state (whether content exceeds the container), and a unique CSS selector. The tool highlights elements that clip content (hidden overflow with scrollable content) and those that have active scrollbars. You can temporarily toggle any element's overflow to "visible" with a single click — revealing clipped content instantly without modifying the page permanently. This is invaluable for debugging hidden menus, truncated text, or mysterious layout gaps.

WHERE IT RUNS

This script works on any website — every HTTP and HTTPS page. It runs inside the BotGentz extension panel overlay, independent of the page's own scripts. It does not require the page to reload or modify its content in any way. It works with all modern browsers and frameworks including React, Vue, and Angular.

HOW TO USE

Install the script through the BotGentz extension marketplace. Once installed, open the BotGentz panel on any webpage and select Overflow Debugger from the list of installed scripts. The panel will automatically scan the page and display all elements with overflow styling. Use the filter dropdown to focus on specific overflow types: Hidden, Scroll, Auto, Visible, Clips Content, or Has Scrollbars. Adjust the "Max" input to control how many items are displayed (up to 1000). Hover over any row to highlight that element on the page — it will be outlined in yellow and scrolled into view. Click the "Show" button on any element to temporarily set its overflow to "visible" — this instantly reveals any clipped content and helps you understand what is hidden. Click "Restore" to revert to the original overflow value. The "Reset All Overflow" button restores every modified element to its original state. Click the selector text to copy the element's CSS selector to your clipboard. The "Scan" button rescans the page, which is useful for single-page applications that dynamically create elements.

ONE TECHNICAL SECTION — The actual mechanism

Overflow Debugger works by traversing the entire DOM and using getComputedStyle() to read the computed overflow values for every element on the page. It then compares each element's scrollWidth and scrollHeight against its clientWidth and clientHeight to determine if content actually exceeds the container — providing a true picture of whether overflow is merely declared or actually causing visible scrollbars or clipping. The tool stores original overflow values before modification by saving them in a Map keyed by the element reference, allowing for accurate restoration without affecting other properties. The highlight mechanism applies a CSS outline directly to the element using a dedicated class, which does not affect the element's layout or position — making it safe to use on any page without causing reflows.

THE PANEL

The script runs inside the BotGentz extension panel, which is fully draggable and resizable. You can click and drag the panel header to reposition it anywhere on the screen. The panel snaps to the edges of the browser window for easy positioning. Click the collapse button (chevron) to minimize the panel to a small icon, or press the Escape key to close the panel entirely. The panel remembers its position and size between uses on a per-site basis. When the panel is closed, you can reopen it from the BotGentz toolbar icon.

PLEASE NOTE

This script requires the free BotGentz extension to run. It does not work as a standalone userscript without the extension. Websites change frequently — a script that works perfectly today may need updating if a site changes its structure or uses shadow DOM. The script reads only the current page's DOM; it does not access other tabs, bookmarks, history, or downloads. All data is processed locally in your browser and is never transmitted anywhere. Toggling overflow to "visible" can temporarily break layouts or cause content to overlap — this is expected behavior and helps you diagnose issues. The "Reset All Overflow" button restores the page to its original state. Performance may vary on pages with thousands of elements; the display limit (default 100) helps keep the list responsive. You can adjust this limit up to 1000 items if needed.