Chrome extension

Loupe

Pixel-perfect UI inspection for designers and front-end developers. Inspect, measure, and compare any web page against your designs — right in the browser.

★★★★★  Already using Loupe? Rate it on the Chrome Web Store

Enable on any tab with one click or Alt+Shift+K · see all shortcuts

Works in every Chromium browser — Chrome, Edge, Brave, Arc, Opera — from the same install link.

Loupe's responsive mode: this site previewed in a centered iPhone-sized frame, with the device controls floating beside it and the tool dock below
Responsive mode, as it actually looks — a centered device preview with no debugger banner. Real screenshot, v0.8.7.

Everything you need to ship pixel-perfect UI

A full inspection toolkit that runs entirely in your browser — no setup, no accounts, no data leaving your machine.

Inspect

Hover any element for its selector, box model, computed CSS, and ancestry. Screenshot it to PNG or copy its styles as a CSS rule.

Measure distances

Click an anchor element, hover another — exact pixel distances between them, live, in DevTools style.

Nudge

Drag or arrow-key elements around the live page and compare against a ghost of the original — then export the change list for your developer or AI agent, with before/after screenshots.

Layout grid & rulers

Overlay a configurable column/gutter/margin grid, plus pixel rulers along the viewport edges.

Color picker

A live magnifier samples the exact pixel under your cursor. Build a palette with hex/RGB/HSL, CSS-variable matches, and a WCAG contrast checker.

Xray & find

Outline the page's full element structure at a glance, or find elements by text or CSS selector and cycle through matches.

Responsive mode

A centered device preview with 21 presets and zoom — or switch to in-place emulation with real mobile UA and touch for login and SSO flows.

Figma compare PRO

Anchor a Figma frame to your live DOM and get a per-element diff heatmap with severity grading and design-token hints.

Breakpoint batch compare PRO

Compare one Figma frame per breakpoint: Loupe reflows the page to each width and tabulates the differences.

Accessibility audit PRO

Page-wide scan for WCAG contrast failures, missing alt text, small tap targets, unlabeled fields, and heading-order issues.

AI fix suggestions & QA reports PRO

Optional AI-written fix suggestions using your own Anthropic API key, and one-click export of a standalone QA report.

Enjoying Loupe?

A quick rating helps other designers and developers find it — and it genuinely makes our day.

★★★★★  Rate Loupe on the Chrome Web Store

Every tool is one keypress away

Work without leaving the keyboard — shortcuts stay active on any page while the dock is visible. Single-letter keys are ignored while you're typing in a field.

Alt+Shift+KStart / stop Loupe for the current tab
Alt+Shift+POpen the side panel
IInspect — hover highlights, click selects; hover another element to measure the gap
XXray
GLayout grid
RRulers — press again to hide the bars, again to exit
DMeasure distances — click an anchor, hover a second element
NNudge — move elements, compare against a ghost of the original (⌘Z undo)
CColor picker
FFind element
STailwind xray
ODS components
LDS lint PRO
MResponsive mode
PToggle the panel
⌘/Ctrl+KCommand palette (in the panel) — every mode and action, searchable
SpacePause / resume
QShutdown current tab
HHide dock
↑ / ↓Walk to parent / child element
?Show this list
EscExit mode

Simple pricing

The inspector toolkit is free forever. Loupe Pro adds design comparison, auditing, and reporting — buy once, use forever, with a 7-day free trial.

Free

$0

forever

  • Element inspector & xray
  • Distance measuring
  • Layout grid & page rulers
  • Color picker with contrast checker
  • Find element
  • Responsive device preview
Add to Chrome — free

No account needed. Free forever.

Team

$249 /year

teams up to 10 people

  • Everything in Pro, org-wide
  • Up to 10 people — no per-person accounts
  • Hosted profile auto-updates & team reporting
  • Priority email support
Get a team licence

Instant self-serve checkout via Stripe — your signed licence file is issued the moment payment completes.

Fair use: one licence covers one organisation, up to 10 people. Bigger teams, multi-brand groups, and agencies reselling to clients — talk to us and we'll sort a licence that fits.

1 Install LoupeFree from the Chrome Web Store — the whole inspector toolkit works right away, no account.
2 Open a Pro featurePress Alt+Shift+K on any page, then P for the panel. The Design tab starts your free trial — no card.
3 Upgrade when you're soldOne click in the panel, $20 once, yours forever. Your licence follows your email to any browser.

Private by design

Everything runs locally in your browser — no analytics, no tracking, no inspection data ever leaves your machine. Figma and Anthropic tokens are optional, stored on-device, and sent only to the API you connect them to. Read the full privacy policy.