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

Read MoreVisBug 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.VisBug
VisBug Quick Start
Kezz Bracey
Customize a Template With VisBug
Kezz Bracey
Let’s check out what they are and how to access them in this quick look article.Z-index Visualizer PluginInstantly 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 SVGYou 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 SimulationLike 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 SupportWhen 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 TooltipsIt’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:
VisBug v0.2.21 released today 🎉- minor bug fixes- minor UI nits- simpler CSS and A11y tooltip pinning (just click!)- new z-index plugin (thx @addyosmani 💀🤘)- reduced motion aware- moar testsshown in video- clicking to pin styles/a11y- new z-index plugin pic.twitter.com/7I9nZ35SUK— Adam Argyle (@argyleink) December 17, 2019

Wrapping UpIf 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Hey Twin Tiers! Would you like a...

free website, free email, free SEO, & free EVERYTHING for a full YEAR?!?!?

Click below and be entered to win FREE digital media for a year!

A custom-built website, email addresses, SEO, and so much more… all for free… all for a full year!

Why? … Well, we’re new here and we’d like to get known. But HURRY… this definitely wont last!!!

We swear there is no catch… so what do you have to lose?