A Game-Changing Chrome Extension for Web Designers: Unlocking the Power of Debug Tools

One of the most useful extension in my collection. The 5th star will be earned with an UNDO feature

Great extension overall. It takes a little time to get comfortable with at first, but once you do, it works really well for quickly rearranging elements on a page while building with Claude Code. A few improvements would make it much easier to use: 1. Add a reset / revert option There should be a button that resets the page back to its original state, or at least lets you undo all current changes and start over. 2. Add layer order controls It would help to have a way to increase or decrease the layer position of elements while moving them. Right now, it is too easy to accidentally move a button or page element and drop it behind something else. 3. Add a collapsible layers panel A collapsible panel on the right side showing the page structure and layers would be very useful. It should list elements such as divs, buttons, input fields, and other components in a visual hierarchy. This would make it much easier to: see the structure of the page at a glance select specific elements from a list highlight where an element is on the page when clicked find and work on elements that are otherwise hard to locate in the browser Overall, this is already a very useful tool. These additions would make it much more practical for layout work and visual editing.

Great! Help for design research: sizes, colors, fonts. I can move elements or change its

Work on an undo feature please, so frustrating!!!

Great ! But we need snip button feature for pixel perfect designs.

VisBug is an indispensable tool for anyone who needs to bridge the gap between design intent and front-end implementation. Its ease of use and instant feedback loop make it ideal for rapid prototyping and visual QA, though teams should plan to export and formalize any changes back into their development workflow. For designers, developers, and product managers alike, VisBug streamlines the often-painful handoff process—and earns a solid recommendation for its unique, browser-native approach.

The best one I've found yet

it didn't open up when i clicked on it

Very good!

Very good! recommanded

Great Tool for Quick Design Checks I love using VisBug! It simplifies checking and adjusting spacing, padding, and consistency directly in the browser. It’s user-friendly and saves time, making it great for anyone involved in web design. Highly recommended for effortless on-the-fly edits!

why the tools doesn't show up when I click the visbug, I've already clear the cache and cookies, and also reinstall the visbug, but the visbug tools still doesn't show up.

Nice app! I'm a frontend developer and this really helps me get my work done

Please add an undo Function. The tool works great but without being able to undo, more complicated edits are impossible.

superb

nice app

Wow It Very Helpful.

fantastic

just what i was looking for!

Very helpful, it's wonderful...

Perfectaaaaaa

nice

Exactly what I needed for work! Thanks!

What a beautiful and useful tool, love it!

nice extension

amazing

amazing tool and makes doing QA a whole lot easier. pair this with the Jam extension to create bug tickets and you're workflow will improve exponentially.

Greate plugin for UI designer and web developer.

Seems really cool for what it is: a way to visually change a webpage using mainly keyboard commands. What it doesn't do is save your changes in any meaningful way: it'll be up to you to take a screenshot or find your code changes in either Chrome's built-in developer tools or another extension. The second thing it doesn't do super well is onboarding. There's a "training" mode to learn the key commands that's kind of nifty, but at first I couldn't figure out how to close it without refreshing the page and losing my changes. (Answer: I think Esc or just hitting the VisBug extension icon will do it.) Check out the master list of key commands https://github.com/GoogleChromeLabs/ProjectVisBug/wiki/Keyboard-Master-List , and then the wiki pages, which include training videos: https://github.com/GoogleChromeLabs/ProjectVisBug. But I felt like I was missing things, e.g. I discovered a /skeleton command in the search bar by accident that produces a wireframe, and then found other commands with the down arrow next to the search icon, but couldn't figure out how to un-apply those styles. I also couldn't quickly figure out when/what the newest updates were to see if/when save changes is coming. (Not suuuper familiar with GitHub, which I think is the target audience here.) I'm looking for something that can help me save my changes as code, so I'll be moving on. But I hope this continues to develop, since keyboard accessibility is soooo overlooked and under-supported. Tons of cool web projects only exist because the internet was allowed to become a Petri dish for spontaneous creativity and collaboration; imagine how much untapped potential, creativity, and new projects we'd have access to if an entire group of contributers weren't effectively locked out of using most of the web since its early days?

nice