This app runs inside the BotSurf browser. Don't have it yet? Get the app or extension now!

.btn-row .btn{flex:1}

Developer Tools · All
0 installs · Verified BotGentz app
Launch App
Opens in BotSurf — try it free, no account needed.
CategoryDeveloper Tools
PlatformAll
Pricing Free
Installs0
Download BotSurf to use — free
No account needed for free apps. Once BotSurf is open, find this app in Apps from the + menu.

About this app

WHAT IT DOES This userscript adds a floating Visibility & Display Inspector panel to any webpage that detects and lists all CSS visibility, display, opacity, overflow, and clipping properties used across the page. It identifies elements with visibility (visible, hidden, collapse), display (block, none, flex, grid, etc.), opacity, overflow, overflow-x, overflow-y, clip, clip-path, mask, and backdrop-filter properties, displaying each property's computed value and the element it applies to. The panel shows whether elements are visible, hidden, partially obscured (opacity < 1), or clipped. A search filter allows you to find specific visibility properties by element or property value. You can copy the complete visibility CSS for any element to the clipboard. An inspector mode lets you click any element on the page to view its visibility and display properties instantly. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state. WHERE IT RUNS The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with visibility debugging and layout analysis. HOW TO USE The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Visibility List" section displays all elements with visibility properties, showing the element selector, visibility status (Visible, Hidden, Clipped, or opacity percentage), and display value. Use the search input to filter by element selector or property value. Click any entry in the list to highlight the element on the page and view its detailed visibility properties in the "Visibility Details" section. The details panel shows all computed visibility-related properties. Click the "Copy" button on any entry to copy the complete visibility CSS for that element. Click "Inspect Element" to enter inspector mode—then click any element on the page to view its visibility properties. Click "Clear Highlight" to remove the outline from the selected element. COMPUTED VISIBILITY EXTRACTION WITH STATE DETECTION AND STATUS INDICATORS The script iterates through every visible element on the page using document.querySelectorAll('*'), retrieving computed styles via window.getComputedStyle(). It checks for visibility, display, opacity, overflow, overflow-x, overflow-y, clip, clip-path, mask, and backdrop-filter properties. The script detects the visibility state: elements with visibility:hidden or display:none are marked as "Hidden", elements with opacity less than 1 are shown with the opacity percentage, elements with clip or clip-path properties are marked as "Clipped", and elements with no visibility-affecting properties are marked as "Visible". The inspector mode adds mouseover highlighting and click detection, allowing rapid inspection of elements directly in the page layout. The copy function generates a complete CSS block with all visibility and display properties formatted for immediate use in stylesheets. THE PANEL The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The visibility list has a maximum height of 250px and the details section has a maximum height of 180px with internal scrolling. PLEASE NOTE Requires the free BotGentz extension to run. The script scans all visible elements on the page—on very large pages, this may take a moment. The script does not collect, store, or transmit any personal data. All visibility data is read from the page and displayed locally. The copy function copies computed visibility properties as they appear. Inspector mode uses mouseover and click events that may interfere with some page interactions—disable inspector mode when not needed. The highlight outline may overlap with existing element styles. Elements with display:none are still detected if they have visibility-related properties defined, but their bounding rect may be zero.

Similar Apps

Log in to BotGentz

Suggest an App

Tell us what you'd find useful — if we build it, we'll email you the moment it's ready.