Modern Frontend Inspector — Inspect, Edit & Export

Inspect, edit and extract modern web UI directly from Chrome.

Modern Frontend Inspector is a frontend workflow tool, not just a CSS viewer. Select any element on any web page, inspect its real computed styles, edit them with instant feedback on the live page, preview the element in different states and viewport sizes, undo anything, then copy clean CSS, Tailwind utilities, the element's HTML, or a structured summary for an AI handoff. HOW IT WORKS 1. SELECT — Hover any element to outline it, click to inspect it. Press Esc to cancel. The overlay never intercepts your clicks. 2. INSPECT — See real layout, typography, colour, border, shadow and position values read from the browser itself, plus CSS variable traces where the page uses them. Values outside the expected presets are disclosed rather than hidden. 3. EDIT — Type new values and the page updates live. Invalid CSS is rejected before it can touch the page. Every change is undoable, redoable and resettable per property. 4. PREVIEW — Test Normal, Hover, Focus, Active and Disabled looks, and reflow the page at Desktop (1440px), Tablet (768px) or Mobile (390px) widths so media queries genuinely apply. Simulated states are always labelled honestly. 5. EXPORT — Copy your modifications as clean CSS with smart shorthand merging, as Tailwind utilities including arbitrary values, as the element's cleaned HTML, or as a structured summary for AI handoff. FREE — UNLIMITED The core engine is free, unlimited and needs no account: selection, inspection, all 28 editable properties, undo/redo/reset, state preview, responsive preview and the basic exports. Free never expires and has no daily quota. PRO — ONE-TIME ACTIVATION, NO ACCOUNT Pro adds the advanced workflow features: advanced Tailwind export, full computed CSS export, similar element discovery, multi-element editing, component extraction and design token extraction. Pro is activated with a licence key — there is no account, no password and no sign-in. Purchases are processed by Lemon Squeezy as Merchant of Record, and the key arrives by email. One licence supports one active device at a time; removing the licence from a device frees the seat so it can be activated elsewhere. - Pro Monthly — $5.99 / month - Pro Annual — $49.99 / year - Pro Lifetime — $59.99 one-time PRIVACY Inspection is local. The page content you inspect — DOM, HTML, CSS, computed styles, element text — stays in the page you are working in. The extension contains no analytics, no telemetry, no ads and no tracking. The only network access is optional Pro licence validation, which contacts the operator's own licensing service and sends only your licence key, a device label and your activation's instance id. The Free plan makes no licensing requests at all. Pro gating is enforced with a cryptographically signed entitlement token verified locally, so editing stored data cannot unlock Pro. PERMISSIONS - sidePanel — displays the inspector interface. - scripting — re-injects the inspector on pages that were already open at install, reload or update time. - debugger — used only for real viewport emulation in Responsive preview. It sets and clears device metrics and nothing else: no network interception and no page control. - storage — stores the signed licence cache so Pro survives a restart. - alarms — schedules the periodic licence revalidation that makes a refund or cancellation take effect promptly. - Host access (http/https) — required to run the picker on the pages you choose to inspect. All extension code ships inside the package. Nothing is downloaded and executed at runtime.