CSS Debugger

DevTools-like CSS debugger with Box Model tooltip

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