// devtools · chrome extension

Loupe

A jeweler's loupe for the web. Inspect, measure, capture, and extract any page's design and code, without ever opening native DevTools.

How it works All projects

What it is

Front-end work leaks time to tool sprawl: DevTools, a color picker, a screenshot app, a ruler, a font finder, each a context switch. Loupe puts them in one draggable HUD you bring up on any page. Its real bet is not more tools, it is better output: Loupe helps you take a page with you, as design tokens, redlines, CSS, and assets.

Tools

one panel
01

CSS inspector

Read computed styles and edit the live DOM in place, not a mirrored panel.

02

Ruler & measure

A full measurement suite for verifying spacing against a design, pixel by pixel.

03

Eyedropper

Pick any color on the page and pull it straight into a token set.

04

Font explorer

Identify fonts, weights, and sizes in use anywhere on a live page.

05

Capture

Element and page screenshots with a built-in annotator for critique and handoff.

06

Extract

Export design tokens, redlines, code, and assets. The takeaway layer incumbents lack.

How it works

zero context switch
01

Summon

Open the HUD with a shortcut. It renders in a sandboxed Shadow DOM so page styles never leak.

02

Act on the page

Every tool manipulates the real, live DOM in place, then dismisses instantly.

03

Take it with you

Export tokens, CSS, specs, and assets. Processing stays local and private.

Stack

built with
Chrome MV3TypeScriptViteShadow DOM PlaywrightVitestLocal-first

FAQ

common questions
What is Loupe?

An all-in-one Chrome extension for designers and front-end developers. From a draggable in-page HUD it lets you inspect CSS, measure, pick colors, explore fonts, capture screenshots, and extract design tokens and assets, without opening native DevTools.

Who is it for?

Front-end developers who debug layouts and spacing, product and UI designers who inspect live sites and pull colors and fonts, and agency or no-code builders who tweak client sites live.

How is it different from browser DevTools?

DevTools helps you look at a page. Loupe's wedge is takeaway: it exports design tokens, redlines, CSS, and assets so you can take a page's design with you. It also unifies a ruler, color picker, font finder, and screenshot tool in one panel.

Is it private?

Yes. Loupe is local-first: processing happens on-device with minimal permissions, and any AI features are bring-your-own-key.

Does it interfere with the page?

No. The HUD renders in a sandboxed Shadow DOM so host-page styles never leak in or out, and every tool is summonable and dismissible instantly without leaving the page in a broken state.