VisBug tool

Remember the “free-as-in-freedom tools for designer/dev communication and creation” thread? There’s a new tool called VisBug I think people here would like. It’s a Chrome extension and work is underway for a Firefox addon.

I first heard about VisBug on JS Party 53 which is a great introduction to the philosophy of the tool (but I might also be remembering parts of episode 176 of The Web Platform Podcast). The creator is trying to empower designers. He cares about accessibility. He’s familiar with tools like Sketch but with VisBug he’s encouraging designers to tweak any production site. As with Chrome’s Dev Tools, the changes are ephemeral, but the idea for now is to send a screenshot of your proposed changes.

While I highly recommend the podcasts above, you’ll understand better what VisBug can do by watching this short demo from the 2018 Chrome Dev Summit.

The VisBug 101 blog post can also help you get oriented.

Once you get VisBug installed, you can hover over each tool to see a little animated gif of what you can do. Alternatively, you can browse the directory of gifs in the GitHub repo.

One of the best way to learn to VisBug is to play with the sandbox at https://visbug.page.link/sandbox because the tasks are meant to make designers’ OCD flare up. Numbers are out of order. Contrast is poor. Annoying ads are moving. You get to fix all these things. :slight_smile:

On one of the podcasts he mentions that he thinks it would be interesting for an 8 year old to play with VisBug. I plopped my 9 year old in front of it and she had a blast making tweaks to her school website.

It’s open source: https://github.com/GoogleChromeLabs/ProjectVisBug

There’s an active Gitter channel: https://gitter.im/VisBug/Lobby

Obviously, VisBug not a replacement for tools like Sketch but I’m enjoying it so far.

53%20PM

1 Like