Overview
Hover any element to inspect box model, fonts, colors, WCAG contrast, grid/flex overlays, design tokens and more.
Element Inspector on Hover is a lightweight visual inspector for designers, developers and QA. Point at any element on a webpage and instantly see its tag, box model, font and colors in a small overlay — no DevTools required. What you see on hover • HTML tag, id and class • Size (width × height) • Padding, margin and border (each side) • Font family, size, weight and line-height • Text color and background color (with swatches) • Display, position and z-index How it works Click the toolbar icon and press Activate. Move your cursor across the page — a dashed outline highlights the element under it, and a panel follows your cursor with the details. Press Esc on the page, or open the popup and click Deactivate, to turn it off. The on/off state is remembered across page navigations and browser restarts, so you can flip it on once and keep working. Who it's for • Designers checking spacing, type and color on live sites • Front-end developers debugging layout without opening DevTools • QA testers documenting visual issues quickly • Anyone curious how a website is built
Details
- Version1.4.5
- UpdatedMay 23, 2026
- Size32.4KiB
- LanguagesEnglish
- DeveloperWebsite
Email
support@braudyp.dev - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
Support
For help with questions, suggestions, or problems, visit the developer's support site
