visbug

「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. 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