F12

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.