Skip to content
FireBug for designers › Makes any webpage feel like an artboard via a little extension https://visbug.page.link/extension
Branch: master
Clone or download
argyleink Merge pull request #331 from GoogleChromeLabs/audit-fixes
updated deps and fixed vulnerabilities
Latest commit b15a112 Apr 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Merge branch 'master' of https://github.com/GoogleChromeLabs/ProjectV… Apr 18, 2019
assets replaces pb namespace with visbug namespace Jan 29, 2019
extension prep for release Apr 18, 2019
tests pass no sandbox arg Apr 19, 2019
.editorconfig will help PRs show less changes, ease dev effort Nov 29, 2018
.firebaserc added firebase hosting Dec 7, 2018
.gcloudignore getting close to ready, deployment looks good Nov 26, 2018
.gitignore moved the tut gifs Nov 9, 2018
.travis.yml updating travis to run custom ci test command Apr 19, 2019
CONTRIBUTE.md
LICENSE init Nov 13, 2018
app.yaml
firebase.json added firebase hosting Dec 7, 2018
package-lock.json updated deps and fixed vulnerabilities Apr 19, 2019
package.json updated deps and fixed vulnerabilities Apr 19, 2019
postcss.config.js update to latest postcss impl Sep 30, 2018
readme.md adding travis build status badge Apr 19, 2019
rollup.config.js refactor, can now load postcss files into custom elements Sep 30, 2018

readme.md

visbug
npm latest version number travis build status npm downloads

「VisBug」

Open source web design debug tools

  • Point, click & tinker
  • Edit or style any page, in any state, like it's an artboard
  • Hover inspect styles, accessibility and alignment
  • Nitpick layouts & content, in the real end environment, at any device size
  • Leverage adobe/sketch skills
  • Edit any text, replace any image (hi there copywriters, ux writers, pms)
  • Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
  • Design while simulating latency, i18n, media queries, platform constraints, CPUs, 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, in a place where they currently feel they have little to none, 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, or anything
  • An interaction prototyping tool



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

You can’t perform that action at this time.