InspectDev
"A margin is off by 4px and you cannot figure out why."
Find and fix styling issues in seconds — without refreshing or switching panels.
Something looks wrong. Maybe a flex item refuses to shrink, a color is not quite what you specified, or there is unexpected whitespace you cannot source. The old loop: open DevTools, dig through computed styles, guess at the right property, edit it in your editor, refresh, repeat. Each cycle takes you out of the problem and back in.
- —Edit CSS in your editor, refresh, check — guess and check
- —Dig through Computed and Styles panels to find the actual rule
- —Lose track of which declaration won the cascade
- —Manually check contrast ratios against a separate tool
- ✓Edit any property and watch it update live — no refresh
- ✓See the full cascade: which rules apply, inherit, or override
- ✓Source file and line number for every declaration
- ✓Check contrast ratios inline as you adjust colors
Live Property Editing
Change any CSS property and watch it update on the page immediately. Adjust a margin, tweak a color, toggle a display value — the feedback is instant. No refresh, no rebuild, no context switch.
Cascade Debugger
See exactly which rules apply to an element and which get overridden. Each declaration shows its source file and line number. When a style does not take, you know why in one glance.
Box Model Visualization
View margin, border, padding, and content dimensions as an overlay on the element itself. Spot overflow, unexpected spacing, and sizing issues without reading numbers off a panel.
- 1
Open InspectDev and select CSS Inspector from the toolbar.
- 2
Hover over the element that looks wrong — the overlay shows its box model and computed styles.
- 3
Click to lock the element. Browse its styles in the side panel, grouped by source file.
- 4
Find the property causing the issue. Edit it directly in the panel — the page updates instantly.
- 5
Use Color Picker to sample a reference color, then adjust until it matches. Use Contrast Checker to verify the new ratio passes WCAG.
- 6
Use Page Ruler to confirm spacing matches your design intent. Copy the final values back to your stylesheet.
Try this workflow free
Every tool in this workflow is included in the free version. Upgrade to Pro when you need persistent workspaces and team sync.
