Overview
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
Details
- Version1.0.3
- UpdatedAugust 30, 2025
- Offered byzxc4174
- Size41.32KiB
- LanguagesEnglish (United States)
- Developer
Email
zxc4174@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
