If you ever get frustrated, like me, at trying to understand what is going on with your code, you may want to put the console.log() statements down for a moment and try out debugging.
I regularly like to make horrible drawings like the one below about how you navigate creating a mental model, or a map of JavaScript. This map gets expanded as you explore and do trial and error. Debugging helps you to do both of these.
Check out the video below to go over how to debug.
You will need the following tools:
https://code.visualstudio.com
https://nodejs.org/en/
Transcript:
0:01
Hey, what’s up dev crew today. We’re going to go over how you can debug your code so you can build mental models and visually see how your code is working so that you could actually start to really understand and unwrap that map and mental model of JavaScript.
0:15
So you’re going to need two tools for this. You’re gonna need vs code, which you have right here and node.
0:22
I’ll put some links in the description below for those, once you have those set up, I want you to create a folder on your computer and hopefully you already have some files, but if you don’t go ahead and create a folder, and from this folder, I want you to put inside, put inside your files, or I want you to just right.
0:38
Click and go open with code optionally. If you ha are on Mac, you’re going to go file open with open folder.
0:47
And that will go ahead and open your, um, uh, up your folder as well. Once you have that working, you will see on the underneath the Explorer section, you’ll see your folder and called debugging.
1:00
I might create a new file here with this icon called test dot JS. And I asked them a code that we’ve already written to set up to test out.
1:10
So if you have your own code, great, um, you can start off with that code, but, um, we’ve got some code here, um, and we’re going to get some more insight into as to how it’s working.
1:24
So there’s a few things that we’re going to do. We’re going to execute this code on our computer instead of inside of a browser.
1:32
And we’re going to pause line by line and take a look at what’s going on with that in order to do that, we have to use the debugger tool.
1:40
So to get to these yet Berger tool, we’re going to click, run and debug over here and just hit JavaScript, debug terminal.
1:48
And there’s other ways to do this by setting up a launch, Jace on the file, I’ll put a link in the description below for that.
1:53
That’s a more complicated set up, um, that I don’t want to go over right now because it might not always work automatically, but we’ll just do the JavaScript debug terminal for now.
2:03
Cause that’s pretty much works every time. Um, so once you have that up and going, you’re going to want to type in node and the name of your file.
2:13
So I’ve got test dot JS. So we’re saying, Hey, node, I need, I’m going to pass you in test dot JS so you can run this file on my computer.
2:22
And before we run it, we want to create what’s called a break point. So there’s break points to the left-hand side of the number line, and you’ll turn red once you click on them.
2:31
And this gives us a place or a moment in time of ref in our code that we’re going to pause.
2:37
So particularly when we get to line nine and execute that line, it’s going to pause. So I’m going to, um, now hit enter now that have node and test at JS set up, and we’re going to pause right now.
2:51
Now you’ll see a few things pop up on the screen. So right here, um, in this section, you’ll see, uh, right above your code are near the top middle section of the screen.
3:02
You’ll have your kind of control tool bar for your debugger and there’s different parts inside of here. This continue. One will go to the next break points.
3:11
If I hit continue, it’ll go down to this next break point down here, but hit step over. It’ll go to the next line of execution and step into will step into a function call.
3:21
And, um, we’ll be using just today, the step over and the step into and showing you how that works. So the other thing that you’ll see is on the left-hand side, you’ll see the variables section and we have different scopes set up.
3:35
I’m not going to explain the scope right now, but, um, it’s basically what you have access to, um, from, from different lines of code that you’re executing.
3:44
So right now, uh, we’re going to hit the step over button. I don’t want you to pay attention to what’s going to happen on the left-hand side of the screen.
3:53
In fact, to build a mental model, a really good trick to D to use is to think about what’s going to happen and then get immediate feedback as to what does happen.
4:02
You’re kind of meant they’re kind of coaching yourself, using the debugger, um, and fixing your mental model as you go.
4:08
So I want you to do you to do that now think about what’s going to happen when I hit this step over button and it goes to line 10.
4:16
All right. So what happened was we had print heading show up on the side as a variable, and we see that it’s defined to hello, which is pretty cool.
4:24
We do the same thing. Um, again, I want you to ask yourself what’s going to happen. Um, there’s three places that things could happen in this context, right?
4:33
Either something could change in the variables. Something’s also going to change in where we’re at in the lines of code, and then something could also change down here in the terminal.
4:41
So I want you to think, as you go through and debug, what’s going to happen. Each one of these is anything going to happen in all three of them is only in one place, right?
4:49
Typically you’re at least going to have something happen on your screen where it will go to the next line, hopefully, right?
4:55
But sometimes it might air your, uh, your, um, code, my air out, which might not be expected. And that’s going to help you again, build your mental model and figure out how JavaScript’s working, or at least how your code is working.
5:08
So may hit the step over button again, and hopefully you guessed, we would have, um, pre pre ending show up here.
5:18
And finally, we’re going to look at how to step into a line of code, um, into a function now. So I’m going to do use this step into here and you’ll see we’re actually going to go into the function call.
5:29
So this function didn’t run until we executed, right. And you know, a function executes when you have parentheses next to the function name right here.
5:38
And if we look at title and end, title end are variables that we have inside of this function that are this, that are, um, the same that have the same values of pre heading and ending.
5:53
So we’d, y’all kind of just build them a little mental model that, oh, so title is the same as, um, uh, PR heading and, and is the same as print ending, right?
6:06
And we can see that by inspecting our variables and looking at our code over here. So I’m going to step over again.
6:14
I want you to think what’s going to happen in our variable section. What’s gonna happen in our, with our break points.
6:20
So which line of code next will be highlighted, and finally what’s going to happen in our console. All right. So over here, nothing happened in our console.
6:32
We got hello. And we went to this next line of code. Now here’s a pretty cool thing you can do with four loops to kind of get you to bring your mental model for loops.
6:39
So there’s four different sections instead of four loops, 1, 2, 3, and four, right? You have your initialization section where you can set up a variable, you have your condition where you can tell whether or not you want to exit that four loop.
6:53
And finally you have your increment or, and you also have the body. So we’re going to see here, this little dance that occurs with in four loops and see how that works.
7:02
And you’ll see the power, the real power of using the debugger here. So I want you to guess what’s going to happen right over here.
7:11
Once we go to the next button, as well as where are we going to go in the execution? So this one isn’t going to go to the next line necessarily.
7:18
It’s going to go to the next, um, execution statement. So when you do the step over, it’s actually going to go to your next execution statement, not necessarily the next line.
7:26
So you’ll see that here now. So over here we just got, I set defined to zero and we went to this conditional, right?
7:37
So zero less than 10, right? Is this going to be true or false? And what’s going to happen? Are we going to go to the I plus plus the increment?
7:43
Or are we going to go to the body? Let’s check and see, I hit step over. You might’ve thought it was I plus plus, cause it’s all in order, right?
7:51
But that’s actually not where it went. It went to the, into the body. And why did it do that? It did that because if we incremented beforehand, we would have one.
7:59
Um, I would be equal to one and we wouldn’t be ever consoling out the, um, initial value. Now, um, I’m going to hit step over again.
8:09
What’s going to happen. The variables, what’s going to happen with our code here. Where’s it going to go next? Right.
8:13
And our code, is it going to go up here is going to go outside, um, to line six. Where’s it going to go?
8:20
Uh, is it going to go back up to let, um, and what’s going to happen inside of our console? Think about those things.
8:27
Let’s run it. All right. The console when put printed out zero, nothing happened over here and we’re in the increment.
8:34
Now what’s going to happen next. Let’s check ourselves. I’m going to guess we’re going to go back to our condition.
8:42
All right. We went back to our condition. Oh. But I forgot that this was going to increment. There we go.
8:47
I just fixed my mental model. So you’re going to see this little dancer happens. So it goes 1, 2, 3, 4, and then it goes 2, 3, 2, 3, 4, 2 3 4 2 3, 4.
8:57
And we’ll see that here. So two, then we’re on 3, 4, 2, 3, 4. And you can see what happens each time with I, what happens in the console as we kind of loop through that.
9:13
Okay. And that’s the basics of debugging with JavaScript and helping yourself build a mental model. Thanks for joining with me.