Sizes & spacing
Hover any element for its exact size — and the live gap to anything beside it.
Measure, inspect, and edit any live page — its real CSS, type, and color — without ever opening DevTools.
No account · no tracking · 100% local
01 — How it works
Every size & gap, instantly.
Type, color, contrast.
Edit the CSS, live.
Note it, screenshot it.
02 — Features
Every demo below is real and live — the same overlays the extension draws.
Hover any element for its exact size — and the live gap to anything beside it.
Type, color, padding, radius — plus a live contrast check. Real computed values, not guesses.
Design Engineer
Tweak size, weight, or corners in the inspect panel — the selected button restyles on the page as you go.
Drop notes on the design, then snap a screenshot with them baked in — receipts for every review.
03 — The panel
Click any element for its real CSS, type and color — then edit it live, walk the tree, or write your own CSS. No Elements tab, no digging.
04 — Who it’s for
Check the build against your file — without ever leaving the build.
The exact values, instantly. No screenshot-squinting, no guess-px.
Audit spacing-scale drift across whole product surfaces in one pass.
Turn “feels off” into “13px should be 16px” — in seconds, with proof.
05 — FAQ
Yes — any page your browser can open: production, staging, localhost, web apps behind logins, even content inside iframes. If you can see it, you can measure it.
No. Inspeck runs entirely in your browser and makes zero network requests. Measurements, notes and screenshots never leave your machine — no account, no tracking, nothing collected.
Nope. If you can hover and click, you can audit a UI. Engineers still get the deep end — selectors, computed styles and copy-ready specs.
Chrome and Chromium-based browsers — Edge, Arc, Brave. More on the way.
Free. Use it on every project, every day. Be the person who notices the 13px.
Add Inspeck to your browser and make every pixel accountable.
Works with Chrome · Edge · Arc · Brave