Overview
DevTools-like CSS debugger with Box Model tooltip
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
Details
- Version1.0.4
- UpdatedFebruary 9, 2026
- Offered byzxc4174
- Size33.19KiB
- LanguagesEnglish (United States)
- Developer
Email
zxc4174@gmail.com - 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
