CRX id
ldaegafaikmldepomcjafajeojacjfcb
ldaegafaikmldepomcjafajeojacjfcb
Description from extension meta
A Chrome extension to debug CSS layouts and display CSS properties on hover.
Image from store
Description from store
CSS Debugger is a zero-config Chrome extension that helps developers and designers instantly inspect and troubleshoot page layouts with no DevTools or code required.
- **Global Red Outline**
Click the toolbar icon (or press Alt + Shift + C) to toggle a subtle red outline on _all_ elements, giving you an immediate overview of every element’s boundaries.
- **Ctrl/Cmd + Hover for Details**
Hold **Ctrl** (Windows/Linux) or **⌘** (Mac) and hover over any element to:
- **Highlight** it with a vivid purple outline.
- **Open a draggable tooltip** showing nested box-model layers (margin, border, padding, content), each labeled and sized in pixels.
- **View a computed CSS panel** listing key properties (display, size, colors, typography, shadows, etc.) with property names color-coded in `#a626a4`.
- **Draggable Tooltip**
Click and drag the tooltip to reposition it anywhere on the page. Pointer events and cursor styling make it intuitive to move.
- **Escape to Close**
Press **Esc** to instantly close the tooltip and remove its highlight.
- **Automatic Light & Dark Themes**
Tooltip background, text color, and box-model labels automatically adapt to your OS/browser color scheme.
## Why install CSS Debugger?
- Speeds up layout debugging without leaving the page
- Visualizes box-model relationships at a glance
- Helps catch unintended margins, padding or borders before you commit code
- Works out-of-the-box—no setup, no performance overhead