Style Detective

Hover over any HTML element to inspect its computed CSS in a floating panel.

Inspect any page's CSS in real time. Hover an element to see its computed styles in a floating panel — freeze it for closer study, then copy values or a full CSS snippet to the clipboard. Style Detective is a modern successor to the classic CSS Viewer extension, rebuilt for today's web. WHAT YOU CAN DO • Hover any element to inspect computed styles • Freeze the panel in place for detailed review • Copy an element's CSS definition, individual values, or class list • Check WCAG contrast between color and background-color • Works with iframes • Supports dark mode and adjustable panel font size • Customizable layout: Show/hide CSS classes and box model in settings to preserve space on smaller displays HOW TO USE 1. Click the toolbar icon or press Alt+Shift+S (Option+Shift+S on Mac) 2. Hover elements to inspect them 3. Press F to freeze/unfreeze, C to copy CSS, Shift+C to copy classes, J to copy JSON 4. Press Esc to close Please post bugs and feature requests on GitHub Issues: https://github.com/dmhendricks/style-detective/issues