CSS Debugger
DevTools-like CSS debugger with Box Model tooltip
As of June 2026, CSS Debugger has 37 users in the Developer Tools category.
Usersup 15.6 percent+15.6%
37
37
Ratingno change0%
—
— reviews
Reviewsno change0%
—
Version
1.0.4
Manifest V3
History
9 snapshotsTracking since Apr 1, 2026.
View as table
| Date | Users | Rating | Reviews | Version |
|---|---|---|---|---|
| Apr 1, 2026 | 32 | — | — | 1.0.4 |
| Apr 16, 2026 | 38 | — | — | 1.0.4 |
| Apr 22, 2026 | 38 | — | — | 1.0.4 |
| Apr 27, 2026 | 33 | — | — | 1.0.4 |
| May 4, 2026 | 37 | — | — | 1.0.4 |
| May 10, 2026 | 41 | — | — | 1.0.4 |
| May 15, 2026 | 35 | — | — | 1.0.4 |
| May 24, 2026 | 34 | — | — | 1.0.4 |
| Jun 3, 2026 | 33 | — | — | 1.0.4 |
| Now | 37 | — | — | 1.0.4 |
Permissions & access
- Permissions
- activeTabscripting
- Host access
- None declared
Screenshots
About
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
Technical
- Version
- 1.0.4
- Manifest
- V3
- Size
- 33.19KiB
- Min Chrome
- 88
- Languages
- 1
- Featured
- No
Metadata
- ID
- ldaegafaikmldepomcjafajeojacjfcb
- Developer ID
- u663eeeb0a0e6d670fbfb71b5b2ca991a
- Developer Email
- [email protected]
- Created
- Jun 23, 2025
- Last Updated (Store)
- Feb 10, 2026
- Last Scraped
- Jun 3, 2026
- Website
- —
- Support URL
- —
- Privacy Policy
- —
Similar extensions
Alternatives to CSS Debugger, ranked by description similarity.
Border Patrol – CSS Debugger & Element Outliner
CSS box model debugger & element outliner for fast UI inspection, layout visualization, and faster frontend development.
304
★ 5.0
CSS Spacing Inspector
Hover to see margin, padding, and gap overlays with pixel values
53
Smart CSS Debugger
Hover to inspect any HTML element with tag, ID, class, computed styles, and copy selector instantly.
32
★ 5.0
Show All Padding & Margins
Highlights margins and padding for all HTML elements in any webpage.
4.0K
★ 4.5
Spacing Inspector
Visualize CSS margins and padding on webpages
430
DOM Scanner Pro
Visualize and debug page layouts with colored outlines and smart tooltips. Perfect for developers and designers.
7
CSS Debugger
Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click.
617
★ 5.0
Focus: The Elements - DOM Inspector & Editor
DOM Inspector & Editor, inspect and edit HTML element styles directly on any page.
63
★ 5.0
Data sourced from the Chrome Web Store · last verified Jun 3, 2026.