Google's VisBug extension for Chrome is a web design tool for everyone

Google’s VisBug extension for Chrome is a web design tool for everyone

Google Chrome Labs created the best browser extension for web design that I've ever seen. It makes some of the most practical and useful features of Chrome Developer Tools easily accessible to everyone.

The VisBug web design extension for Chrome was created by Google Chrome Labs and Adam Argyle, and is open source.

Transcript of VisBug Video

So Google just had their Google Chrome Developer Conference, and they announced a lot of really interesting projects, but there’s one project, in particular, that seems to have just kind of flown under the radar, and I haven’t seen a lot of coverage for this. But it’s probably the most interesting and useful tool they announced that anybody can use right now, and it’s free. And it works in Chrome, and it is something that both web developers can use and it’s also something that even web designers or even people who don’t know how to do any of that stuff, can actually take advantage of this tool.

And let’s say that you’re somebody who is trying to communicate, even to your designer or to your developer, a change that you want to have made to your site. This is something that will help you do that. So it’s called VisBug, and it’s one of the coolest extensions I’ve ever seen for the Chrome browser. So let’s take a look at it.

All you have to do is click on the extension once you’ve installed it, and you have this little toolbar, and this toolbar contains the neatest little options so that you can make changes to the site. And so I’m going to go through a handful of them, some of my favorites that I think will be the most useful for most people.

And the first one is the Inspect tool, and what I like about the Inspect tool is a lot of times it’s really hard for somebody to see the different classes that are being applied to a particular object. And so it’s a lot of kind of back and forth, trying to hunt down the class or the ID in CSS that is causing the style, and this just makes it really, really easy. A lot easier to me than having to go into Chrome Developer Tools. Instead, you can just be on the page, and you can hover over the object, and it will show you exactly the styling that’s being applied, and what the reference is.

The next one is Margin. It’s Margin and Padding. They have basically a tool for each one. But with Margin, it’s really nice because if you’ve ever been looking at your site, and you were wondering, “Hm, I wonder if this object would look better if it were, say, further away.” Then you just do that. You just select it, and you make it further away. Or you can make it closer. I just think that is incredible.

It’s just so easy, and what’s nice about all of this is everything we’re doing is temporary. It’s non-destructive. It’s essentially a tool to make any webpage a playground. And then once you kind of get things where you want them, then you can share that, again, with your designer, your developer, whoever is working on your site. And of course, if you’re a designer or a developer yourself, you can use this tool to kind of test things out and see what it might look like.

So there is this tool called the Position tool, which I love because again, if you’ve always wondered, “Hm, I wonder what it would look like if I put this object in a different place,” then you can just select it and you can move it around. This is, I mean it’s like magic. What’s going on here? Totally magical. I don’t know what is going on, or how they did this, but I love it.

And so I could maybe say, “I wonder what it would look like if I put the tag right up under here, right after the sentence.” Then you could see that. I mean this is way too cool. We don’t deserve this, but we have it and it’s free. So thank you Google for making this possible. I love this.

I can also say that like there’s one thing I always have wanted to be able to do, and that is to play around with some of the copy on the page. And so sometimes I’ll have sort of a permanent header, and I’ve kind of wanted to know what that would look like, and I have to go back and forth, back and forth. And now you don’t have to do that because they have this Edit Text Tool. So I can go up here and I can change whatever text I want. Look at this. So insights on digital marketing, and I want to make it one line. Look at that. It’s beautiful.