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 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 4. Press Esc to close This is a completely rewritten plugin and a new release, so there are probably bugs. I will fix them as I am made aware of them, where feasible. Please post bugs and feature requests on GitHub Issues: https://github.com/dmhendricks/chrome-style-detective/issues