Modern Frontend Inspector

The Context Friction

Why visual tweaks take twenty minutes in traditional workflows

Frontend developers and designers spend hours switching between DevTools, component files, and terminal rebuilds just to test a typographic or layout adjustment.

The Disconnected Cycle

Inspect element in DevTools through deep nested DOM trees and inherited CSS rules.
Attempt temporary tweaks that disappear as soon as dynamic framework re-renders occur.
Hunt through repository files to locate the exact CSS module or Tailwind utility class.
Modify source code, trigger HMR/build, wait for bundler recompilation, and lose interactive page state.
Manually reconstruct the component state just to verify a minor spacing change.

The Direct MFI Loop

Click Select on any live element directly in the page viewport.
Inspect true computed styles, box model dimensions, and traced CSS variable origins.
Edit values across 28 properties with live updates and CSS.supports validation.
Instantly preview across interaction states (Hover/Focus) and responsive breakpoints.
Copy verified CSS, Tailwind utilities, HTML, or structured AI-handoff prompts in one click.

The Continuous Pipeline

Six steps, one unified instrument

MFI connects observation, mutation, and implementation into a single seamless loop.

SELECT

Point and click any element on the page. A high-contrast overlay locks the target and distinguishes hovered elements.
INSPECT

Read true computed styles, examine box model dimensions, trace var() references, and inspect pseudo-elements.
EDIT

Adjust spacing, typography, colors, borders, and positioning. Every value is validated before application.
PREVIEW

See adjustments live with a ~140 ms debounce across interaction states and responsive viewport widths.
UNDO/REDO

Iterate without fear. Step backward and forward through a complete session history, or reset properties individually.
EXPORT

Turn visual decisions into clean CSS, theme-aware Tailwind classes, HTML snippets, or AI-handoff contexts.

Interactive Instrument Playground

Experience the live inspection loop right here

Toggle CSS values below to see how MFI inspects the target, mutates properties live, and generates production-ready exports.

mfi://canvas/target-button

Element Selected: <button.cta>

<button.cta-button> 186 × 44 px

Padding:

Radius:

Color Theme:

Pseudo State:

.cta-button {
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #4fc1ff;
  color: #062330;
  font-weight: 600;
  transition: transform 0.15s ease;
}

Act I & II · Discovery

Look beneath the surface of any rendered interface

MFI exposes actual computed values from the browser rendering engine, bypassing guesswork and cascading style ambiguities.

True Computed CSS

Read exact pixel dimensions, resolved color values, calculated line heights, and inheritance paths.

CSS Variable Tracing

Trace var(--name) tokens back to their parent declaration rules without manually searching stylesheets.

Pseudo-Element Inspection

Inspect and inspect properties declared on ::before and ::after pseudo-elements.

SPA Reacquisition

React, Vue, and Svelte component re-renders are tracked automatically to preserve selection lock.

/* MFI resolves computed tokens automatically */
color: #FFFFFF; /* from var(--text) */
line-height: 90.3px; /* computed ratio */

MFI Inspect panel showing selected element details and computed layout box model

MFI Edit panel showing typography, colors, border, shadow, and position styles

Act III · Live Mutation

28 editable CSS properties, guarded by instant validation

Tweak typography, layout geometry, colors, borders, and positions in real time. Changes are debounced at ~140 ms and validated before they touch the DOM.

CSS.supports Validation Shield

Invalid syntax or unsupported property values are caught immediately in the input field before application.

Six Property Categories

Comprehensive controls covering Layout, Typography, Colors, Borders, Box Shadows, and Positioning.

Per-Property Reset

Restore any single attribute to its original computed value with one click without discarding your other tweaks.

/* Built-in live validation logic */
if (CSS.supports(property, value)) {
applyStyleDebounced(element, property, value);
}

Act IV & V · Verification & History

Experiment freely without breaking the live page

Test hover states, emulate responsive viewport widths, and navigate your complete chronological edit history.

Multi-State Preview

Preview Normal, Hover, Focus, Active, and Disabled states on the selected target.

Where a pseudo-state cannot be forced natively, MFI simulates it and labels it clearly as simulated in the panel UI.

Responsive Emulation

Emulate Desktop 1440px, Tablet 768px, and Mobile 390px directly within the side panel.

Emulation uses the Chrome Debugger API; when unavailable, MFI falls back to constrained-width emulation and notes it.

Full Undo / Redo History

Every style change lands in an immutable history stack. Step forward and backward safely at any moment.

Changes list highlights modified properties for immediate review and auditing.

Isolated Tab Sessions

Each browser tab maintains an independent inspection session. Edits in one tab never bleed into other open pages.

Closing the tab discards session styles completely, keeping browser memory clean.

Act VI · The Code Bridge

Shorten the distance between visual discovery and production code

Once your styles look right in the browser, export them directly in the format your codebase expects.

Clean CSS Export

Exports your modifications as concise, valid CSS property blocks ready to paste into stylesheet rules.

Tailwind Utility Mapping

Maps spacing, typography, and color values into standard Tailwind CSS utility classes.

Rendered HTML Extraction

Copies the exact clean markup structure of the selected element and its immediate subtree.

AI-Handoff Context

Generates structured element summaries formatted specifically for pasting into AI coding assistants.

MFI Export and Preview panel showing state preview, responsive emulation, and export options

Pro Instrumentation

Engineered for developers moving design intent at scale

The complete inspection and editing core remains 100% free with unlimited usage. Pro adds specialized leverage tools for high-volume implementation workflows.

01 PRO

Advanced Tailwind Export

Theme-aware Tailwind mapping that resolves arbitrary values against standard and custom config presets.

bg-slate-900/80 backdrop-blur-md px-6 py-3

02 PRO

Full Computed CSS Export

Exports the complete, exhaustive computed style tree of an element, rather than solely your session modifications.

120+ computed properties resolved to final values

03 PRO

Similar Element Discovery

Analyzes page DOM signals to discover and cycle between elements sharing similar classes, structures, or styles.

Matched 8 instances across document tree

04 PRO

Multi-element Editing

Apply synchronized CSS modifications across multiple selected elements simultaneously in one pass.

Syncing: padding-top: 16px across 4 cards

05 PRO

Component Extraction

Lifts a rendered element subtree along with its associated styles into a clean, reusable component template.

<CardRoot> + scoped styles extracted

06 PRO

Design Token Extraction

Aggregates unique colors, spacing metrics, and typographic choices from selected elements into structured token palettes.

{ color: { primary: "#4fc1ff" }, spacing: { ... } }

Capability	Free Plan	Pro License
Core Inspection & Mutation Engine
Element selection (hover & lock overlay)
Computed CSS, variable tracing, ::before/::after
28 editable properties with live preview (~140 ms)
Undo/redo history, per-property reset
State preview (Normal / Hover / Focus / Active / Disabled)
Responsive emulation presets (1440 / 768 / 390)
Basic export: CSS, basic Tailwind, HTML, AI-handoff
Daily usage or inspection quota	None (Unlimited)	None (Unlimited)
Pro Workflow Leverage Features
Advanced Tailwind Export
Full Computed CSS Export
Similar Element Discovery
Multi-element Editing
Component Extraction
Design Token Extraction

Local-First Architecture

Your page data stays in your browser

Inspected page content stays in your browser and is not sent to the MFI licensing service. Full details in the Privacy Policy.

Browser Tab Sandbox ISOLATED

DOM, HTML & CSS processed locally
0 analytics, 0 telemetry, 0 tracking scripts
All code bundled locally inside Manifest V3
Edits live strictly in-memory per tab session

ZERO DATA CHANNEL

Licensing Service PRO ONLY

Activation & lifecycle entitlement checks
Minimal key fingerprint verification
Receives zero DOM, HTML, or CSS data
Free tier makes zero licensing calls

Pricing

Free is complete. Pro is a one-time decision.

Purchase → license key → activate in the extension. No account, no password.

Free

$0

The full core: inspect, edit, preview, undo/redo, export. Unlimited use, no daily quota.

Add to Chrome

Pro — Monthly

$5.99 / month

All Pro workflow features. Cancel any time from the billing portal.

Buy Pro Monthly

Best value Pro — Annual

$49.99 / year

All Pro workflow features. Save about 30% versus monthly.

Buy Pro Annual

Pro — Lifetime

$59.99 one-time

Pay once, keep all Pro features. No subscription, no renewal.

Buy Pro Lifetime

Secure checkout via Lemon Squeezy (Merchant of Record). Taxes are handled at checkout. See our Terms & Refund Policy.

FAQ

Straight answers

Does MFI send my browsing data anywhere?

No. Everything you inspect — DOM, HTML, CSS, computed styles — is processed locally in your browser and is not sent to the MFI licensing service. MFI ships no analytics and no telemetry at all. The only network requests the extension makes are to the licensing service for entitlement activation, validation and lifecycle, which involve none of your page data. See the Privacy Policy for details.

Do I need an account?

No. MFI never asks you to create an account or set a password. The Free plan needs nothing at all. If you buy Pro, you receive a license key and activate it inside the extension — that is the whole flow.

What happens if I remove or deactivate my license on a device?

Removing the license returns that installation to the Free plan. The licensing service currently enforces one active activation per license. If an earlier activation is still counted, contact support before moving the license to another device.

What’s the difference between Free and Pro?

Free is the complete core experience: element selection, real computed CSS inspection with variable tracing and pseudo-elements, 28 editable properties with live preview, undo/redo with per-property reset, state preview, responsive emulation, and export to CSS, basic Tailwind, HTML and AI-handoff — with no daily quota. Pro adds the workflow features on top: Advanced Tailwind Export, Full Computed CSS Export, Similar Element Discovery, Multi-element Editing, Component Extraction and Design Token Extraction.

Which browsers are supported?

MFI is a Chrome extension built on Manifest V3 and uses the Chrome side panel API, so it supports Chrome versions that provide side panel support. Other Chromium browsers that implement the same APIs may work, but Chrome is the supported target.

How do refunds work?

Purchases are processed by Lemon Squeezy (Merchant of Record). We offer a 14-day refund for licenses that have not been activated — see the Terms & Refund Policy or contact us via the Support page.

TERMINAL · MFI WORKFLOW COMPLETED STATUS: READY

See the interface.
Understand the system.
Change the result.

Shorten the gap between visual discovery and production code. Zero accounts, zero tracking, complete local-first control.

Add to Chrome — Free Explore Pro Plans

Inspect and edit any element’s real computed CSS, right in your browser.