What is the closest free alternative to VisBug?

Chrome DevTools. Editing styles in the Styles panel does the same job with more precision and less convenience — no arrow-key nudging, no visual toolbar, but complete control and it is already installed.

Compare

6 VisBug alternatives, compared

Q: Is VisBug still maintained?

It is open source and still available in the Chrome Web Store, but it has never been a fast-moving project and updates are occasional. That is not a problem for what it does — the DOM APIs it stands on are stable — but do not expect new features on a schedule.

Q: Do VisBug edits save anywhere?

No. Changes live in the page in memory and disappear on reload. You can copy the styles out before you leave, but there is no project file and nothing persists. That is the main reason people look for an alternative.

Q: Which one should I use to rebuild a design I like?

A reader rather than an editor. Editing tools are built to change a page, so getting a complete set of values out of them is slow and lossy. A tool that reports spacing, type, color and motion in one readout is the right shape for rebuilding.

VisBug is good at one thing — changing a live page as if it were a design file. Which alternative you want depends entirely on whether that is actually the thing you were trying to do.

Updated September 2026 · by the Design Toolkit team · Disclosure: Design Toolkit is ours.

The short answer

If you want editing, the alternative is Chrome DevTools — less pleasant, more precise, already installed. If you actually wanted to record a design to rebuild it, VisBug was the wrong shape from the start and Design Toolkit or CSS Peeper is what you were reaching for. If you want edits that persist, you want Stylus or a user stylesheet, not a design tool.

What VisBug is, so the comparison makes sense

VisBug, from Chrome's Adam Argyle, drops a Figma-like toolbar onto any page. Select an element and nudge it with arrow keys, change its type, swap colors, adjust padding, and hold a key to see the distances between things. It is open source, free, and genuinely pleasant.

Two properties define it. First, edits are in-memory — reload and they are gone. Second, it is an editor, not a reader: it makes changing easy and getting a full description of the element out of it hard. Most searches for an alternative come from hitting one of those two walls.

Tool	Edits the page	Reads values out	Edits persist	Price
VisBug	Yes, visually	Limited	No	Free
Chrome DevTools	Yes, in CSS	Yes	With Overrides	Free
Design Toolkit	No	Yes, everything	n/a	Trial, then one payment
CSS Peeper	No	Styles and assets	n/a	Free
Stylus	Yes, via CSS	No	Yes	Free
Web Developer	Partly	Partly	No	Free

1. Chrome DevTools

Chrome DevTools

Editor and reader · Built in · Free

The honest answer for most people looking to replace VisBug. Everything VisBug does, DevTools does through CSS instead of a toolbar: change values in the Styles panel and see them live. What you give up is the pleasure of arrow-key nudging. What you gain is the full cascade, the computed tab, and Local Overrides — which saves your edits to disk and reapplies them on reload, the one thing VisBug cannot do.

Local Overrides make changes survive a reload
The full cascade, with overridden rules struck through
Animations timeline, contrast picker, device emulation, Lighthouse

Weak spot: every change is typed, not dragged. For moving things around by feel, VisBug is simply nicer.

2. Design Toolkit

Design Toolkit Ours

Reader · Chromium browsers · 7-day free trial, then one payment

For the other half of the searches: you did not want to edit the page, you wanted to take it apart and build your own. Hover an element and get its box model, the gaps to its neighbours, the rendered font with weight and tracking, the colors with contrast, and the transition and animation timings — plus the hover and focus states without forcing them. It can also package all of that as a structured brief for an AI assistant.

Every value in one readout, no panel
Distances between two elements, measured from the real geometry
States and motion, which editors generally skip
Whole-page palette and type audit
Copy a section as code, or an animation as a brief, for your AI

Weak spot: it cannot change anything. If your job is proposing a visual tweak on a live page, this is the wrong tool. And it is paid after the trial.

3. CSS Peeper

CSS Peeper

Reader · Chrome · Free

The free version of that same idea, narrower. A panel showing the selected element's typography and colors without the cascade noise, a page-wide palette, and a list of the page's images you can download in bulk.

Clean, designer-shaped summary
Palette and asset extraction
Free

Weak spot: nothing about spacing between elements, states or motion.

4. Stylus

Stylus

Persistent editor · Chrome · Free, open source

If what frustrated you about VisBug was that changes vanish on reload, this is the actual fix. Stylus applies your own CSS to a site every time you visit it, scoped by domain or URL pattern. It is how people permanently adjust a site they use daily.

Edits persist forever, across sessions
Rules scoped per site or per URL pattern
Open source, no telemetry

Weak spot: you write CSS by hand. There is no visual editing at all.

5. Web Developer

Web Developer

Toolbox · Chrome · Free

A long-running toolbar of small utilities: disable CSS or JavaScript, outline every block element, display element dimensions, reveal the alt text on images, show form details. Not a design editor, but several of its switches answer questions faster than any panel.

Outline all block elements — instant layout X-ray
Disable styles or scripts to see the document underneath
Dozens of small audits in one menu

Weak spot: the interface is from another era and it does nothing visually.

6. Figma, with the design already in it

Figma

Design tool · Free tier

Worth saying: a lot of VisBug use is trying to explore a change on a page because the design file is out of date. If the file is current, exploring there is faster, non-destructive, and shareable. VisBug is the answer when the live site is the only source of truth.

Real exploration with history and comments
The result is a spec someone can implement

Weak spot: it is not the live page. Real content, real breakpoints and real states are all missing.

Pick by what you were actually doing

Trying a visual change on a live page — stay on VisBug, or DevTools for precision.
Wanting the change to persist — Stylus, or DevTools Local Overrides.
Rebuilding a design you admire — a reader: Design Toolkit or CSS Peeper.
Handing a design to an AI assistant — a reader that exports structured values; a screenshot loses every number.
Auditing a page quickly — Web Developer, or DevTools with Lighthouse.

When you need the values, not the edit

Spacing, type, color, contrast, states and motion off one hover — and a brief your AI assistant can build from. Free for 7 days.

Add to Chrome

No accountRuns locally14-day refund

Common questions

Is VisBug still maintained?

It is open source and still in the Chrome Web Store, but it has never moved fast and updates are occasional. Not really a problem — the APIs it stands on are stable — but do not expect a feature schedule.

Do VisBug edits save anywhere?

No. They live in the page in memory and go on reload. You can copy styles out before you leave, but nothing persists. That is the main reason people go looking for an alternative.

What is the closest free alternative?

Chrome DevTools. Same job through CSS rather than a toolbar: less convenient, more control, already installed — and Local Overrides keep your changes across reloads.

Which one should I use to rebuild a design I like?

A reader, not an editor. Editing tools are built to change a page, so getting a complete set of values out of them is slow and lossy. You want something that reports spacing, type, color and motion in one readout.