7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. VisBug

Quick Look: What’s New to VisBug in 2020?

Read Time: 2 mins

VisBug is an incredibly useful extension for Chrome and Chromium that allows you to make point-and-click changes to any website right inside the browser.

We’ve previously covered VisBug in our courses VisBug Quick Start. and Customize a Template With VisBug, and since then there have been some new additions to the tool.

Let’s check out what they are and how to access them in this quick look article.

Z-index Visualizer Plugin

Z-index Visualizer PluginZ-index Visualizer PluginZ-index Visualizer Plugin

Instantly display the z-index values of all your elements by clicking the search icon in VisBug and entering the letter z. An autocomplete option reading “/zindex” will pop up below. Click it to activate the plugin and a box will appear around your elements displaying the z-index value at the top.

Contrast When Hovering Over SVG

Contrast When Hovering Over SVGContrast When Hovering Over SVGContrast When Hovering Over SVG

You can now hover over any portion of any SVG image and see what its color contrast value is relative to the surrounding background. First, select the "Accessibility" tool from VisBug, then hover over an SVG. You will see a tooltip appear above your cursor displaying the color contrast value.

Note that the value will display in a color matching the portion of the SVG over which you are hovering, helping you to ensure you are getting the contrast reading for the part of the illustration you intend to measure.

Colorblind Simulation

Colorblind SimulationColorblind SimulationColorblind Simulation

Like the z-index visualization, colorblind simulation is activated by way of a plugin. 

Once again, click the search tool on the VisBug toolbar and begin searching for “color”. You will see an autocomplete option reading “/simulate-colorblind”. Click it to activate the plugin and you will see a box appear in the top right corner listing multiple colorblind simulation options. Select any of those options and you will see the colors of the page transform into a simulation for the specified form of color blindness.

Dark Mode Support

Dark Mode SupportDark Mode SupportDark Mode Support

When your operating system is set to prefer dark mode VisBug will detect this and display its tools in dark mode as well, as pictured above.

Click to Pin CSS and A11y Tooltips

It’s now very easy to pin tooltips displaying information on CSS and accessibility. With either the “Info” or “Accessibility” tool active, as you move around a page tooltips will appear when you hover over various elements. In order to pin that tooltip just click in place.

This is best demonstrated in a GIF, as you’ll see in this tweet from VisBug developer Adam Argyle:

Wrapping Up

If you haven’t already, be sure to check out VisBug. It’s free, open source, and a very useful tool in any web designer’s kit.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.