Focus Outline Debugger

WHAT IT DOES Focus Outline Debugger is a developer tool that reads and visualizes computed focus styles on any interactive element. It captures outline, box-shadow, border, and background properties exactly as the browser renders them, then overlays a persistent highlight around the focused element. The panel logs every focusin and focusout event with timestamps and style snapshots, making it easy to track focus behavior across complex interfaces. You can also inject custom CSS overrides to force consistent focus indicators across all elements, bypassing site-specific styles that may hide or obscure focus outlines. WHERE IT RUNS This script runs on any website (matches *://*/*) inside your browser, powered by the BotGentz extension. It works entirely within the page context, reading computed styles and manipulating the DOM. No data is sent anywhere; everything stays local. HOW TO USE Install the script via the BotGentz extension, then navigate to any page. The panel appears as a floating widget. Use the "Enabled" toggle to activate or deactivate the debugger. Click "Inspect focused element" to highlight the currently focused element with a colored overlay. The highlight follows the element on scroll and resize. Use the color picker to change the highlight color. The "Log current focus styles" button copies a formatted style report to your clipboard. The event log shows the last 50 focus events with style details. WHY IT WORKS Most browser devtools show computed styles only when you inspect an element, and they do not persist across focus changes. Focus Outline Debugger uses a combination of focusin/focusout event listeners with getComputedStyle() to capture styles at the moment of focus. It maintains a live overlay using fixed-position DIVs that track the target element's bounding rectangle via getBoundingClientRect(), updating on scroll and resize events. The custom CSS override is injected as a element with high specificity, allowing you to enforce :focus rules that override site styles without modifying the page source. THE PANEL The panel is draggable by its header, and its position persists per site using GM_setValue. It collapses to a small bubble with an emoji icon when not in use. The panel can be toggled via a configurable keyboard shortcut (default Ctrl+Shift+F). It automatically adjusts to different screen sizes and includes a scrollable event log. Press Escape to dismiss the panel if it is in focus. PLEASE NOTE This script requires the free BotGentz extension to run. Websites change frequently, and scripts may need updates to remain compatible. The script does not read or modify password, hidden, or file inputs. All settings are stored locally in your browser; no data is transmitted or shared. Use this tool responsibly on sites you own or have permission to debug.