CSS Debugger

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