Debug Overlay 3.8.202

What's new 3.8.202 — 2026-09-21

• The bar stops being a second copy of the side panel. Five of the side panel's seven sections mirrored it — every tool, ⌕ ⧉ ✕, the badge control, the three lists. Open the side panel and turn the on-page bar back on (as people do, because the bar is what appears in a screenshot) and you were looking at one product wearing two faces.
• Docked, the bar keeps only what the panel cannot say: power, who is driving, what the pointer is on (name and size, held still — the badge says it better but moves with the cursor and covers what it describes), the live pulse of any armed tool that measures continuously, and the pin and findings counts. No tool buttons, no ⚙, no ⧉, no ✕.
• Close the side panel and the bar is exactly as it was, controls and all. With no panel it is the only control surface there is, so a bar left stripped would be able to arm nothing at all. One state, two shapes, chosen automatically — no new setting.
• New status() hook: one plain-text line a tool can contribute to that strip, asked on a timer while docked and never otherwise. ⚡ perf answers it with frames per second and the freeze count. Silent when nothing armed measures anything.

About

Debug Overlay

A UI inspector that runs on the page itself, not in a devtools panel. Press Alt+Shift+D on any site and a bar appears; everything it measures is drawn on the page, so a screenshot carries the numbers with it.

The first minute

• Hover anything — a badge shows size, radius, padding, margin, gap and font, read off what the browser actually rendered.
• Click to keep an element; Shift+click two and the distance between them is drawn between them.
• ⌕ audits the whole page: findings are marked where they are, and repeats collapse — five thousand occurrences of one problem read as one line.
• ⧉ copies a structured report — numbers, findings, and what each rule means — ready to paste into a chat beside the screenshot.

What it checks

Contrast against WCAG AA or AAA, read off painted pixels, so gradients and opacity are handled honestly. Spacing off your project's grid step. Accessible name, role and keyboard reach. Duplicate ids. Main-thread freezes and the per-component cost behind them. Every rule answers pass, fail, or review — "I tried and could not tell", with the reason — and an audit states what it did not reach: unrendered elements, iframes, shadow roots. A clean result you cannot trust is worse than none.

For designers and engineers auditing a live interface, and for anyone handing a UI to an AI: the copied report is the evidence half of that conversation. It reads the page and never changes it.