Technical Documentation: GoogleChromeLabs/ProjectVisBug
ℹ️ Provenance: Hybrid Fusion:
GoogleChromeLabs/ProjectVisBug(README + 1 In-Tree Chapters) · CodeWiki Reference · Recency: Active (< 180 days)
1. Project Overview & Quickstart (GoogleChromeLabs/ProjectVisBug)
2. In-Tree Documentation Chapters (GoogleChromeLabs/ProjectVisBug)
「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
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 visbugContribute
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
--- METRICS ---
- Files Extracted: 2
- Estimated Token Budget: ~1073 tokens
- Recency Window: Active (< 180 days)
- Canonical Reference: https://codewiki.google/github.com/GoogleChromeLabs/ProjectVisBug