08 - How to use the Chrome Devtools to debug your JavaScript

Transcript

0:00 In this episode we'll demonstrate how to debug the Javascript with the chrome devtools, take a look at the files I've got here, so I've got an Html file and loading in January and my own script, and I have a div on the page with the content of holo. If I run this, We can see that the content changes with Javascript and there is a Javascript error. We look at the script digests file. I've got functions one through function six, and then function one. Cause function to cost function, three, four, etc down the line. Here we've got a little bit of jacory, and then each function has a number of variable, which just contains the number of the funk, sure, and then we start the whole chain by calling one. I'm using the replica website as kind of my online editor here, but I'm going to switch to this page, which has that could actually running case, so free refresh, See that we've got this error here in the console, uncut reference or seven is not defined. And there's another episode that I have an what an uncaught reference areas and explains that in -depth the link to that on the show notes alright, so you've got this error First question probably have is okay. Where is this? You can click over here, but luckily lead you to the line, which is pretty helpful, but you often run into situations where it's not this clear cut where it's more complicated air, so I'm going to show you a few techniques here for how to figure out what the error is and how to resolve it the first thing we could do. As we could set a breakpoint so we know the air is kind of in this area, so why don't we set a breakpoint here Just by clicking on the column here. You can see that as a breakpoint so now if we refresh it pauses execution of the Javascript there to cause one, then two, then three, then four, then five, and then it's pos. Right here. This is very helpful because it helps us analyze what the contents of the variables are at various points of the code. It also allows you to step through, so I'm going to show so those things right now when we're on this line. Number here is undefined. You can see that the local scope. The variable here is undefined. For here we've got a call stack which shows you when one function calls another function calls another function. That's what this stack is, So these function call stack on top of each other, so one cost two costs three costs for costs five selfless. We can step through these, so in function to the number variable is set to to function three. If the member variables set of three most often when debugging a problem like this, it's really a question of where did things go wrong And how is my code different than what I expect it to be? So it really becomes an exercise in trying to see somewhere there's a variable here. That's different than I expect, and so these tools are here. Really help with that during step through all these and say. Okay, What are the variables and we can also go. If we wanted to, We could go to the console here and we have access to that same variable scope to type number here.

2:55 It shows me the content in that function brought to three, then did number again. It would give me free, really really helpful. Then so let's go back to where we are, so what if we want to move forward so right now we can see it's undefined. And if we press this button here, he staff over the next function call, so it basically moves down one line and this button step over next function, call versus step are similar, but slightly different, but I usually just use this one here on the left. And now on the next line so now that blind eighteen is has executed the number variable now holds the string five which we can see here by hovering, and we can also see it printed right here, so that's pretty helpful. So next is going to execute this Jacory function call We can inspect here. We can hover over the dollar sign, and that means that that is defined. Let me demonstrate this next button. Here. We have step into next function call. Sometimes, though want to dive into function call, It's to a different module, are different library. Anyone see what's going on there to let me demonstrate that the refresh so on a dive into this function Call here. That's where the step into next first calls helpful to press the down arrow here and I can click pretty print. Because right now this is minified to safe file space, but it's really not great to read it. So if I click pretty print here, some of the variable names are still really short. Bed. Least it's formatted better to use this to kind of run through the code and see what the various variables are the very states. And it's been editor cost that cure that sometimes this becomes annoying it. If using a lot of libraries like React, and you have your code cong react, and then react, calling your code. You may not want to see the React code, so that case you can right -click on this and click Blackbuck script, which will mark this file as a file. You don't want to see, So it kind of hides it here as a black box item, and if you want to see you, then toggle that, so that's kind of just a nice way. With the hide library specific things, because most of the time you don't really want to step through library code, Because you know, react, for instance is working, Find there's no bugs there, So you just want to get back to your code, essentially to focus on your code and not inspect the library code because there's a ton of it and often that can really add to the call stack because you have your function, calling react, and then react internally is calling twenty thirty function sometimes, so you don't want to have to step through each of those manually, so that's where Black boxing really helps. Okay, so we've got stepped down, which he just demonstrated this one here. Steps One level up, Let me demonstrate that one later, so let's keep going here. Oh, and as it's loading, it's finding a an air and jacory,

5:34 and that can happen sometimes. Just when you're refreshing the page. Often I usually just ignore that. It's usually nothing to be concerned about okay, So I'm here a step here to the next one, but sometimes you a lot of break points like this and you just want to ignore them for a pass. In click this button here, which will deactivate the breakpoints and then everything will load just fine. So it's not passing anywhere. I want to bring those back on a show. This last thing here, which can be pretty helpful. So sometimes you run into situations where you say. Okay. I don't know exactly where my areas. I can't quite pinpoint it, but I want to pause right as the errors happening. That's where this last one here is helpful. Pause on exceptions. Refresh, said I'll pause right here where the errors. And it's even show me what the errors. Seven is not defined, So it's nice Here isn't can now inspect the contents of this function at this exact time. When things are about to go wrong, Does pretty cool.

6:29 I can type number here

6:32 to six, saying that confide seven, so let me see, so I know that six as a function, five as a function as even printing out the contents here. What about seven?

6:47 Up to seven is not a function or variable. Seven doesn't exist. Okay, so in order to fix this bug, where either need to comment out seven, or we need to create a certain function. Let me just create a certain function real quick.

7:04 Maybe we'll just do a console log all done.

7:08 Let's try that

7:12 very fresh, and we still have it set to pause on any exceptions, and it didn't pause and the console now prints all done No more exceptions. Great networked me just demonstrate one more thing before it, and if you know exactly where in the code, the issues happening, you can pause there by using these breakpoints or by using this. Pause on exceptions button,

7:35 but another way you can pause through the code is by typing debugger anywhere in your code.

7:43 If you do that, That is a signal to the devtools. That it should pause at that exact location of a refresh here. If my dental or closed, nothing happens, but if my dev tools are open and a refresh, it'll automatically pause exactly at that spot check and then do everything I did before step over three, two one. Want to step out of the current function like this and it goes up a level. So now we have two items in the call stack. I go up a level. Now there's only one cause it's stepping outside of the current function, going up one level,

8:15 fantastic, In summary, some more things you can do with devtools, like setting breakpoints an Ajax calls, or with a Dom has changed or an event listeners, but we'll save that for another episode. The devtools are incredibly useful when you're trying to debug issues Chrome Firefox Edge. Safari, all these have devtools that are slightly different. They are all really helpful. I use this any time. I have any sort of Javascript error, so he can pause the script execution at any point. If there's an issue here you can click resume, which will continue until there is another breakpoint or you can long press here, and then this one will kind of ignore the next break points. So sometimes you're in a situation where you have a lot of break points like this, and if I click this, it'll jump to the next one sometimes. I'm doing a pass. I just wanted to loaded, and just ignore it. Temporarily. In that case, Click this, and it just keeps playing until there's an air or a different issue, so we've covered, had a pause manually with breakpoints points, A pause manly with the debugger command in your code, Had a step over a line. I can dive into a function call and follow that code. I can pop one level higher, one level lower. I can disable all your breakpoints and I can only pause if there is an exception. That's it.