Visbug-lib NPM

「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

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.

🤔 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
Firefox Add-on (coming soon!)

Getting Started

Check the Wiki
Master List of Keyboard Commands
Open Feature Requests
Chat on Gitter
Chat on Spectrum

Web Component (coming soon 💀🤘)

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!

Reporting Issues

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.

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