In this final section, we're going to talk about debugging and deploying our JavaScript code. First, we will deal with the console and how we can use the console to help with debugging our code. Now, we've been using the console quite a bit already. But there are some additional things we can look at. Now the console is a part of the browser. So technically, each browser will have its own console API.

And therefore, the console could be different. However, the things we will be looking at are pretty consistent across browsers. But if you wanted to find out what the console API is for a particular browser, for example, this webpage right here reflects the console for Chrome You can simply google console API, Chrome console API, Safari console API Firefox, and you can find some resources that will give you information about the console. We will not be talking about every single command that's available. But we'll be looking at ones that I think are helpful. So let me review those first and then we will take a look at an actual debugging exercise.

So first off, we have console dot log that we've used multiple times. Now, most the time so far, when we've used console dot log, we've just passed in one parameter, a string or something like that. Well, separating parameters with commas allow you to pass in as many as you want. We'll take a look at that when we do the example. There are other ways to enter log messages in the console. info in Warren, for example, and it just formats it in a slightly different way.

Console dot air causes your console message to display as an error. And there can be some advantages to that, you can see what's called the call stack, which is basically the progression of functions that have been called before it hits this error. Console dot count, you can only pass in a single parameter, but it displays each time this is called on a separate line, and it gives it a number. So it's a great way to find out how many times a certain piece of code is executed. We've also looked at console dot Dir. In the past, that's been great.

If you have a node that you want to display the contents of you can display it with a dir And you're able to look at its contents easier. Finally, we have console time and console that time. And basically, this is used if you want to find out how long it takes for a particular piece of code to execute. So we'll take a look at that in just a minute as well. Now, I'm going to use our event reporter for just demoing some debugging tasks. Now I've added some errors within the event room Porter.

These errors are common. These are ones I encounter frequently myself when I'm doing JavaScript. In fact, one of the errors that I put into the event reporter was one I actually had when I was first writing it. The goal of this is just to show you the process. We can go through and using the console to debug our JavaScript code. If you write enough JavaScript, even if you write a very little bit of JavaScript, you're going to encounter bugs.

It's just the nature of writing code. And so you need to have a way to debug that code. Now for our event reporter, let me go ahead and refresh that. And I can see nothing is working, it's not working the way it's supposed to. So the first thing that I usually do when things are not working is I take a look at the console to see if there are any error messages. So let me open up the console for that purpose.

Sure enough, I have an error message. It says syntax error. We have a missing right prin. Now it's telling me what it thinks the error is or where it ran into a problem with continuing execution. That is not always the air, but it does give me a place to begin looking for the air Now one thing I can do is I can come over here to the line number. And it tells me where the area is what JavaScript file there is in, and also the line number, but I can click on that, and it will open it up.

It goes to this sources tab and opens up that JavaScript file and places me on the line where the error has occurred. Now that can be helpful. If I have very long files, however, I generally prefer to go to the actual JavaScript file and just refer to the line number. So I have an editor that displays the line number. I have the line numbers being displayed, and I can go that line number and see what the problem is. So it's telling me something about a parentheses right here.

But it looks like my parentheses are okay. So the error must be happening somewhere else. And so if I look through that, I can see that right here, I'm missing a concatenation operator. And so that's probably what is causing that error. So I correct that, save it. Go ahead and execute it again.

Oh, I've got the load event registered, but nothing else seems to be working. So that gives me a clue. It got as far as the load event, but it didn't get any farther. I can open up the console again and see if there's another error. I'm sure enough, there's another error. This one gives me a little more information.

It says add listener is not defined. Now also, I can open up an error message, and I can see what's called the call stack. This is the order of functions that were called before the air was received. So it did The init function, then it did toggle event listeners and an error occurred. So there's a good chance that error might be in toggle event listeners. And I also have the line number as a key as well.

So let me jump out to my code. Going down to toggle event listeners is telling me 69, specifically 69 add listeners is not defined. Well. If I look back up here, ah, the reason it's not defined is because I have an S. I misspelled function name. So I'll go ahead and save that. Jump back out.

Okay, things seem to be working if I check the console There's no errors there. Now let me do some testing of the additional functionality. Let's try to remove the event listener, I'm going to type it Ctrl S. That did not work. Let me check the console. And there's no error either. And so these can be the more difficult bugs to troubleshoot if something is not working, but you're not getting an error.

And this is where you can use the console commands to help you find that problem. I know I'm trying to remove event listeners. So the problem could be in several places. It could be that the key handler is not calling things correctly. It could be the Remove event listener is not being called at all, or there could be something with, that's a problem within remove event listener. So, to figure out what's going on, I'm going to add a console statement.

Right inside remove event listener so I can see if it's called. I'm going to do a string something like called. Now with this console dot log, I'm going to put a comma, I want to display some additional things with this particular event. First off, if the console dot log statement shows up, I can see that it's called but if I can see it is called I also want to check to see my listeners to see if it has the information it needs to be able to remove the listener so I'm going to display listening as well. And then I think I'll display listeners dot length to just quickly tell me how long it is how many arguments that have or how many items within the array. So this console dot log statement will help me do some debugging.

So I'm gonna go ahead and save, refresh. Type Ctrl S and open up my console. Alright, so here's my console dot log statement. First, it tells me the string so I know it was called. Then the second item I had passed in was the array, the listeners array. And also the third item was the length.

So I'm seeing all those items. I can see that six I should have six so that looks correct. I can then take a look at the array to see what items gotten in there. So there is no event a function event function event function. So it doesn't tip me off right away. Now, by the way, this was the bug that I had when I was first creating this.

And so I was trying to decipher Why am I remove event listeners wasn't working. So another thing I can do is I can come out and I can change this to warn, I mean, not warn, I'm sorry, change it to air, I could change it to warn as well. But I want to use console dot air. I'm going to save this. Refresh again, do Ctrl S, open the console. Now, something that I get with console dot air, like I said, I get the call stack.

So I can see. key down handler was called then toggle eventlistener was called and then remove event listener. So that is the order of functions that should be called. And so that looks correct. And so when everything looks like it's being passed in cracked. At that point, I figured, well, there must be something wrong here.

And so I start doing some more thinking about this, I probably looked up remove event listener. And that's where I determined the problem was when I looked up, remove event listener to remind myself how that particular method works. Now what I discovered when I was looking at console dot log is I had the event first, then the function event function event function. So I was then popping off One of those off the array, and then another one. So then I thought, well, I may not have those in the correct order. So a way to find that out would be quick console dot log, listeners dot pop.

Ups whoops, and see what I got. This obviously will mess up my code. Because as soon as it pops it off, it's not going to be in the array anymore to be used down here, but it will allow me to see what the first one is that's popped off. So I save that refresh Ctrl S and open the console. So it looks like the first thing popped off is an is a function. And that quickly tells me Oh, I've got things backwards, the event should be the first thing, the function should be the second thing.

So now I know how to correct the problem. So I removed my console statements and then up where I'm adding the data to the listener array, I just need to switch them around. There's three places where I do this. So I need to make that change in three different places. And then for the last one Oh, I missed one right here. Now I save it.

Refresh it. Ctrl S. And now it's working. So a little bit of the process of how we can go through debugging. Now, let me just quickly show you some of the other console statements. For example, what if I did a console count inside my mouse move handler that would show me how many times that's called obviously with this if statement, I'm restricting how many times it prints out. But I could see how many times it's called using console count.

Save it. Refresh. Now Smoove. Looks like I've recorded six in the event reporter. If I open the console, I have a ton of them 188. That's how many times it's coming across, but I restrict how many times it actually prints out.

Okay. One more A console statement to show you is time and time. And that can be used to determine how long something takes. So let's put a console dot time statement up here at the top of this JavaScript file. And the label I'm going to use is report. That's basically all you pass in with console dot time is simply a label.

And then, when you want it to print out how long the process has taken, you put console dot time in with the same label. So I want to see how long it takes from when the JavaScript page is loaded and tell the init function is called. And then the entire init function executes. So I'm going to console dot time end and the same label reporter. Let's see how long That takes, save it. Refresh.

Let's open up the console. I still have the mouse move console count statements showing up. But I can see that it took 65.295 milliseconds from when the JavaScript file loaded until the load event fired off the init and the entire init function executed. So that can be helpful in determining how long certain code takes to execute as well. So those are a couple additional statements available in the console that you can use for debugging purposes. Let's move on to the next topic and look at the debugger.