Element Inspector on Hover

by https://braudyp.dev · braudyp.dev · Developer Tools

Established publisherManifest V3 Free

View in Chrome Web Store Data as of 16 Oct 2026

Hover any element to inspect box model, fonts, colors, WCAG contrast, grid/flex overlays, design tokens and more.

Users

+3 in 30 days

Rating

0.0 / 5

unchanged in 30 days

Ratings

0 in 30 days

Store rank

#212K

#177K among extensions

Version

1.4.5

updated 23 May 2026

Users

monthly, 5 months

Latest, 16 Oct 2026: 8 usersMove the mouse over the chart for any month

Ratings count

monthly, 5 months

Latest, 16 Oct 2026: 0 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About Element Inspector on Hover

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