extension ExtPose

CSS Debugger

CRX id

ldaegafaikmldepomcjafajeojacjfcb-

Description from extension meta

A Chrome extension to debug CSS layouts and display CSS properties on hover.

Image from store CSS Debugger
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

Statistics

Installs
Category
Rating
0.0 (0 votes)
Last update / version
2025-06-26 / 1.0.1
Listing languages

Links