Hover any element to measure it. Click to inspect every CSS property in one panel. Move the cursor to see the distance between two elements drawn live in red — no DevTools, no guesswork.
Caliper is a cross-browser web extension that turns any page into a Figma-style inspect surface — runs on Chrome, Microsoft Edge, Brave, Firefox and Safari from the same source folder. It exists because shipping pixel-perfect implementations against a Figma mockup means flipping between Figma, the browser and DevTools dozens of times per session — measuring padding, comparing font sizes, eyeballing distances. Caliper collapses that loop into hover-and-click.
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 — outline + dimension pill (
width × height) instantly. - Click to lock a selection — opens a side panel grouping every relevant property:
- Layout — W, H, X, Y (viewport-relative), Display, Gap.
- Spacing — Padding & Margin, also visualised as colored layers on the page (green / orange, the DevTools convention designers already know).
- Typography — font family, size, weight (with human-readable name), line height, letter spacing, color, text alignment.
- Fill — background color with swatch + hex.
- Border — width, style, color, radius.
- Effects — box-shadow, opacity.
- Move the cursor over another element — distance between the selection and the hover is drawn in red on every axis. No modifier key required. Works for side-by-side gaps and for nested cases (the four padding-style insets between an outer and an inner element).
- Drag anywhere — free ruler between two arbitrary points, with live
dxanddypills. Same idea as Figma's Alt-drag, but no modifier key. The ruler stays drawn after release so you can read or screenshot the values; clear withEscor by clicking on an element. - Click any panel row — copies the value to the clipboard, with a "Copied" toast.
- Responsive viewport from the popup → Mobile (375), Tablet (768), Desktop (1440) presets or any custom
W × H. Same approach as DevTools' Device Mode: the page renders at the override dimensions inside the same browser window, media queries actually fire, andwindow.innerWidth/innerHeightreflect the override. Backed by Chrome's DevTools Protocol (Emulation.setDeviceMetricsOverrideviachrome.debugger). Mobile / tablet presets also flip themobileflag sopointer: coarseand touch emulation kick in. - Smart breadcrumb — picks
id, thendata-testid, then the first two CSS classes. Readsbutton[data-testid="submit"]instead ofbutton.bg-blue-500.text-whitein component-based codebases. - Works inside iframes — content scripts run in every frame in the tab (top + same-origin + cross-origin), so embedded widgets are inspectable too.
- Esc cleans up everywhere — pressed in any frame, the inspector deactivates across the whole tab via the service worker.
- Keyboard shortcut —
⌘/Ctrl + Shift + U, customisable. - Zero build step — vanilla JavaScript, plain files, just load the folder.
The whole UI lives in a closed Shadow DOM attached to <html>, so the page's CSS can never leak in and our styles can never leak out.
DevTools is great when you already know what you're looking for. It's slow when the question is "is this 16px or 24px? is this aligned to the grid? is the gap between these two cards what the design says?" — questions designers and frontend developers ask hundreds of times during implementation review.
A typical pixel-perfect QA loop in vanilla DevTools:
⌘⌥Ito open DevTools.- Activate the inspector.
- Click the element.
- Scroll the Computed pane.
- Find the property — possibly buried under cascading overrides.
- Switch back to Figma.
- Compare the two numbers.
- Repeat for the next property.
Caliper: hover, click, read the panel. Done.
The same source folder loads into Chrome, Edge, Firefox and Safari. No build step, no per-browser variants.
- Open
chrome://extensions/(oredge://extensions/on Edge). - Enable Developer mode (top-right toggle).
- Click Load unpacked and pick this folder.
- Refresh any tab you had open before installing.
Customise the keyboard shortcut at chrome://extensions/shortcuts (Chrome / Brave) or edge://extensions/shortcuts (Edge). The popup's Customize keyboard shortcut link routes to whichever is correct for the running browser.
Firefox 121 is the minimum because that release made MV3 service workers viable.
- Open
about:debugging#/runtime/this-firefox. - Click Load Temporary Add-on….
- Pick any file inside this folder (e.g.
manifest.json). - The add-on stays loaded until you restart Firefox.
Customise the shortcut at about:addons → ⚙ → Manage Extension Shortcuts.
Apple ships every Safari extension inside a host app, so there is no "load unpacked" — but the conversion is one command:
xcrun safari-web-extension-converter /path/to/caliperThat generates an Xcode project. Build & run it once (⌘R), then in Safari → Settings → Extensions → enable Caliper. For unsigned development builds, also enable Safari → Develop → Allow Unsigned Extensions (resets when you quit Safari unless you sign with an Apple Developer ID).
Note: Safari often ignores manifest-declared keyboard shortcuts. Use the toolbar icon, or assign one in System Settings → Keyboard → Keyboard Shortcuts → App Shortcuts.
- Click the Caliper icon in the toolbar, or press the keyboard shortcut.
- The page cursor switches to a crosshair and a blue dot appears on the toolbar badge.
- Hover anything to see its size.
- Click to lock it as the selection. The side panel opens at the top-right with every property grouped.
- Move the cursor to another element — distance lines and value pills are drawn between the selection and whatever is under your cursor.
- Or click-and-drag in any empty area — a free ruler appears between the two points, with
dxanddyshown live. - Click a row in the panel to copy the value.
- Esc to deselect; Esc again to exit the inspector.
| Capability | Browser DevTools | PerfectPixel | VisBug | Caliper |
|---|---|---|---|---|
| Live measurements on hover | Computed styles only | — | Inline tooltips | Yes — outline + dimension pill |
| Distance between two elements | — | — | — | Yes — drawn live, no Alt key |
| Nested padding measurements | Box-model panel only | — | — | Yes — Figma-style insets |
| All-properties-in-one panel | Multiple tabs | — | — | Yes — six grouped sections |
| Click-to-copy values | — | — | — | Yes |
| Iframe support | Per-frame switching | — | — | Yes — auto, every frame |
| Source license | Browser-bundled | Limited | MIT | PolyForm Noncommercial |
Caliper is not a replacement for DevTools — keep DevTools for everything beyond visual inspection. It's the missing layer between Figma and DevTools for the moment when you're trying to ship the implementation that matches the mockup.
Single source folder. Every file is plain JavaScript or HTML; the manifest loads the content scripts in dependency order.
caliper/
├── manifest.json MV3 manifest, browser_specific_settings.gecko for Firefox
├── LICENSE MIT
├── background/
│ └── service-worker.js keyboard relay, badge state, global Esc broadcast
├── content/ loaded into every frame in the tab
│ ├── state.js window.__Caliper namespace (active / hovered / selected)
│ ├── utils.js formatters, color parsers, breadcrumb, getBox()
│ ├── overlay.js closed Shadow DOM, outlines, box-model, distance, insets
│ ├── panel.js side panel + click-to-copy + toast
│ └── main.js state machine, event capture, render loop
├── popup/ toolbar popup with status + legend
└── icons/
├── icon-{16,32,48,128}.png
└── generate.py stdlib-only PNG generator
The whole UI renders inside a single <style> block injected into a closed Shadow DOM at activation time — so the page's CSS can never style our overlays and our overlays can never style the page. Cross-frame coordination uses the service worker as a relay: any frame's Esc sends caliper/global-deactivate to the service worker, which broadcasts caliper/deactivate to every frame in the tab.
To regenerate icons:
python3 icons/generate.py- Responsive mode requires the
debuggerpermission. While it's on, the browser shows a yellow "Caliper started debugging this browser" banner on the tab — this is enforced by Chromium to flag any extension using the DevTools Protocol and cannot be hidden (applies equally to Chrome, Edge and Brave). Opening DevTools (F12) detaches our session because only one debugger client can be attached to a tab at a time. - Responsive mode is Chromium-only. Chrome, Microsoft Edge and Brave have
chrome.debugger. Firefox uses a different debug protocol and Safari does not expose one to extensions, so the responsive presets are inert there. The rest of Caliper (inspector, distance lines, free ruler, contrast, panel) works everywhere. - Distance lines stay within a single frame. Cross-frame distance would require postMessage plumbing across cross-origin iframes — design decision, not a bug.
- Multiple selections produce multiple panels when inspecting different frames at once. Esc clears them.
- No persistence of selection or ruler across reloads. Planned.
- No comparison against a Figma file yet — planned.
- Safari ignores manifest-declared keyboard shortcuts. Use the toolbar icon, or assign a shortcut in System Settings → Keyboard → App Shortcuts.
Chrome extension · Microsoft Edge extension · Firefox extension · Safari web extension · Figma DevTools alternative · pixel-perfect QA · CSS inspector · web design QA · UX inspection tool · padding margin measurement · element distance overlay · responsive viewport simulator · Manifest V3 · source-available · noncommercial · PolyForm Noncommercial
Issues and PRs welcome. The codebase is intentionally minimal — vanilla JS, no bundler, no transpiler. If a change requires build tooling, please open an issue first to discuss; the loadability of plain files is part of the value proposition.
When proposing UX changes, prefer iteration on IDEA.md's decision log over rewriting from scratch, so the reasoning behind the current behaviour stays visible.
- v0.10 — gray letterbox around the responsive viewport area to match DevTools' Device Mode visual; rotate (W ↔ H) button; DPR override.
- v0.11 — persistent selection and ruler across reloads (selector cache).
- v0.12 — comparison against Figma frames via the Figma REST API.
- v0.13 — Mozilla Add-ons listing, Microsoft Edge Add-ons listing, and Mac App Store package for Safari.
PolyForm Noncommercial 1.0.0 — © 2026 Caliper contributors.
Caliper is source-available for noncommercial use. You may use it, modify it, and share it (including modified versions) for personal, educational, research, hobbyist, or any noncommercial purpose. Use by charities, schools, public-research institutions, and government agencies is also permitted.
Selling Caliper, or shipping it as part of a paid commercial product or service, is not permitted under this license. If you'd like a commercial license, please open an issue.
Note on terminology: by the strict OSI definition, "open source" forbids field-of-use restrictions, so a noncommercial-only license is technically source-available rather than open source. The source code is fully public, modifiable and forkable for the permitted purposes — just not sellable.
Caliper is a UI inspection tool intended for design QA, debugging and educational use on pages you own or have explicit permission to inspect. The authors and contributors do not endorse and are not responsible for any modification, redistribution or use of this software outside of that intent — including, without limitation, automated scraping, surveillance, security-bypass tooling or unauthorised inspection of third-party systems.
The software is provided "AS IS" under the PolyForm Noncommercial License with no warranty of any kind, express or implied. By using Caliper you accept full responsibility for how you use it.
Caliper is an independent open-source project. It is not affiliated with, endorsed by, sponsored by, or in any way officially connected to Figma, Inc. or any of its subsidiaries or affiliates. Figma references throughout this documentation describe the inspection workflow that Caliper aims to reproduce, used for nominative comparison only. "Figma" and the Figma logo are trademarks of Figma, Inc.
The same applies to other third-party tools and brands mentioned (Chrome, Edge, Firefox, Safari, Tailwind, PerfectPixel, VisBug, etc.) — these are referenced descriptively for compatibility and comparison, not as endorsements or partnerships.
Caliper was developed in collaboration with Claude Code, Anthropic's CLI for Claude — pair-programming throughout for code, documentation and architectural reasoning. Scope, direction and final review live with the maintainer. The "AS IS, no warranty" terms of the LICENSE apply to the resulting software regardless of how it was authored.
Crafted with Claude Code