Step through your JavaScript with browser tools

- [Voiceover] Logging information directly to the console is fine for simple debugging of small scripts, but when you start working with more complex scripts that have lots of functions, objects, and other elements, this simply is not good enough. You don't know anything about exactly what sequence of events took place and there's no way of testing the logic of your script and you definitely don't know anything about how the browser is actually traversing your script as it's running. For more advanced troubleshooting, we need more advanced tools and our browser developer tools have those tools built-in.

If you go to the "Sources" tab, you'll find a tool that allows us to step through the code line-by-line to see exactly how the browser handles each command, each statement, and how the logic in our script runs. This tool really warrants its own course and in this movie, I'll just give you the briefest of previews so you understand how it works and you can start working with it. First, select our script file, "Script.js". Here, I'm just going to close navigator panel so that we can see the script in more detail.

Then, I'll reload my document, just so we start fresh. And what I want to do is see exactly how the browser runs my script once I start typing in this box. I already know that when I start typing, the Start function runs, so I'm going to add a breakpoint at line 53. I do that by clicking on the line number. It adds this little blue line, and now, over here, under "Breakpoints". I have a breakpoint at line 53. This breakpoint will, quite literally, stop the browser from running the script at this point.

So, if I go into the box and start typing, you'll see the browser ran through the script until it hit the breakpoint and then, everything stops. "Paused in debugger" From here, I can now see exactly what information the browser deals. So, right now, at line 53, the browser has a variable, "text entered length". It is currently undefined and it's working with the text area. Now I can tell the browser to step through my script line-by-line, as it wants to run it to see exactly what happens to all of these values.

I do that by clicking this down arrow with a dot underneath it. That takes me to the next statement in the sequence the browser wants to run it, which happens to be this conditional statement. Here, we can get all the information we want from each of these pieces. So, here we say, "If text entered length equals zero and not timer running" and if I hover over "text entered length", you see it says "zero". If I hover over "timer running", it says "false", and if I go over here, you can see "local text entered length, zero".

So, this value changed from up here to down here. Click again and because the conditional statement is true, we go into the condition. Here, we grab "timer running" and we will eventually set it to true, but right now it's false. Click one more time. And now, "timer running" is true and we are setting the interval. Currently, it's undefined. Click again. Now interval contains the interval number four that you saw in the previous movie. Click again. We get to the end of the start function.

And now, when I click again, we jump up to "run timer". That's because the interval is now running. Inside "run timer", we start working on this "let current time". Here, we want to populate it with the information from the timer array. And here, you see, the timer array currently has "zero, zero, zero, zero" as its values. You'll also remember that, in our code, we set up the current time to grab the function, "LeadingZero" to add leading zeroes. So, now that we're at the beginning of this line, if I click, we jump up to "LeadingZero".

Here, we sent the information from "Timer", item zero. So, that is now populated in the "time" variable. And here, you actually see the value of the time variable, it says it's zero. That means the "if" statement is true and we go into the "if" statement and notice what happens to this zero when I click the next button. We add another zero to it. Then, we go back into "current time", the next element and do the same thing. Grab "time", which is zero again.

Add another zero to it. And we do the same with the last value. That would be "seconds". Again, it's zero, zero, zero. Then, we go to "timer inner HTML" and set current time, which is now zero, zero, zero, zero, zero. Then, we run "timer plus plus". When I step to the next one, you'll see "timer plus plus" now has value three set to one. And we run through the rest of the function. And now, because this is an interval, we jump back up to the top of "run timer" again.

Do the whole thing again and you'll see the values will change. So now, we'll get to the first seconds near time zero one, and so on, and so on. If I now go back into my browser and click on the "Play" button, I'll resume scripts execution until I click the button again. We hit the same breakpoint. Now, we can skip through the code again and, as you can see, we can now decide exactly where in the code we want to stop, dump information out from that point, and figure out exactly how our code runs.

Now that you see how this tool works in the example of the typing speed test, I encourage you to check out this tool using the other two projects we've been working with. You'll be able to dig through the code and see exactly what is happening, how our logic works, what values are set, how they are reset, pretty much everything else about our script. This is probably the most powerful tools you have when you work with JavaScript 'cause you can see exactly what is going on at any time. Like I said, it's a very advanced tool with a lot of features I have not covered and I urge you to just start experimenting with it to figure out what you can use and see how your own scripts work.