InspectDev
CSS Inspector
See every style that touches an element — computed values, inherited rules, the full cascade stack. Click to lock any element, browse its properties, and edit everything from spacing to typography with live preview. No more digging through DevTools panels or switching tabs to test a single change.
About CSS Inspector
CSS Inspector gives you a focused view of any element’s styles without leaving your page. Hover to inspect, click to lock, and edit properties with live preview — all without switching to DevTools.
Features
Everything you need to inspect and tweak your page styles, all in one focused panel.
Inspect Any Element
Hover any element to see its computed styles and box model in a clean overlay. Click to lock it in and keep exploring — no right-click → Inspect needed.
Live CSS Editing
Edit colors, sizing, spacing, and fonts in a built-in editor. Every change reflects on the page immediately — before you commit it to your stylesheet.
Cascade Debugger
See exactly which rules apply, inherit, or override — with source file and line number for every declaration. No more wondering “where did that 16px come from.”
How to use
- 1
Open the InspectDev toolbar and select CSS Inspector.
- 2
Move your cursor over the page — the element under it highlights with a colored overlay and its styles appear in the side panel.
- 3
Click any element to lock it in. Browse computed values, inherited rules, and declarations grouped by source file.
- 4
Edit any property directly — values update on the page in real time. Undo individual edits or reset all changes with one button.
Try CSS Inspector free
CSS Inspector is included in the free version of InspectDev. Upgrade to Pro for advanced features like persistent workspaces and team sync.
