CRX id
dnhkakioabglpfiidamfmijkdncgmajo
dnhkakioabglpfiidamfmijkdncgmajo
Description from extension meta
Show overlay with TOP/LEFT/RIGHT/BOTTOM on element hovered with optional element name
Image from store
Description from store
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.
Latest reviews
- (2025-08-21) Dolly Lakhuja: I find this extension really interesting. It helped me quickly debug elements without having to dig through dev tools. Chrome DevTools are useful, but they can shift the entire layout of the webpage especially if you’re working with just one screen. This extension solves that issue perfectly. It lets me inspect and identify containers without affecting the layout of the page. Highly recommend if you're working with layouts and need a fast way to inspect containers.