Awesome
<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://travis-ci.org/GoogleChromeLabs/ProjectVisBug"><img src="https://travis-ci.org/GoogleChromeLabs/ProjectVisBug.svg?branch=master" alt="travis build status"></a> <a href="https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en"><img src="https://badgen.net/chrome-web-store/users/cdockenadnadldjbbgcallicgledbeoc"></a> <a href="https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en"><img src="https://badgen.net/chrome-web-store/stars/cdockenadnadldjbbgcallicgledbeoc"></a> </p>「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
<br> <br> <br> <h3 style="font-weight:300; max-width: 40ch;"><b>Give power</b> to designers & content creators power within the web project they have today, <b>by bringing design tool interactions</b> to the browser.</h3> <br> <br> <br>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
Safari Extension
Edge Extension
Getting Started
Check the Wiki
Master List of Keyboard Commands
Open Feature Requests
Chat on Gitter
Chat on Spectrum
Load VisBug from a CDN
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