CSS Debugger

by zxc4174 · Developer Tools

Manifest V3 Free

View in Chrome Web Store Data as of 16 Oct 2026

DevTools-like CSS debugger with Box Model tooltip

Users

−6 in 30 days

Rating

0.0 / 5

unchanged in 30 days

Ratings

0 in 30 days

Store rank

#120K

#100K among extensions

Version

1.0.4

updated 10 Feb 2026

Users

monthly, 16 months

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

Ratings count

monthly, 16 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 CSS Debugger

CSS Debugger is a Chrome extension built for front-end developers who need a faster way to inspect layout structure and spacing directly on live pages. When enabled, it draws color-coded outlines around page elements so you can quickly understand structure and hierarchy. Hold Cmd (Mac) or Ctrl (Windows) and move your cursor over any element to show a real-time Box Model overlay with clear Margin / Border / Padding / Content regions. It also displays per-side spacing values and live element dimensions (width × height). The overlay updates as you scroll or resize, so you can keep debugging without interruption. Great for quickly finding: Why elements are pushing or breaking layout Incorrect spacing caused by margin/padding mismatches Sizing and alignment issues Boundaries and nesting in complex pages How to use: Click the toolbar icon to enable CSS Debugger Hold Cmd/Ctrl and hover your target element Press Esc to clear the current highlight and overlay