Media
5 items
Description
Inspect, measure, and analyze any web UI. Box model, computed CSS, layout grids, rulers, color picker, responsive mode. Loupe is a pixel-perfect UI inspection toolkit for front-end developers and designers — a faster, visual layer on top of Chrome DevTools for the everyday jobs: reading an element's box model and computed CSS, measuring the exact pixel gap between two elements, checking spacing against a layout grid, picking colors, testing responsive breakpoints, and comparing your live page against its Figma design. Enable it on any tab with one click (or Alt+Shift+K) and work straight on the page — no DevTools panel to wrestle with. Results live in a redesigned, drag-resizable panel with three tabs — Element (this one thing), Page (everything on the page), Checks (everything wrong with it) — plus a ⌘K command palette and light/dark themes. — FREE, FOREVER — ■ Inspect — hover any element for its selector, box model, computed CSS, and ancestry; screenshot an element or copy its styles as a CSS rule ■ Measure — click two elements to see the exact pixel distance between them ■ Layout Grid — overlay a configurable column / gutter / margin grid on any page ■ Page Rulers & Xray — pixel rulers plus a depth-outlined view of the whole element tree ■ Color Picker — sample any pixel on screen; palette with HEX/RGB/HSL, on-page CSS-variable matches, and a WCAG contrast checker ■ Find Element — locate elements by CSS selector or text ■ Page Inventory — every font style, text and background color, shadow, gradient, spacing value, border, radius and asset on the page, counted — each row copies its CSS and locates its matches ■ Responsive Mode — preview any URL at real device sizes (viewport, touch, user agent) in a real tab, so login and SSO flows keep working — no iframe ■ Tailwind Xray — highlight every element still using raw Tailwind utility classes (with a brand-prefix allowlist), so you can spot what your components should replace ■ Design System Profiles — load your design system's token profile and see which token every element uses, inventory your components on any page, and flag native controls that should be components — LOUPE PRO — ■ Figma Compare — anchor a Figma frame to your live DOM and get a per-element diff heatmap with severity grading, so design-vs-build drift is obvious; optional AI-written fix suggestions using your own Anthropic API key ■ Accessibility Audit — page-wide WCAG scan: contrast, missing alt text, tiny tap targets, unlabeled fields, heading order, and more — click any issue to locate it ■ DS Lint & Dark-Mode Diff — audit a page against your design system's rules: raw colors, rogue spacing, deprecated tokens, and colors that don't respond to your dark theme ■ QA Report Export — one standalone HTML report of the findings, no external requests — KEYBOARD SHORTCUTS — Work on any page while the dock is visible (single-letter shortcuts are ignored while you're typing in a field): Alt+Shift+K — Start / stop Loupe for the current tab (global command) Alt+Shift+P — Open the Loupe panel I — Inspect X — Xray G — Layout Grid R — Page Rulers D — Measure Distances C — Color Picker F — Find Element S — Tailwind Xray O — DS Components L — DS Lint (Pro) M — Responsive Mode P — Toggle panel (open / close) Cmd/Ctrl+K — Command palette (in the panel): every mode and action, searchable Space — Pause / Resume Q — Shutdown (current tab) H — Hide Dock ↑ / ↓ — Walk to parent / child element ? — Show keyboard shortcuts Esc — Exit mode — PRIVACY — Everything runs locally in your browser. No analytics, no tracking, no inspection data ever leaves your machine. Your optional Figma and Anthropic API keys stay on-device and are sent only to the API each belongs to. — PRICING — The inspector toolkit and design-system profiles are free forever. Loupe Pro (Figma compare, accessibility audit, DS lint, dark-mode diff, AI suggestions, report export) is a one-time $20 purchase — buy once, use forever, with a 7-day free trial. — FOR TEAMS — An organisation licence unlocks Pro for everyone using your design system's profile — no individual accounts — with hosted profile auto-updates and optional reporting to your own endpoint. $249 one-time for teams up to 50 people at getloupe.org; contact the developer for larger organisations, enterprise licensing, or invoicing. Get started: https://getloupe.org