Hover Debug Overlay

Show overlay with TOP/LEFT/RIGHT/BOTTOM on element hovered with optional element name

The Hover Debug Overlay is a lightweight Chrome extension that helps developers and designers inspect web page elements quickly and visually. By simply hovering over an element, you’ll see a live overlay that highlights its boundaries (TOP, LEFT, RIGHT, BOTTOM) and optionally shows the element’s tag, ID, and classes — without disrupting the page layout. Features: - Live dimension overlay with edge labels (TOP/LEFT/RIGHT/BOTTOM) - Element descriptor (tag name, #id, .classes) - One-click enable/disable from the toolbar icon - Right-click to copy the element descriptor directly to your clipboard - Customizable: toggle element name and edge labels via context menu - Remembers your settings using local storage - No data collection, no remote requests, no analytics This extension is built with Manifest V3 and is completely self-contained. All functionality runs locally in your browser.