VisBug — Open source browser design tools

Speaking of alternative in-browser DevTools in the previous post: be sure to also check out VisBug, created by Adam

Give power to designers & content creators power within the web project they have today, by bringing design tool interactions to the browser.


Here’s Adam presenting it at Chrome Dev Summit 2018:

You can try it out yourself in the playground. Hover over the menu items to get hints about what they are and which shortcuts you can use.


Unlike CSS Scan Pro from the previous post, this is a free browser extension. Available for Chrome, Edge, Safari, and Firefox.

VisBug Source + Extension Links (GitHub) →
VisBug Playground →


💁‍♂️ It looks like that the built-in Chrome DevTools will eventually be getting some of these more design-focussed tools. A first proposal I saw float by was one to integrate a distance / measurement tool:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.