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