Developer tools

- [Instructor] One of the best ways to help you debug your bug code and inspect the DOM is by using this built-in tool called the web developer tools that comes with most modern web browsers. It's a very handy tool and all web developers use it, and they love it, and I love it, too. We will be using this tool quite extensively throughout this course to inspect the DOM. So it's important that you are familiar with using it. In this video, I'm going to start off with the practice.html file that comes with the exercise files. It's found in the chapter one video 01_01 start folder, like I have it here. And so if you want to load this up to your favorite browser, and I'm using brackets, so I'm going to click this lightning bolt icon in the top right, and that's going to load my default browser. I'm using Google Chrome, so if you're not using Chrome, this may look different in your browser. The developer tools can be switched on any time you wish to inspect DOM, or off when you're done inspecting it. The quickest way to turn on the developer tool is by pressing the function key F12 on your keyboard, and this should be the same across all browsers and all systems, and that will load the tool window, like you see here. And if you press it again, it should turn it back off. The second way is by right clicking anywhere in the main window, and then select the Inspect menu option, and that will also load the tool on the window, like you see here. To turn it off, just click the X icon here, and that should close the developer tool. A third option is, if you're using a PC, then you can use the shortcut keys by pressing the Control + Shift + I, or if you're on a Mac, you can press Command + Option + I, and that should also load the web developer tool, like you see here. If you press it again, it's going to close the tool window. So now, what you see is the main window on the left, and then, on the right side is where your tool window is docked. Also notice that there are two internal windows on the right side, and we'll talk about that in a little bit. If this is the first time you are using this tool, then it's probably docked on the right side, like you see here. If you've used it before, then usually it would open up in the same position where you left off the last time. And even if it doesn't open the way you want it, you can always customize it, and we'll do that right now. So if you look at the top window and there's a menu bar, this menu bar to the far right, you see the Chrome menu button. If you click on that button, you should see another drop down menu, and then the first item there you see is the Dock side, which gives you three icons to give you three different ways of how you can dock this window. The first option is this icon here, where you have two tiny window or tiny rectangles that overlap each other. This will undock the developer tool in a separate window, and it will float on its own. So if you click on it, like I do now, you'll see that it floats on its own window. And this is very useful if you are using multiple screens or especially if you're using two monitors, and you can have this tool on its own monitor where you have your main window on the separate monitor. So that's ideal. But for a single screen like I'm having right now, it's not really useful. Now, the second option is, if you click on the Chrome menu button, and click on the second icon, that one that says Dock to bottom, and that should dock the developer tool windows back to your main window, like you see here at the bottom. The third option is, if you click that Google Chrome menu button again, and that should dock it to the right side like we have it earlier on. So these are the three different ways how you can customize this web developer tool. Notice also that if you go back to the Chrome menu icon, you'll see that one of them is highlighted in blue, just to show you that that's the current position where you have this docked. Another thing that you should also be familiar with is, is that this window is actually responsive to the size of your main window, or the internal window, in this case, depending on how you have it docked. So in this situation, if I resize the internal window, you'll see that I actually move the elements window to the left, and then if I resize it back, you'll see that it moves it back to the top. So I'm going to have mine docked to the bottom of the screen, and you can have it anywhere you like. I'm going to go up here to the Chrome menu button, click the middle icon, and have it docked to the bottom. Now, if I were to restore this window and then resize it, you'll see that it's also responsive to the screen width. It's kind of hidden here, let me resize it so you can see a little bit better. So I just want to show you that this is responsive to the width of your screen. Okay, you want to resize it to a different size, and again, both of these internal windows are resizable, so you can resize it any way you like to your preference. So let's set up our developer tools window. We will be using just three main windows, mainly the elements, styles, and console windows. The elements and style windows are already nicely positioned, as you can see here. The left window here is the elements window. The one on the right is the styles window. And we want those there. We want to also load another window, the console window, which is the one that will be providing the space for us to type our code in there, but as you will notice, if I click on the console menu, it hides the other two windows. And we don't want that. We want to be able to see all three at the same time. So I'm going to click the elements window back again, and from here, if you want to press the Escape key on your keyboard, and that should load the console window in its own separate window in the bottom of this screen. And this is, will be one, so you can resize this to any position you like to give you enough room to type your code at the bottom. And so, down here, it's just where we type in our code, you'll be typing JavaScript and jQuery codes in here to actually change the content or manipulate it down from here. So I just want to go over a few things about each of these windows here. So the first window at the top is the elements window, and this is where you will be viewing the actual, the source code, or actually the DOM, of this main file. The top window, as you can see, is the actual file, the output of your HTML file. The elements contains the source code, like I just said. It also shows the DOM tree. We'll explore that a little bit later. And the right side is the styles window, and this is where you will see all these style rules applied to a particular tag that you select on the elements window. And on the bottom is, again, is where you type the code. Now that we have the developer tools window set up, let's go ahead and inspect the DOM.