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

Tab Order Visualizer

Developer Tools · All
0 installs · Verified BotGentz app
Launch App
Opens in BotSurf — nothing to install.
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

Tab Order Visualizer overlays sequential number labels on every focusable and interactive element within the current webpage. Each label shows the element's position in the natural tab order, making it immediately obvious which elements receive focus and in what sequence. The currently focused element is highlighted with a distinct outline and its label is emphasized with a contrasting color. Elements with positive tabindex values are rendered in a separate color, clearly distinguishing manually assigned tab order from the default document order. The overlay state and highlight color preference persist globally using GM_setValue, so your settings remain across browsing sessions.

WHERE IT RUNS

This script runs on any webpage matching *://*/*, meaning it works across virtually all standard websites. It operates entirely within the context of a single page and does not access browser tabs, bookmarks, history, or downloads. There is no chrome.* or browser.* API usage, making it fully compatible with the BotGentz userscript environment. The script respects all standard focusable element selectors including links, buttons, input fields, select dropdowns, textareas, iframes, contenteditable regions, draggable elements, and any element with a tabindex attribute.

HOW TO USE

After installation, the script automatically builds the overlay if previously enabled. Use the panel button "Show Tab Order" to toggle the overlay on or off. Alternatively, press Ctrl+Shift+T (or Cmd+Shift+T on macOS) to toggle the overlay from anywhere on the page without opening the panel. When active, numbered labels appear slightly above each focusable element, following the exact tab order. The "Refresh" button rebuilds the overlay to account for dynamic content changes. The "Copy Tab Order" button generates a report of all focusable elements in sequence, including tag name, ID, class, tabindex value, and text snippet, then copies it to your clipboard using GM_setClipboard. A color picker lets you customize the highlight color for focused elements, which

PLEASE NOTE

Sites and services change over time and this app may need updating to match.

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.