F12

About

F12 is a lightweight page inspector that lives in a single keyboard shortcut.  on any page to inspect elements, edit CSS live, and extract fonts, colors, and assets — without opening DevTools.

INSPECT ELEMENT
Hover any element to see its size, margins, alignment guides, and key computed styles at a glance. Click to pin it and get a unique CSS selector plus a full, editable list of its styles.

EDIT CSS LIVE
Change any property and watch the page update instantly — dropdowns for layout properties, native color pickers for colors. Every change is tracked as a clean diff (old value → new value) that you can revert per property, per element, or all at once.

YOUR CHANGES, SAVED
Edits are saved automatically, per page. Review them in the Changes panel, copy them as clean CSS, download them as a .css file, or come back later and re-apply saved edits with one click. Pin the pages you care about so they're never cleared.

EXTRACT ASSETS
Scan any page for images, SVGs, and media. Preview, copy, or download individually — or select several and download them in one batch.

COLORS
See every color a page actually uses, with usage counts and where each appears (text, borders, fills, gradients) — in HEX, RGB, or HSL. Pick any pixel on screen with the built-in eyedropper.

FONTS
Browse the fonts a page really renders: families, sizes, weights, and the tags that use them, with live previews. Copy any family name in one click.

PRIVATE BY DESIGN
F12 runs 100% locally. No servers, no accounts, no analytics, no data collection — nothing ever leaves your machine. It requests only minimal permissions and runs only when you invoke it.

WHO IT'S FOR
Designers reviewing shipped pages. Developers measuring spacing without opening DevTools. Product managers mocking up changes on the live site and exporting the CSS. Anyone who's ever asked "what font is that?"

GETTING STARTED
Click the toolbar icon on any page. Hover to inspect, click to pin, Esc to close.