VisBug
Extension Actions
CRX ID
cdockenadnadldjbbgcallicgledbeoc
Status
- Extension status: Featured
Description from extension meta
Open source browser design tools
Image from store
Description from store
Open source web design debug tools built with JavaScript: a FireBug for designers.
- Point, click, move, resize & tinker
- Edit or style any page, in any state, like it's an artboard
- Inspect styles, spacing, distance, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage adobe/sketch skills
- Edit text, replace images
- Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
- Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc
- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
- No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea
Give power to designers & content creators, in a place where they currently feel they have little to none, **by bringing design tool interactions and hotkeys to the browser**
Latest reviews
- Mohammed AL-7ajri
- 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.
- Filip Grabowski
- The best one I've found yet
- bryan godoy aran
- it didn't open up when i clicked on it
- brahim oubbad
- Very good!
- Dilan Melantoe
- Very good! recommanded
- Wasana Wickramasinghe
- 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!
- Dianggit Sinewaka Bitotama
- 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.
- Juan Gabriel Ramirez
- Nice app! I'm a frontend developer and this really helps me get my work done
- konrad Pfaff
- Please add an undo Function. The tool works great but without being able to undo, more complicated edits are impossible.
- Abdul Hadi Zulfiqar Ali
- superb
- Leason Lee
- nice app
- Jaideep Thakur
- Wow It Very Helpful.
- Pragnesh Patel
- fantastic
- eh?
- just what i was looking for!
- Pradeep Narwaria
- Very helpful, it's wonderful...
- Lucas Aarón Cano
- Perfectaaaaaa
- Isaías Ulevich
- Stoked.
- Shmuel Blitz
- Very helpful, and very easy to use. Every web developer should have this installed on his browser.
- Jesus Aguilar
- very useful!!
- Karma Khan
- Very useful and helpful tool for Front-end like myself, but there are some problem to it like It should at least have a close button, Some dynamic actions to it, some react tools too and lastly it should have a device viewer like I wanna see my website or a web app before changes and after changes. Adding these changes will make the extension a thousands times better. Keep up the Good work 😉
- Mi Nguyễn
- I'm a big fan of VisBug, but I've encountered a bug recently. When I use the Inspect tool, there's an issue with multiple pop-up layers stacking on top of each other. Could you take a look and resolve this? 😂
- design
- Great extension, but I've been encountering an issue when I try to check a style. I click on the icon to check it normally, but when I want to disable it, it still shows.
- Mihaela Kolarić
- Usually satisfied, but now there's a bug and it's very annoying.
- NamLv1
- nice
- Diego Silva
- Awesome!
- Pham Quang Thanh (K17 CT)
- Nice
- Chien Thanh
- nice
- Mir T
- Exactly what I needed for work! Thanks!
- Mir T
- Exactly what I needed for work! Thanks!
- Andrés Andrade
- What a beautiful and useful tool, love it!
- Andrés Andrade
- What a beautiful and useful tool, love it!
- Default Cube
- nice extension
- Default Cube
- nice extension
- Moutasem Abdullatif
- amazing
- Moutasem Abdullatif
- amazing
- Профупаковка Google Analytics
- Супер инструмент!
- Fi Br
- Essencial para desenvolvedores de websites.
- Henry Moran
- 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.
- Henry Moran
- 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.
- dg chen
- Greate plugin for UI designer and web developer.
- dg chen
- Greate plugin for UI designer and web developer.
- Molly
- 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?
- Molly
- 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?
- Trần Huy Hoàng
- nice
- Trần Huy Hoàng
- nice
- Đình Bình
- ok đó em trai của ta hehehhehêhê ta mới code thiui t 6 tủi
- Zheng Lai
- Incredible functionality and intuitive interface.
- Zheng Lai
- Incredible functionality and intuitive interface.
- Ken Alvarez
- Amazingly and intuitive. Best in-class! Thank you!
- Ken Alvarez
- Amazingly and intuitive. Best in-class! Thank you!