Today, we're going to look at how I use developer tools to debug my code. Now, everybody uses a different browser, or a different version of browsers and each browser has their own unique developer tools. So while you and I might both be using Chrome, I might be using one thing, you might be using something else. And then someone using Firefox will be using something completely different. However, there are a lot of similarities. So let's go ahead and just go through an example of using Chrome with Inspect Element. I'm just going to go ahead and use some of the example code I've been using throughout this capstone. The difference is I'm going to take out that Google Calendar just to make it a little bit easier for us to work with. So in order to use Inspect Element, I have two options. One is that I can simply right-click and do Inspect. Now, I just learned a handy little tool the other day, that if you're using a mouse that doesn't have a right-click button, you can hold down the control and that way you can kind of simulate that you have a right button. So one option is with that mouse. The other option is for me to go up to the top, go to View, Developer. And they'll be some Developer Tools. And when you click on that, you're going to get the same type of tool. One of the things that my students often do is at the end of the semester, they say, it was so hard trying to use this because it always makes the screen tiny and skinny. And since we're responsive web designers, your page looks different when it's skinny and when it's wide. So right away, let me show how you can actually pop out this Inspect Element tool so it's underneath or next to the page that you're trying to do. I'm going to bring my mouse. And then I bring it over to the top corner, where there's three little dots. When I do that, I now have three options. I can have it Undock to a separate window, Dock to the bottom, so everything will kind of slide down, or what I have right now, which is Dock to the right. I really like clicking it out so it's its own separate window. Now, I can kind of click on here and highlight things but still have a nice wide screen for my actually viewing the page itself. Okay, so as I do this, I had said at the beginning, my page looks good. Actually, it doesn't. If you notice my sticky footer isn't working. I kind of have it all the way down. It's at the top when it should be all the way down at the bottom. The reason for this is because if you might remember, my validator earlier said I had an unclosed div. Let's see if we can't figure out where this is going on. When I go over here, I'm going to highlight the body section. I'm going to click on here, and I'm going to click on the container. Now if you remember, my container I had said should take up everything from the top all the way down to my footer, and you can see that's not the case, it's not highlighting everything. So I'm going to go back over here to my code, come on up here and say, yeah, why did I close that there, that doesn't make any sense. Save it. Refresh it. And we can see that hopefully, I'm getting a little bit closer. Each step is just a little bit closer to figuring out what's going on. The other thing I would like to do, whenever I have my Inspect Element open, is I check the console to make sure there's no errors, that I didn't do something wrong with JavaScript. And right now, we look good. But if I go back over here and I try actually clicking on my button, the one that's supposed to add more content, you can see right away that I get this little red error that's there and it kind of tells me, you're trying to change things that don't exist. Now, the goal of this lecture right here, isn't to debug this page. That's not what I'm going for. What I'm going for right here is just showing you how to turn on and off these tools, and avoid some of the little annoyances that come along with it, such as being in the same page. So while I'm doing that, I also want to point out that for some people, their debugger flashes up the error message and then it goes away really quickly. And then they reload and it flashes and it goes away. If that's happening to you, try to notice that there's a small button up at the top here that says, Preserve log. What this means, it says, don't get rid of the error messages when you're done. Leave them on the screen until I tell you to make them go away. So I hope that you'll find some developer tool on your browser that you're comfortable using. This is really the best and most important thing about learning how to do coding or web design. None of us are going to get it right on the first try. But you're actually going to feel smart for finding your errors quickly when you use these tools.
