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 s 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 account and start dreamin' in the issues area! Help create the tool you need to do your job better.
- 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
Chrome Extension
Firefox Add-on
Safari Extension
Edge Extension
Check the Wiki
Master List of Keyboard Commands
Open Feature Requests
Chat on Gitter
Chat on Spectrum
Load VisBug from a CDN
npm i visbugFirst 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!
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.
- Fork it!
- Clone your fork:
git clone https://.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 UI