Layout Shift Highlighter

WHAT IT DOES

Layout Shift Highlighter is a developer tool that monitors the current webpage for Cumulative Layout Shift (CLS) events using the browser's native Layout Instability API. It detects and records every layout shift that occurs on the page — including those caused by images loading, fonts rendering, dynamic content insertion, or any other DOM changes that cause elements to move. For each shift, the tool displays the shift score (the impact fraction multiplied by the distance fraction), the exact time it occurred, the HTML tag of the shifted element, and a unique CSS selector. Each shift is logged in a sortable list with the highest-impact shifts highlighted in red. The tool flashes the shifted element on the page with a yellow highlight so you can see exactly what moved and where. You can copy shift data or element selectors to your clipboard for debugging or reporting.

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 that support the PerformanceObserver and LayoutInstability APIs (Chrome, Edge, Firefox, and Safari 16+).

HOW TO USE

Install the script through the BotGentz extension marketplace. Once installed, open the BotGentz panel on any webpage and select Layout Shift Highlighter from the list of installed scripts. Click the "Start Monitoring" button to begin capturing layout shifts. Interact with the page — scroll, click, resize, or wait for content to load. Every time a layout shift occurs, it will appear in the list with its score and details. Hover over any row to see the element's selector. Click the selector text to copy it to your clipboard. Click the highlight button (🔍) to flash the element again. Click the copy button (📋) to copy all shift data (score, time, selector, tag) for that event. Adjust the "Flash (ms)" control to change how long the highlight lasts (100-10000ms). Adjust the "Max" control to limit how many shifts are stored (1-500). Use the "Clear Shifts" button to reset the log. The "Clear Highlights" button removes all visual highlights from the page.

ONE TECHNICAL SECTION — The actual mechanism

Layout Shift Highlighter uses the PerformanceObserver API with the 'layout-shift' entry type, which is part of the browser's Core Web Vitals instrumentation. When a layout shift occurs, the browser provides a LayoutShift object containing the shift value (a product of impact fraction and distance fraction), the start time, and an array of sources — each source describes a DOM node that moved, including its previous and current bounding rectangles. The script processes each entry immediately as it arrives, extracting the source element and generating a unique CSS selector for it. The shift is then added to the log and the element is highlighted by adding a CSS class that triggers a keyframe animation — creating a visible flash without affecting the element's layout. The highlight duration is controlled by a setTimeout that removes the class after the configured delay. All data is stored in memory only and is cleared when the script is reloaded or the panel is closed.

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. The Layout Instability API is only available in modern browsers (Chrome 84+, Edge 84+, Firefox 108+, Safari 16+). If your browser does not support it, the script will display a notification and will not function. The script monitors only the current page and stops monitoring when the panel is closed or the page is reloaded. It does not access other tabs, bookmarks, history, or downloads. All shift data is stored locally in memory and is never transmitted anywhere. The highlight flashes are purely visual and do not modify the page's DOM structure. The script respects user interactions — shifts that occur immediately after a user input (click, tap, etc.) are automatically ignored by the browser API as they are considered expected shifts.