The console can be great for looking at an error message and quickly getting it resolved. Or it can even be used for figuring out why your program is not working. But sometimes it can be a bit tedious. For that, you may need to enter several console statements in your code before you're able to get a full picture of what's going on in your program. Well, in situations like that, a debugger can be very helpful and can save you time. The debugger allows you to get a full picture of your code as it is running.

Now each browser has a different debugger. Or if you're coding JavaScript in another environment, they're usually ID E's that have debuggers. And they may look different, but they all function in a very similar way. So the concepts that I will show you that associated with the Chrome browser debugger should transfer to other debuggers as well. Now, I will be using the same event reporter to illustrate this. So to access the debugger, you open the developer tools.

So on a Mac, that's Command Option I on Windows that's Ctrl Shift I, you could also open the JavaScript console and then click on the sources tab to access the debugger. I'm going to enter Command Option I. And with the sources tab selected, I'm in the debugger. Now there's quite a bit of information here. I think this is much easier to view when this is docked to the bottom of the browser window. So I'm going to do that.

I'm also going to close the navigation panel on the left, just to provide a bit more space To view things. Now, this main window displays the code of whichever JavaScript file I am currently in. And for this page, I have a single JavaScript file app dot j s. And so that's the one I'm displaying. On the right hand side is Windows allows me to view what's going on in the program. I'll talk about those areas in a bit. And also some buttons that helped me with navigation when I'm doing debugging tasks.

Now, to activate the debugger or to begin using the debugger, I need to place what is called a breakpoint. a breakpoint breaks the execution of the code, stops it at that breakpoint and allows me to examine things within the code and also watch what happens as the code continues to execute. breakpoint is a very key term with a debugger. Now I'm going to add a breakpoint to the very top of this init function, I'm going to add one at line three. The way I do that is I come over and simply click at line three. And we can see that now a breakpoint has been established.

Now, take a look what happens when I refresh this page. Notice in the page area, it tells me that it's paused in debugger, and it Gray's out the page, I could click this button to have it resumed the script execution. That same button is available here within the debugger. Now the execution is stopped, and I'm now able to see what's going on within my code. I have some windows over here that are available to me that provide information for example, the color Stack I introduced call stack in the console video. Basically, the call stack is the order functions that have been called at this point only in it has been called.

So there's a single function in here. I also have a scope area, which lists the variables, I can see those variables as they change right now, most of them are undefined. In fact, the only variable in local scope that has been defined is this E object variable which captures the event object, I can open up that variable and see information about that event. Now there are a few buttons over here up here that allow me to move through the code in different ways. For example, the step over next function call that particular button basically steps to the next executable statement. So if I click that, watch what happens, we move to the next line.

Click it again, we move to the next executable line, and also what's happening to the variables. They're starting to be defined. Now this content variable has been defined. And it shows me what it contains. It also shows me the variable definitions over here. In the code view, I step one more time.

Listeners is now been defined as an array, but there is nothing in it. Now I can continue to step through the code by having it go to the next executable statement. And also what it happens when it gets to the areas of the code that define functions. Those are executable statements, but the entire execution is just defining that function. So when I click next, it jumps down to the next one. Then it defines Add listeners and jumps down to the next one.

I click and it moves to the next executable statement, which is toggle event listeners. And finally, we get towards the bottom of the code. Now at the bottom of the code, there are two function calls. One is load info, it's going to call that function and print some information out. The other is toggle event listeners. Now if I wanted to step into these functions and watch the execution from line to line within the function, I would need to click on step into next function call.

If I click step over next function call it will go to the next executable statement, which is the next function call. Now let's go ahead and step into that one. Now toggle event listeners. And notice it jumps up to the code which is a part of the toggle event listeners function is currently sitting on the on the if conditional If listeners enabled, well, we can look inside our scope area. And I can go into the init function, open that up, and I can see what all these variables are equal to. So listeners enable is currently equal to false.

So that should skip this part of the code and jump down to the else statement. So if I click to step to the next executable statement, sure enough, it jumps down to the else statement. Now it's calling an add listeners function, I could step into that, or at this point, I'm going to step out of the current function. So what happens in that case, it will finish executing everything in this function and jump to the next line from where this function was called. So I clicked that, sure enough, I come to the bottom of the init function. We've moved through that hole in it functionality can see the number of things that are defined as far as variables.

At this point, I'm going to tell it to resume script execution. And there are pages ready to to work. Now I've included the same problem with remove event listeners that I had in the console example. So if I type A Ctrl S, their event listeners are not removed. So I need to figure out what is going on with that. Now instead of using multiple console statements, I can do it all within a debugger.

However, my current breakpoint is not where I want the execution of this code to stop. I know the problem is with remove event listeners. So I'm going to add a breakpoint at line 58 where the watch Statement begins within remove event listeners. Now refresh my page, let that load, press A Ctrl S, it stops at the breakpoint. Now I'm able, without doing a lot of console statements to take a look at the state of all my variables that are within this code. For example, I can see the listeners array, and I can see what it contains.

So by placing a breakpoint here, I know that the code is getting to this. But for some reason, the Remove event listener is not working. So I can step begin to step through this and see what's happening. So I step through. I'm on the document dot remove event listeners, there's going to be it's going to pop two items off of the listeners array. And I know that arrays are last In First Out But the thing I'm not sure about as I look at this is going to grab this one and this one first.

If it does, then the Remove event listener should work because remove event listeners takes an event name and then the function for it to work. But if it starts at this and then it will not work. So let me see what happens. I go ahead and step. Sure enough, it took the bottom part and that is the reason it is not working. I have the items being placed on the array in the incorrect order.

Now another way that I could have discovered that is using this watch window up here I can add a variable that I simply want to watch. So I could just have the listeners variable and I can learn Look at it and see its current state. Now when I step and step again, it removes the next two items. And so I can see what order it is doing that. So at this point, I've been able to discover that the problem with remove event listener happens to be the order that I am pushing things on to the array. And so I can go correct that.

I'm going to go ahead and resume script execution. Close the developer tools. Now one more thing I want to show you. Another way to cause the debugger to stop or to create a breakpoint is by entering the debugger in your JavaScript file. I don't particularly prefer this method. I prefer to control everything from the debugger, but this is available if you choose to.

You can enter this, save it Open the debugger. And when I press Ctrl S, it stops at the debugger line within my code. So that's another way to begin working in the debugger. Now, that's an introduction to the debugger, I would encourage you to use it. In situations where console statements don't help you solve the problem immediately, you can get a better picture of what's going on. Because the debugger looks so complex.

A lot of new developers avoid it for that reason, but I would encourage you to get used to it. I left out a lot of additional functionality, which it contains to help simplify it for you concentrate on those things we looked at, and I think you will find the debugger helpful.