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
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
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
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
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:
VisBug v0.2.21 released today 🎉
— Adam Argyle (@argyleink) December 17, 2019
- minor bug fixes
- minor UI nits
- simpler CSS and A11y tooltip pinning (just click!)
- new z-index plugin (thx @addyosmani 💀🤘)
- reduced motion aware
- moar tests
shown in video
- clicking to pin styles/a11y
- new z-index plugin pic.twitter.com/7I9nZ35SUK
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.
No comments:
Post a Comment