1.2 VisBug Overview

Hey, I'm Kezz Bracey for Tuts+. Welcome to VisBug Quick Start. In this first lesson, we're just gonna get up and running with installing the extension and we're gonna have a quick rundown on what it actually does. So first of all, you're gonna need to head to the Chrome web store, there's a link in the notes below this video where you can install the plugin. It will work with Chromium or Chrome, it will probably work with as well, anything that you can install a Chrome plugin into. At the moment, it doesn't work with Firefox but reportedly, a Firefox version is on the way too. So go ahead and install the extension and we'll take a quick look at what it does. Once you have the extension installed, you'll see this little icon appear in your toolbar. You can open up this bug either by clicking this button and that will give you this toolbar that you see on the left here or, if you hit Alt, Shift D, then it'll open up for you as well. When you have this tool bar showing up on the left side, this bar is active and you can then use it for all kinds of different visual modifications to a site. You can inspect any element in the site and see all kinds of different information about it. You can move elements around. You can delete them. You can cut, copy and paste them. You can change any text element, so you can change text content. You can also change your text styling. You can change any color that you find anywhere on the site, background colors, border colors, foreground colors, text colors, everything. You can change spacing, so that also includes typography spacing. You can change the spacing in between letters, you can change line heights. You can also change element margins and padding, and you can change any image or background image. You can't add in a new image but you can replace an image that's already in a page. So, to summarize what this plugin does, it gives you a lot of the power that you have in Dev Tools but makes it much, much easier and quicker to access. Everything can be driven by hotkeys, so instead of needing to go into an item in Dev Tools and manually select the correct portion of code that you need to edit to add in a specific margin change, for example. You can just select an element, hit the hotkey to activate the margin tool, and then hit another hotkey to change up the margins. So when you get comfortable with this tool, you're gonna be able to blast your way around any site, quickly trying and testing different changes to your design and figuring out what works really quickly. So as I said in the introduction this can be really useful in lots of different scenarios. If you're a designer, this gives you a way to get into a prototype design and make changes to it without actually needing to dig into the code at all. So that can really help you with communicating with the coders on a project. If you are a coder on a project, then this gives you probably the quickest way that we've had yet to be able to make little changes to a design, to figure out why something isn't working out properly for your layout, or to slightly tweak numbers and find the exact right spot for things. And then, also, if you're not really a designer or a coder at this point in time, you can still use this tool as a visual way to point and click modify a template, make the kind of changes that you would like a developer to do for you. And then be able to take those changes that you've done in VisBug, show them to a developer, and have a much better means of communicating to them what you would actually like them to do for you. So in the upcoming lessons we're gonna go over five key areas that VisBug helps you to work inside of. We'll be covering inspecting and selecting elements, modifying color, modifying type, modifying layout, and modifying images. And then we're gonna look at how you can actually save the work that you've done with VisBug. Right now VisBug doesn't have a built-in way to save out the changes that you've made. They are working on ways of doing that but in the meantime there are a few different ways you can handle that process itself. All right so now that you have a fair idea of what VisBug does, you have it all installed and ready to go let's jump in to how you use it. So in the next lesson, we're gonna be looking at inspecting and selecting elements. I'll see you there.