FREELessons: 9Length: 48 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Inspecting and Selecting

VisBug has two excellent inspection tools that allow you to quickly look into the regular properties of any given element or check out the information relevant to ensuring accessibility. It also provides multiple ways to select items and to move around the page, selecting different elements via keyboard shortcuts.

We’ll look at all these inspection and selection tools in this lesson.

2.1 Inspecting and Selecting

Hey, welcome to VisBug Quick Start. In this lesson, we're gonna be looking at how you can use VisBug to inspect all of the elements in your site. See all kinds of different information about those elements and also to select elements, there's all different kinds of ways that you can select and move your selection around the site, using keyboard shortcuts. I've made a collection of little HTML pages for each one of these videos so that you can go along with me and try out all of the things that I'm showing you. So this one is the Inspecting and Selecting.html file, you'll find this in with the bundle of files that you received with your access to this course. So just a reminder to open up VisBug just hit the little icon here or the keyboard shortcut is Alt Shift D. The first tool that we're gonna be looking at is the inspection tool. To activate the inspection tool you can either click on the tool here, which is just the second one, or you can hit the short cut key. When you hover over any of these tools in the VisBug toolbar you'll see a hint that shows you what the keyboard shortcut is to activate that tool. So in this case, for inspect we hit i, and you'll see that it's activated that tool, it's gone pink in the toolbar. And now, when we move around the screen, wherever we are, it's gonna show the element that's underneath the mouse pointer and it's gonna give us a bunch of information about that element. So for example, if we look at this heading, it shows us that it's an H1 element. It gives us a bunch of the CSS that's related to this element and it also shows us some dimensions. So this will give you all kinds of different information about any element that you hover over. It'll give you margins and padding, it'll give you colors, font styling information basically most of the things that you are typically looking for when you select an element and you inspect it in DevTools. So this is gonna save a lot of time with inspecting elements, when you're just needing to see what a color code is that's being used, or you're needing to see the size of an element for example. Instead of digging through the style tab in DevTools you can just turn on this extension and just hover. And you'll notice by the way that this is showing us information about the field and straight properties of this SPG, so I can see into all kinds of different objects not just sort of typical html. Now sometimes you're going to want to copy and paste the information that you see in these little tips which are actually called Meta tips with VisBug. So for example, you might be using VisBug to modify this color and when you get it looking the way you want you're gonna want to copy that color code and put it back into your original document. By default when you move the mouse away you're gonna lose that Meta tip, so what you can do when you have the Meta tip up that you are wanting to copy from, just hold down Alt and click, and then it's gonna pin that middle tip for you. And from there, you can easily copy whole lines of CSS or just copy the particular pieces of code that you're looking for. So that is gonna be a massive time saver eliminating a lot of the things that you would typically want to use DevTools to inspect in a standard for the HTML and CSS site. And that's not the only form of inspection that you can do with VisBug, you can also inspect accessibility information. So the accessibility tool is this one here and you can bring it up with the short key x. Now when I hover elements, instead of it just giving me dimensions and element names and colors and what have you, it's telling me about the properties that are relevant to accessibility. So for example, if we go up here and inspect this element up here, we can see that this is a header element which has the correct role applied to it. It has Role Banner, which is an array role. It's giving us a score on our color contrast between the text in this box and the background color and you can see that it's giving us two green tics here showing us that color contrast is all good. We can see the same thing down here, it's showing us the array role and you can also use it to check things like tab index. You can see there that this field here is showing us tab index 1, this field is showing us tab index 2, so you can use this to quickly go through, scan every element in a site and make sure that those really key aspects of accessibility are sorted out. You can make sure your array roles are all correct, you can make sure that semantic elements are set up the way that you want them to be, that tab indexes are correct and that you have sufficient color contrast. All right, so these are the two inspecting tools, now, we're gonna have a look at how you select elements in VisBug, and this pretty foundational for using all the rest of the tools. You have to be able to select the elements that you wanna change in order to be able to then use the other modification tools like color changes for example. So for this I'm just gonna switch to, the inspection tool. Now the obvious way to select something is just to point and click, you can point and click any elements but you probably don't need me to tell you that. That's fairly obvious, but what you can also do with the selection, it's gonna show you the element here. Now if I click on this element name up here, it's gonna select all other h1 elements in the page and from there, I'm going to be able to make changes to those elements. We'll go into how changes are made a little bit more later, I'm gonna be able to make changes to all of them at once. Now this is actually probably a good time to mention that, at the moment, there is no undo function in VisBug. But, what you can do when you have something in there that you don't like is you can remove the styling modifications that VisBug has added in and you do that by hitting Alt, Delete and then everything goes back to normal. As well as selecting matching elements you can also select matching classes, so if I click this panel class here, then it's gonna select all the elements that are using that class named panel. So obviously, that's a great way to make tweets relevant to specific classes. You can also expand and move your selections around using keyboard shortcuts, so for example, I've just selected this first box here, in this collection of Child and Sibling elements. Now, if I wanna select a Sibling element, I just need to press Tab and that's gonna go over to the next element, Tab again to go all the way over to the end. If I wanna go back in the other direction, then I just hit Shift Tab. Now if I wanna go down, and select a child element, I just hit Enter, and then in here, I can move my selection in between these nested children, which are siblings of each other. Now if I wanna go up again to the parent element, then I press Shift Enter. So by using these four keyboard shortcuts, Tab, Shift Tab, Enter, Shift Enter, I can select any one of these items just by keyboard shortcutting my way around these elements. So this can be really useful when you have a bunch of elements that are not very easy to select individually. So you might have say for example three divs all nested inside each other with no spacing and might be the exact same size as one another. So when we use the mouse to select one of those divs, it's gonna select the lowest child. From there you're gonna be able to hit Shift Enter to keep going up and up and up until you get to the parent div that you're actually trying to select. You can also expand an existing selection, so if I select this one div here, I can then Control E or Command E for expand and it's gonna keep selecting all of these adjacent divs. Or, I'll just reselect this original box, if I hit Ctrl Shift e then it's just completed that entire expansion that I just did one element at a time. So it's picked every element to either a sibling of the original element, a child of the original element, or a child of one of those siblings. So though these keyboards show a cut, you can see how it can become pretty fluid and smooth to navigate your way around the site. And one of the really cool things that you can do with these selections is you can actually cut and paste elements from one place into another in your site. So for example, if I grab this element here, I can cut it that removes it, then I can select another element and I can paste it and it puts inside that element as a child. So I'll cut this one, I'll select the parent element, I'll paste and now let's put that in a different position. So you can see how quickly you're gonna be able to make pretty significant changes. To your layout. You can also duplicate items with Ctrl D, as many times as you like. So even though we are only still on the first lesson of looking at VisBug you can probably already see the kind of power that this tool is offering. You've got the ability to see pertinent information about elements for their styling and for their accessibility, virtually instantly. You've got the ability to quickly navigate around a page using your keyboard. There's a bunch of different ways that you can select items and select multiple matching items, expand your selections and so on. And then with those selections you've got all of these copying, cutting, pasting, duplicating tools that are gonna let you make pretty significant changes very quickly. And all of this only becomes more powerful when you also start to pair it with all of the other modification tools that VisBug gives you. One of those is the color modification tools that it has and that is what we're gonna be checking out in the next lesson. I'll see you there.

Back to the top