Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 25 days ago
JSON representation

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

Lists

README 

        


  visbug

  


  travis build status

  

  




# 「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)