Debugging

[00:00:00]
>> Brian Holt: Yeah.
>> Speaker 2: So mine keeps saying that numberString isn't defined, how do I make sure that it is, and how do I find?
>> Brian Holt: Yeah, so the first thing to do is come in here and find where it says numberString, right, okay? So numberString, we know this numberString here is not good for some reason, right?

[00:00:23]
So probably the first thing I would do here, personally, is I would just say console.log("numberString ",
>> Brian Holt: Comma numberString).
>> Brian Holt: And then if I come over here and refresh the page, you can see here that it's logging out whatever numberString is, okay? My guess is right there, instead of saying 4, it's probably gonna say undefined, right?

[00:00:48]
So I'm going to figure out okay, well that means whatever is calling handleNumber is not giving it the right information. So I'm gonna then go find out where handleNumber is being called, okay?. So here's handleNumber is being called, which probably means this value isn't what I expect it to be, okay?

[00:01:07]
So that probably means that this value up here from buttonClick is probably not being passed in. So I'm gonna go figure out where buttonClick was called, right? And that's gonna be down here. So you probably have something wrong right here. Cuz this is basically the terminus, right? You can't really go much further than this.

[00:01:27]
So somewhere along that path line numberString's getting messed up.
>> Speaker 2: Okay.
>> Brian Holt: So that's the general process of debugging is just like working backwards until eventually you hit the problem case.
>> Brian Holt: So I'm showing you how to do this with console.log. I use and abuse number console.log. I'm gonna show you just really quickly a little bit more advanced technique here.

[00:01:54]
So let's say I was running into a problem here. I might throw in what's called a debugger statement here. So I'm gonna put debugger right there, just like that. Now, I'm gonna go into here.
>> Brian Holt: And refresh this, and I'm gonna press 5. And now it's gonna bring up this debugger screen here in Firefox, it's also gonna do the same in Chrome.

[00:02:20]
Now have any of you written C++ or any of these other kind of languages? This should be very familiar to you, because this is how debugger is work in other languages. I can actually see where I am in the code. So I'm here in the buttonClick part of my call stack.

[00:02:35]
Call stack being where I am in the code currently being executed. And now my code is paused here. So I can see here that I have value 5, which is, remember, what I pushed. And can I make this a little bit smaller? Here we go. I know it's a little bit hard for you, but what's actually happened is not super important.

[00:02:58]
You can see is that it's paused on the statement of my code right here. So then I can click these little symbols right here, it's called Step Over. And it's just going to advance my code one piece at a time. So then I can say, hey, is this going where I expected to go?

[00:03:15]
I was like, nope. Okay, so now I can see here it's gonna go into handleNumber. So Step Over says like, don't go into the function call. But if I click Step Into, which is this one right here, it'll actually take me into handleNumber. So you can see here now I'm down in handleNumber, and I can go through my code piece by piece by piece like that.

[00:03:35]
It's a little arduous, but it is pretty cool here. Now let's say okay, that's fine. But I'm now curious about flushOperation here. I can click here on line 71, and I can say Continue to here, or add break points, there's a bunch of stuff you can do. And it's like, okay, continue executing the code until you hit this line and then stop again.

[00:04:03]
>> Brian Holt: Once I'm done messing around with this, I can click Resume and it will just keep running the program until it hits another break point. So feel free to play around with that. It's again a little bit more lower level, but it can be useful. And then make sure you delete your debugging statements when you're done with them.

[00:04:23]
For me that's typically more effort than I wanna put into it. Typically it's enough for me to see the console logs and where things are going. But different people have different preferences.