InSpec

The CSS inspector that remembers. A standalone Mac browser where you can click any element, see all its variants, and dial in the styles with visual editors. Your edits stay put through reloads, and you can save them right back to the source. Built for the moment between "looks right in the browser" and "merged to main."

Get on the Mac App Store Download free trial

macOS 14 Sonoma or later · Apple Silicon & Intel · Free trial

Features

🌓

Every variant, one click away

InSpec reads the page's CSS and lists every pseudo-class and @media context the author wrote against the inspected element — :hover, :focus-visible, :disabled, dark mode, print, and more. Pick one and InSpec promotes its declarations onto the live element so you can edit the hover state without holding the mouse there or the dark variant without flipping system appearance.

💾

Edits that survive a reload

DevTools forgets every change the moment you reload. InSpec keys overrides to the page's URL and reapplies them on every load — same-page push-state nav, full reloads, even across quit and relaunch. Iterate for an afternoon without losing a thing, then pick up where you left off tomorrow.

📋

Built for the handoff

Every edit captures which stylesheet, selector, and original value it overrode. Copy them out as ready-to-paste CSS rules grouped by file, or — on local pages — let Save to source splice them into the right .css file, style attribute, or <style> block. No "now where do I make this change for real."

🎛️

An interface for editing, not debugging

Sliders for opacity. A real color picker that drives the macOS panel. Visual builders for box-shadow, gradients, border-radius, flex, cubic-bezier. One-click eye toggles to A/B compare any property. The panel is shaped around changing styles, not just reading them.

📐

Spacious, not stuffed in a sidebar

DevTools cramps everything into a corner of someone else's app. InSpec is its own window — the inspector pane is wide enough to scan properties at a glance, and the controls you reach for mid-edit (viewport presets, inspect mode, alignment guides, the overrides badge) all live in the top bar, one click away.

📸

Capture as image

Screenshot the current page at any of the responsive viewport presets — or all of them at once — with one click. Annotations render into the capture so a shared image is self-describing, ready to drop into a stakeholder review or coding-agent prompt.

Grouped by ruleset. Every CSS rule whose selector matches the targeted element, in cascade order — selector as a dividing heading, declarations underneath as editable rows. The same Styles-panel layout you already know, with InSpec's rich editors on every line. A separate Inspector edits group at the top collects everything you've added that isn't in a matched author rule, so your in-flight changes never get lost in the noise.
Pick where each edit gets saved. Adding a property pops a modal that asks you up front: inline (element.style), the <style> block in <head>, or any of the page's attached stylesheets. The target rides along with the override so Save to source and Copy CSS by stylesheet route it correctly the first time.
Retarget any override later. A chip on each row in the overrides sheet lets you switch where an edit gets saved — a different stylesheet, the style attribute, the <style> block — without losing the value.
Save to source writes HTML too. On local pages, inline-targeted edits land back on each element's style attribute, <style>-targeted edits append a fenced /* InSpec overrides */ block inside <head> (or create one if absent), and stylesheet edits splice into the right .css file — all in one round-trip.
Breakpoint-aware overrides. Edit a property whose source rule sat inside an @media block and the override scopes to the same query — no leak to other breakpoints, no leak to the base style. Per-property picker for any edit's applies-to set.
One-click "mute the page." A/B-compare your overrides against the original without losing them. The page-bar eye toggles every override off; click again to re-enable them all. Per-property eye toggles for finer pauses.
DOM nav built for editing. Right-click any element to walk ancestors and children inline; the inspector header opens the same chain whenever you need to climb back up. html and head are filtered out — they're never what you actually want to style.
Annotations. Drop a green check, a red X, or a yellow note on any element. They persist across reloads and relaunches, ride along into screenshot captures, and survive sidebar-hidden mode — useful for stakeholder feedback and coding-agent prompts alike.
Featherweight and native. Pure SwiftUI + WebKit + a small injected JS inspector. No telemetry, no servers, no remote dependencies.