<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
npm install visbug-lib> 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
Check out the list of features me and other's are wishing for. 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! Help create the tool you need to do your job better.
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 or Spectrum!
$3
Found a problem? Want a new feature? First of all see if your issue or idea has already been reported.
If it hasn't, just open a new clear and descriptive issue.
$3
- Fork it!
- Clone your fork:
git clone https://github.com/
- 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`