InspectDev
"You find a layout you want to understand — and opening DevTools kills the vibe."
See any website's structure, styles, and assets — without opening DevTools.
You are doing competitive research, learning from another developer's work, or trying to understand a design system you did not build. You need to see how something works — not just what it looks like. The problem: opening DevTools means navigating panels, switching tabs, and losing the context of what caught your eye in the first place.
- —Right-click → Inspect for every element you want to check
- —Lose track of which element you were looking at after scrolling
- —Manually copy colors, fonts, and image URLs one by one
- —Switch between Computed, Styles, and Layout panels to piece together the full picture
- ✓Hover to inspect, click to lock — the element stays put while you explore
- ✓See computed styles, cascade, and box model in a single panel
- ✓Sample any color, list every font, extract all images — one click each
- ✓Stay in the flow. No panel-switching, no context loss
Hover-to-Inspect
Move your cursor over any element to see its box model, computed styles, and DOM position. Click to lock it in and keep exploring — the overlay stays put even when you scroll.
Cascade at a Glance
See every rule that applies to an element — inherited, overridden, and computed — grouped by source file. No more wondering why your 16px became 14px.
Asset Extraction
Pull every image, font, and color from a page in one click. No more right-click hunting through the network tab or copying values by hand.
- 1
Open InspectDev and select CSS Inspector from the toolbar.
- 2
Hover over the component you want to understand — the overlay shows its dimensions and computed styles instantly.
- 3
Click to lock the element in place. Browse its styles in the side panel, grouped by source file and cascade order.
- 4
Use Color Picker to sample any color on the page. Use Page Ruler to measure the spacing between elements.
- 5
Run List All Fonts to see every typeface in use. Use Extract Images to pull any assets you need.
- 6
You now have a complete picture: structure, styles, spacing, colors, fonts, and assets — without leaving the page.
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.
