Hover Debug Overlay icon

Hover Debug Overlay

by aman_lakhuja

v1.1 Updated Aug 21, 2025 9.78KiB
CWS
17
Users
★ 5.00
1 reviews
#105689
of 207.3K
developer
#8949 of 18.1K

Description

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.
Hover Debug Overlay screenshot 1Hover Debug Overlay screenshot 2Hover Debug Overlay screenshot 3Hover Debug Overlay screenshot 4

Reviews

Loading reviews...

Permissions (5)

Permissions

activeTab Can access the current tab when you click the extension clipboardWrite Can write to your clipboard contextMenus Can add items to the right-click menu scripting Can inject scripts into web pages storage Can store data locally in your browser

Details

Version 1.1
Updated Aug 21, 2025
Size 9.78KiB
First Seen Mar 27, 2026