VisBug 101: The Essentials for Manipulating Any Webpage

Get a crash course on this powerful new open-source design tool for web

If you work on the web—in any capacity—VisBug can help you out. Whether you’re in marketing, project management, QA, design, development, OR you’re building with Wordpress, Angular, jQuery, Bootstrap, or another framework, this open-source design tool can help you with the site you’re working on today, right now, without touching any code.

VisWhat? Here’s our short announcement video and demo:

In short: VisBug lets anyone explore design changes on live websites.

Here, I’m going to cover the basics and some essentials of this powerful Chrome tool, as well as a few examples where VisBug drastically decreases workflow churn. I’m also going to explain how VisBug can immediately resolve a number of process cycles that would otherwise take a week or more.

The Basics

• Move, delete, cut, copy, paste, duplicate, group, ungroup ANY ELEMENT(s)
• Change any text
• Change any color
• Change typography
• Change spacing
• Change any image or background image

These basic tools end up being extremely powerful. The amount of use cases they can handle is growing rapidly as I realize their potential.

A few use cases that leverage these features:

• Use production as a sticker sheet
  1. Open up your site in 2 tabs (1 will be your sticker sheet and one your artboard)
  2. In tab #2, launch VisBug, select anything, and hold delete , this will give you a blank page with all the css/js dependencies loaded
  3. In tab #1, select a component, press cmd+c
  4. In tab #2, press cmd+v
  5. Rejoice while brain goes nuts thinking about possibilities
• Fix or test copy (hi copywriters, PMs, UX writers, etc)
  1. Double click the copy you want to change
  2. Start typing or paste text
  3. Realize that cmd+b and cmd+i work as expected
  4. Rejoice because you can vet copy in the end environment, where one can test multiple screensizes, etc
  5. Probably end up using the Typography tool to adjust sizing and spacing of some type as you see the affects of the copy changes
  6. Rejoice again
• Delete ads from pages
  1. Click the ad
  2. Press delete
• Make an article more legible (tailor a site to you in seconds)
  1. Click the paragraph text of the article
  2. Click the p in the pink label above the selected paragraph to expand your selection to all paragraphs, or press cmd+shift+e
  3. Press f for the font tool
  4. Press up on your keyboard to make the font size larger
  5. Lean back to read and sip your coffee
• Try out an ad, hero image, or new product right in production (don’t wait for an engineer)
  1. Click the product image(s) you want to test your new product in (make sure you select the img tag)
  2. drag in your new product image(s)
  3. Repeat until you like the way your image integrates
  4. Optionally, doubleclick and replace product copy
• Client says they don’t like the copy or colors (save weeks!)
  1. doubleclick the text and change it
  2. Vet immediately whether or not the changes work
  3. Same scenario can be applied for placement, colors and spacing. Nip the request in the bud, in the moment, and show why it will or won’t work
• Fix front end bugs
  1. Bug gets logged that at a small mobile device screen there’s an issue with the detail page body copy..
  2. Designer goes to production, emulates the problem screen size, verifies the bug
  3. Launches VisBug and corrects the issue visually
  4. Screenshots their changes and reassigns the bug to an engineer with specifics on what styles to update for that scenario
• Nudge a prototype during usability testing
  1. User finds bug while testing your prototype or production app
  2. UX designer launches VisBug and corrects the issue
  3. Prototype bug can now be ignored by subsequent users
• Create responsive & adaptive SVG
  1. Emulate a different screen size with the devtools
  2. Click the SVG elements you want to reposition due to viewport constraints
  3. Press L for the position tool
  4. Click and drag the SVG to a new location
  5. Screenshot and share to engineer that at this viewport you want these SVG elements in these new locations
• Create a dark theme for any site
  1. Click each element on the page you need to adjust the color for
  2. Press H for the HueShift tool (or you can click 1 of 3 icons that show up underneath the toolbar for text, bg, and border colors)
  3. Add 10% black by pressing shift+down
  4. Add 10% white by pressing shift+up
  5. Rejoice
• Reorder content
  1. Select an element you want to arrange
  2. Press v for the move tool
  3. Press left arrow or right arrow
  4. Vet sort order or content order without an engineer

Here’s all the hotkeys on GitHub, available in the Wiki. There’s A TON of stuff you can do with just the basics. This is a short list. I’ll be shooting videos soon where I’ll be doing tasks like the above articulates, but live and interactive. Stay tuned for more learning by doing 💀🤘

Essentials

Keyboard navigation

You can navigate the whole page with the keyboard. In many cases it’s much better than the mouse. I found I often need to select something, like the ad, then go up a few elements to get the proper container for the ad or other ads. This is easily done in VisBug with shift+enter , which selects the parent element of the one you currently have selected.

It’s all done with tab, shift and enter. Tab navigates between children (side to side), enter goes into or out of a group (down or up). This is even useful to get a feel for the DOM and the structure of the document. This design document (HTML) is required to be a tree, unlike an artboard which can be flat. Keyboard navigation can make that spelunking fun and informative.

Color manipulation

The HueShift tool is my favorite way to adjust colors (videos to come), but you’re not forced into it. When you select an element, the colors for it appear under the toolbar, and you can click those buttons to change colors with your OS system color picker. I recommend getting Skala Color if you’re on OSX, it’s got some nice features that should make you feel right at home.

Inspect styles & Accessibility

No one really misunderstood the 3 inspect tools: guides, styles and a11y. They are essential though, and there are 2 slightly hidden tricks that most don’t realize at first.

Local modifications will show up in the style inspector if you’ve modified the element. This is important because it’s the easiest way to get your work out of VisBug. Make changes, then grab them out of the local modifications section of the style inspector metatip.

Pinning is a feature that let’s you stick a metatip over an element, making it so you don’t have to hover for it to be visible. This goes really nicely with local modifications, since you can pin your work over the element, screenshot it, and send it to an engineer to implement. OR, if you’re a developer, you can pin the metatip, and copy/paste the styles out, just like the devtools. Pin by holding opt and clicking . Unpin with the same gesture.

Summary

Hopefully this helps you understand where VisBug can fit into your tool belt. There’s no harm in learning it—it’s only going to help you get things done faster. As designers and web workers, we’re constantly tinkering with tools and figuring out how they can help us communicate. VisBug is a superb tool to start investing in and considering where to use it.

• You’ll blow away an engineer if you open those tools and modify their work within seconds
• You’ll blow away a client if you make their change request live in the moment and articulate why it sucks
• You’ll blow away a product lead if you show them they can go redesign production and or try out new designs live in their end product
• You’ll blow away your marketing team if you show them how to try out copy and images in production
• You’ll blow away your team if you show them how much your inspecting, understanding and augmenting the work

Ultimately, VisBug will look like magic if you get good at it. Trust me when I say that the oddities of VisBug (like adjusting spacing or moving elements) become very natural very quickly. It’s like learning a musical instrument, and you’ll find that the muscle memory you have from your design tools will really help you become efficient quickly.

Getting good at playing with VisBug could take your career to the next level. You’ll be the most efficient and specific communicator on the team because you’re studying and practicing a tool that works with the end product, HTML. These skills are not wasteful, they’re meaningful and will help you throughout your web career for many man years to come.

The DOM has been democratized, it’s now a playground for all. Go flex your new abilities!

Install the extension in seconds
Follow it on GitHub
See community requested features
Peep the road to v1