visbug-lib/readme.md

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

<p align="center">
  <img src="./assets/visbug.png" width="300" height="300" alt="visbug">
  <br>
  <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a>
  <a href="https://travis-ci.org/GoogleChromeLabs/ProjectVisBug"><img src="https://travis-ci.org/GoogleChromeLabs/ProjectVisBug.svg?branch=master" alt="travis build status"></a>
  <a href="https://www.npmjs.com/package/visbug"><img src="https://img.shields.io/npm/dt/visbug.svg" alt="npm downloads" ></a>
</p>

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

<br>
<br>
<br>

<h3 style="font-weight:300; max-width: 40ch;"><b>Give power</b> to designers & content creators power within the web project they have today, <b>by bringing design tool interactions</b> to the browser.</h3>

<br>
<br>
<br>

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

<br>
<br>
<br>

## Installation

### Add to your browser
[Chrome Extension](https://chrome.google.com/webstore/detail/cdockenadnadldjbbgcallicgledbeoc)  
[Firefox Add-on](#) (coming soon!)

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

### 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/<your-username>/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)