https://github.com/GoogleChromeLabs/projectvisbug
FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://github.com/GoogleChromeLabs/projectvisbug
debugging-tool design-tools extension inspector toolkit wsiwyg
Last synced: 2 days ago
JSON representation
FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
- Host: GitHub
- URL: https://github.com/GoogleChromeLabs/projectvisbug
- Owner: GoogleChromeLabs
- License: apache-2.0
- Created: 2018-06-20T06:12:20.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2025-09-24T21:23:59.000Z (3 months ago)
- Last Synced: 2025-11-12T05:39:45.214Z (about 2 months ago)
- Topics: debugging-tool, design-tools, extension, inspector, toolkit, wsiwyg
- Language: JavaScript
- Homepage: https://visbug.web.app
- Size: 69.2 MB
- Stars: 5,640
- Watchers: 92
- Forks: 315
- Open Issues: 228
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-systools - VisBug
README
# 「VisBug」
> Open source web design debug tools
- Point, click & tinker
- Hold shift and **multi-select**
- Edit **any page** in **any state**
- **Hover inspect** styles, accessibility and alignment
- **Nitpick** layouts & content, **in the real end environment**, at any device size
- **Leverage** design tool nudging skills
- **Edit** any text
- **Replace** image(s)
- Traverse DOM like groups & layers in Sketch
- Design **within the chaos** of production or prototypes and the **odd states** they produce
- Bugs become **design opportunities**
- Design **while simulating:** latency, translation, media queries, platform constraints, orientation, 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 power within the web project they have today, by bringing design tool interactions to the browser.
Check out the [list of features me and other's are wishing for](https://github.com/GoogleChromeLabs/ProjectVisBug/issues?q=is%3Aopen+is%3Aissue+label%3A%22%E2%9A%A1%EF%B8%8F+feature%22). There's a lot of fun stuff planned or in demand. Cast your vote on a feature, leave some feedback or add clarity.
Let's do this **design community, I'm looking at you!** Make a GitHub account and start dreamin' in the [issues area!](https://github.com/GoogleChromeLabs/ProjectVisBug/issues) **Help create the tool you need to do your job better.**
## 🤔 **It's not:**
- **A competitor** to design authoring tools like Figma, Sketch, XD, etc; **it's a complement!**
- Something you would use **to start from scratch**
- A **design system recognizer**, enforcer, enabler, etc.. but it is a **design system leverager!**
- An **interaction** prototyping tool, you need to produce the states for VisBug to design against
## Installation
### Add to your browser
[Chrome Extension](https://chrome.google.com/webstore/detail/cdockenadnadldjbbgcallicgledbeoc)
[Firefox Add-on](https://addons.mozilla.org/en-US/firefox/addon/visbug/)
[Safari Extension](https://apps.apple.com/app/id1538509686)
[Edge Extension](https://microsoftedge.microsoft.com/addons/detail/visbug/kdmdoinnkaeognnpegpkepdnggeaodkn)
### Getting Started
[Check the Wiki](https://github.com/GoogleChromeLabs/ProjectVisBug/wiki)
[Master List of Keyboard Commands](https://github.com/GoogleChromeLabs/ProjectVisBug/wiki/Keyboard-Master-List)
[Open Feature Requests](https://github.com/GoogleChromeLabs/ProjectVisBug/issues?q=is%3Aopen+is%3Aissue+label%3A%22%E2%9A%A1%EF%B8%8F+feature%22)
[Chat on Gitter](https://gitter.im/VisBug)
[Chat on Spectrum](https://spectrum.chat/visbug)
[Load VisBug from a CDN](https://codepen.io/argyleink/pen/rNrQrpO)
### Web Component (coming soon 💀🤘)
```sh
npm i visbug
```
## Contribute
First off, thanks for taking the time to contribute!
Now, take a moment to be sure your contributions make sense to everyone else.
Questions or need help building a feature, come [chat on Gitter](https://gitter.im/VisBug) or [Spectrum](https://spectrum.chat/visbug)!
### Reporting Issues
Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).
If it hasn't, just open a [new clear and descriptive issue](../../issues/new).
### Submitting pull requests
- Fork it!
- Clone your fork: `git clone https://github.com//ProjectVisBug`
- Navigate to the newly cloned directory: `cd ProjectVisBug`
- Create a new branch for the new feature: `git checkout -b my-new-feature`
- Install the packages for development: `npm i`
- Make your changes
- Commit your changes: `git commit -am 'Added some feature'`
- Push the branch: `git push origin my-new-feature`
- Submit a pull request with full remarks documenting your changes through the GitHub UI
## License
[Apache2 License](LICENSE) © [Adam Argyle](https://argyleink.com)