「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

License

Apache2 License © Adam Argyle