Overview
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
Tags
Privacy Practices
🔐 Security Analysis
⏳ Security scan is queued. Check back soon.
