6 VisBug alternatives, compared
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.
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 colours, 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
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
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 colours 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
- Send to AI: a brief an assistant can actually build from
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
The free version of that same idea, narrower. A panel showing the selected element's typography and colours 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
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
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
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, colour, contrast, states and motion off one hover — and a brief your AI assistant can build from. Free for 7 days.
Add to Chrome — free trialCommon 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, colour and motion in one readout.