VisBug: A Different Way to Inspect and Adjust Your UI
Browser developer tools have long been the go-to for debugging layout and styling issues, but they often require a fair amount of clicking through panels and tabs. VisBug, created by Chrome developer advocate Adam Argyle, takes a different approach. Instead of drilling into the DOM tree, it lets you point and click at any element on the page and manipulate it directly.
In a recent episode of the Smashing Podcast, host Drew McLellan sat down with Argyle to explore what VisBug is and why it stands apart from the built-in options in Chrome DevTools. Argyle explained that VisBug was designed to lower the barrier to entry for design tweaks, making it accessible not just for developers but for designers and product managers who might not be as comfortable with the command-line-like interface of a traditional inspector.
An On-Page CSS Playground
The core appeal of VisBug is that it turns the browser itself into a design tool. You can hover over any text, image, or container to see its properties, margins, and paddings overlaid visually. Argyle describes it as a "browser extension that gives you x-ray vision" into the page's layout. For example, to fix spacing, you don't hunt for the style rule in the DevTools sidebar; you simply click the element and use the arrow keys to nudge the margin or padding by one pixel at a time.
This direct manipulation extends to typography. VisBug allows you to adjust font size, weight, and line-height on the fly without ever opening a CSS file. The extension also includes accessibility tools, such as a way to outline elements that might lack sufficient color contrast or are missing accessible names.
Simplifying the "Inspect" Mental Model
A key difference Argyle highlighted is the separation between "finding" the bug and "fixing" it. With standard DevTools, you often have to identify the exact HTML node that is causing the overflow or misalignment before you can test a fix. VisBug flattens that process. Because it operates on whatever you choose on the visual canvas, it gives you immediate feedback in a way that feels closer to using a design application like Figma or Sketch than a source-code debugger.
From Proof of Concept to Community Tool
The process of creating VisBug happened quickly. Argyle shared that his initial build took just a fortnight, and the project evolved out of a desire to save time during design reviews. Instead of writing long, annotated comments about CSS changes, he wanted a mechanism to apply modifications on the spot. He also touched on the evolution of the tool—since its launch, the extension has grown to include community contributions and is now available across multiple browser engines, including Chrome, Edge, and Firefox.
The project seems designed to fill the gap between "inspect-only" tools and real-time design tools. Being built on web standards means that any styling change you make in VisBug is just as legitimate as a change made in a code editor—it writes the same CSS properties that your site would render.
If you want to listen to the full conversation or try out the tool yourself, you can find links below.
Show Notes:
- VisBug sandbox and playground
- Adam on Twitter and his personal site
- VisBug video tutorials on YouTube and the "VisBug 101" article
VisBug: A Designer’s Bridge Into the Browser
VisBug is the kind of tool that starts with a simple frustration. For front-end engineer Adam Argyle, now a developer advocate at Google, the frustration was watching designers struggle with Chrome’s DevTools. After surveying designers at Google, he found that most of them only needed a handful of basic actions—checking spacing, tweaking typography, or changing a color—but were forced to wade through a deeply technical interface to do so.
The result is VisBug, an open-source Chrome extension that turns the live page into what looks like a design artboard. It’s a close cousin to the old Firebug, but aimed at visual designers rather than developers. As Argyle puts it, you shouldn’t have to open the hood and move an engine part just to change the color of the seats. With VisBug, you simply click on the element and change it.
Inspection Without the Noise
One of the core ideas behind VisBug is that it deals with computed values—what the browser actually renders—rather than the authored CSS. This makes it a natural tool for reviewing pull requests or communicating between developers and designers.
Its inspect tool is deliberately minimal. Where DevTools shows a full cascade of inherited properties, VisBug’s inspector only surfaces what is unique and relevant to an element: its font family, its colors, its margins and line heights. A designer who hovers over a heading sees the font family without having to scroll through a stylesheet panel. If a property is computed rather than inherited, VisBug flags it as something interesting rather than burying it in a list.
The motivation here is practical. Designers don’t need to know that the default browser stylesheet sets margin: 8px. They need to know how their specific change works. The tool effectively strips away everything that isn’t useful, giving the reviewer a focused view.
Guides, Measuring, and Modifiers
The guides tool is where VisBug’s design-tool roots show. Hovering over an element draws a box around it and displays dashed measurement lines, not unlike the guides found in Sketch or Zeplin. Clicking one element and hovering over another gives you exact pixel distances between them.
The tool embraces the reality that optical alignment matters as much as mathematical spacing—same reason typography uses optical kerning. For checking whether five icons are evenly spaced, you can hold shift, click through each one, and see the values read out in pixels.
This is also where keyboard discipline pays off. Like a pro using a design app, VisBug expects you to learn hotkeys. You can certainly find your way around by clicking, but the real muscle comes from modifiers. Holding option, shift, or command while using a tool changes its behavior. For instance, shift-clicking in guides mode pins a measurement so it persists while you move the cursor. The on-screen toolbar lists the shortcuts for whichever tool you’re hovering over, though, so it’s not all guesswork.
The original guides tool was looser—no snapping, just a freehand crosshair. Argyle says a future update may bring that back as a modifier for users who want to measure a letter, not its bounding box.
A Tool for Chaos Testing and Review
Design review isn’t the only way to put VisBug to work. It functions equally well for “chaos testing,” simulating what happens when real-world content gets poured into a layout. Using command D you can duplicate any element, then space out two versions and see how the design handles the strain. Double-clicking text turns it into an editable field, says
That proven workflow extends to stakeholder feedback. When the client objects to that blue, the designer can click it and test alternatives immediately—without launching a round-trip of PM requests and redesign cycles. Arguments over a color whose meaning is “hard for us” tend to evaporate once you can shift the picker live.
Shareable flows work too: you can pin multiple elements with the inspect tool, take a screenshot of your deltas, and pass it back to the developer with the local modifications annotated right on the page. For a more drastic prototype, the single file browser extension can save the entire page—inline styles and all—as a single HTML document, ready to drag into a Netlify deployment.
Accessibility Is Not an Afterthought
VisBug also works to make accessibility verification a design team responsibility rather than a developer-only chore. An accessibility tool inspects elements across the page, surfacing the roles, titles, and ARIA attributes that are otherwise impossible to see with your eyes. The incentive is to give a project manager or a designer a way to check that a component meets its accessible contract without navigating the difficult-to-read elements panel to find the correct DOM node.
[BLOCK: the a11y inspector shows “Here’s the area attributes, here’s the title if it exists” in plain language.)
The tool doesn’t yet fill in another visual gap: determining the true rendered color of an element that’s been layered with opacity over different backgrounds. Currently it only knows the rgba mix you’ve declared. Argyle thinks it would be a natural feature to truly paint up a canvas and pluck the pixel, but notes it’s still an open issue speculatively, not yet built.
In its place, though, is a planned enhancement to accessibility: replacing the transient hover overlays with “green lines” that surface issues persistently on page. It’s one of the biggest desired features the project is tracking.
Multiselect and Bulk Editing
A capability that distinguishes VisBug from single-node dev tools is multiselect. You can highlight multiple elements and batch-inspect or batch-edit them all at once. Argyle uses this often for checking margins where you otherwise “can’t ever see” the collapse behavior in DevTools, since it will usually only display a single node. With VisBug it’s easy to click through a set of typography scale entries in a storybook, hit the typography tool and nudge them up with the arrow keys—each one steps one unit, maintaining the relative relation.
It resembles the multiple-selection techniques in Figma and Sketch; bulk, relative adjustments are effortless.
A “Different Mental Model” than Figma
Speaking of Figma, Argyle sees the two as complementary rather than competitive. “One is empowering expression, and the other is empowering inspection and augmentation,” he noted.
The key differentiator is in the entry point. Figma starts from a big, blank canvas with unrestricted possibilities—a positive for early exploration but painfully disconnected the moment a product reaches a stable codebase where only maintenance and tweaks are needed. The files go stale. VisBug, on the other hand, picks something to fix in the browser itself. It can work with any DOM, including shadow roots, meaning it works equally well on a local and remote React app, a PWA, or a bunch of design ‘proofs’ at visbug.web.app.
A Bridge, Not a Fork
VisBug began life as an experiment to prove that you could hammer out design nits in the browser even without a developer setup and it’s stayed that way—a proof-of-concept that iterates new interactions, eventually finding its way into Chrome’s DevTools.
The path is visible in DevTools’ “angel” and angle control components—the small GUI widgets for setting rotation or gradient direction values. “I’m calling these type components,” Argyle explained, coding a type unit like angle to have its own tiny dedicated browser—a wheel you can click, snap to 45, or set to 90, all fully keyboard accessible.
The underlying principle: small, focused tools that solve one problem exceptionally well, without becoming a god-UI that attempts to do everything and ends up intimidating newcomers.
An Extension of the Extension Model
Implementing VisBug as a browser extension was a decision born of pragmatism and shipping expediency. It’s 99.9% a custom element allowing it to be included in a page without a heavy library, excepting a color dependency and some user settings now stored across browser sessions via the extension.
Still, there are odd quirks to the extension sandbox world: environments that can’t transfer rich object data to your custom element without explicit bridging and filtering. The solution is to run most of the prototyping work on a demo site, as if VisBug were any other regular web app. Firefox offers a stronger, single-command “install-and-LiveReload” application builder, but anything cross-browser remains fiddly regardless.
What’s Next for VisBug
VisBug is actively changing how users expect to grab and manipulate the layout. The future is aiming for a more drag-and-drop feel, including draggable handles on desired elements. But the reality is elements don’t even possess a width, so getting that native flow to work requires building mental shortcuts that emulate what a visual editor can do far more naturally—like having “shrink wrap” concept for content, or pull the marginal spacing bar directly on the page rather than pushing arrow keys. Argyle is prototyping these, plus an artboard view that takes the entire HTML document and shrinks it into a live, pannable, zoomable canvas where the CSS animations stay running.
On the exporting front, you’ll see something closer to command option C, a clipboard companion that copies every unique computed value from an element as a stylesheet-ready CSS snippet. Meanwhile, the project watches different nooks for future ideation: the most promising one is that bump-bump-bump workflow of nudging HSL lightness until an accessibility checker clears your contrast score.
Until merged back into core DevTools, as so many of its ideas eventually are, it stays a singular experiment of empathy: giving every person who touches a digital product, beginner or pro, a direct view into the web front-end.
