Media
3 items
Description
Inspect any web UI like Figma — measure, align, and verify pixel-perfect implementations without opening DevTools. Caliper is a Figma-style inspector for the live web. Hover any element to see its dimensions, click to lock a selection and view every relevant CSS property in one panel, drag anywhere for a free ruler, and — new in this version — edit values inline to preview how a change would look, with one-click rollback per property or for every change at once. Built for frontend developers, UX/UI designers and QA engineers who want a CSS inspector that thinks like a design tool, not a debugger. ▸ HOVER any element → instant outline + dimension pill (width × height) ▸ CLICK any element → side panel with Layout, Spacing, Typography, Fill, Border, Effects — all in design-tool vocabulary ▸ MOVE the cursor over another element → distance between the two drawn live, no modifier key required ▸ DRAG anywhere → free ruler with live dx / dy pills, stays on screen so you can screenshot the measurement ▸ EDIT inline (new) → click the pencil on any editable row, type a new value, see the page update in real time. Padding & margin open a 4-side mini editor. Colors get a hex input plus the native OS color picker. ▸ ROLLBACK (new) → ↺ icon on every overridden row, plus "Reset all (N)" in the footer to revert everything at once. Overrides are session-only; deactivating the inspector restores the page exactly as it was. ▸ COPY any value with a click — hex codes, px values, font names, contrast ratios. ▸ RESPONSIVE viewport from the popup — Mobile (375), Tablet (768), Desktop (1440) presets or any custom W × H. Same approach as DevTools Device Mode: real CSS media queries fire, window.innerWidth/innerHeight reflect the override. ▸ Works inside iframes (top + same-origin + cross-origin frames are all inspectable). ▸ Keyboard shortcut Ctrl/Cmd + Shift + U (customizable at chrome://extensions/shortcuts). WHY THIS, AND NOT DEVTOOLS DevTools is great when you already know what you're looking for. Caliper is built for the opposite case: when you have a Figma mockup open and need to answer "is this 16px or 24px? is this aligned to the grid? is the gap what the design says?" — questions designers ask hundreds of times during implementation review. The panel groups properties the way design tools do, not the way the CSS cascade does. Distance measurement runs automatically as you move the cursor — no Alt-hold required. The free ruler doesn't need a modifier key. And editable values turn the inspector into a "what-if" sandbox: change a font-size, see the line break differently, hit ↺ if you don't like it. No commits to the DOM, no localStorage, no surprises after refresh — the page is restored the moment you turn the inspector off. PRIVACY Caliper does not collect, transmit, log, screenshot or persist any data from the pages you inspect. All measurements are computed locally in your tab and stay there. The optional Responsive Viewport feature uses Chrome's DevTools Protocol (Emulation.setDeviceMetricsOverride) strictly for viewport sizing — no network interception, no script injection, no DOM access through CDP. OPEN SOURCE Caliper is released under the PolyForm Noncommercial License.