Skip to main content
CSS Debugger icon

CSS Debugger

CSS Debugger helps you quickly visualize and debug page layouts. Easily toggle outlines around specific elements or the entire page using a customizable color, thickness, and style. You can also overlay a grid to align elements, display tooltips showing element dimensions on hover, and enable Shift+Click to inspect any element’s tag, ID, classes, and box metrics in real-time. Features: - Customizable Outlines: Choose outline color, thickness, style, and the CSS selector you want to highlight. - Grid Overlay: Turn on a grid to check alignment across your page. - Dimension Tooltips: See element width and height on hover. - Click-to-Inspect: Press Shift and click on any element to get details about its tag, classes, ID, margins, and size. Perfect for frontend developers and designers who need a simple yet powerful CSS debugging tool. Just press Ctrl+Shift+O (or use the popup) to toggle the debugger on any site!

Bilder im Chrome Web Store

Bilder in Edge Add-ons

Discovery