Debugging - VSCode

00:00 Next, let’s take a look at some really nice debugging features in VS Code.

00:06 Instead of looking at the file editor here, I’m going to switch that off and open up the DEBUG window.

00:13 We can already see that it has a couple of different tabs and the VARIABLES one is going to be interesting. We’ll see the variables in here. And then we’ll also look at this WATCH thing for a bit. Just so you know, there’s a lot that you can do in here, and we’ll just look at a couple of the features. All right, so we can easily set a breakpoint by just clicking—oh, excuse me, there we are—by just clicking into a line where we want to set the breakpoint. And this red thing here, we can do as many as we want to.

00:43 You can switch them off again, also, by just clicking again. I think you can just right-click delete also. How’s that? Remove Breakpoint. Okay, so we set one here, and I can start the debugger simply by clicking this green triangle. And, here we’re rolling!

00:58 It stops the first time it hits this, and we have this nice definition of the variables. The only local variable that we have here is x, and we have this step over, step forward, continue execution. So with this, I can just go line-by-line. Down here in my terminal I see the output. x gets printed, the first time it’s 0. I can keep stepping over it or also step to the next breakpoint.

01:25 What we’re going to see here on the left side—the variable keeps changing. The next breakpoint, now it’s 3. And we printed out 4, x squared, et cetera.

01:35 So, we get a very good and easy overview of what’s going on in our program. We have the features that most debuggers have. We can step into, step out of, start it again, and also stop the debugger. Now, one thing that I think is fun that I want to show you here is this WATCH.

01:51 I can add something here. I can add an expression to watch and we can see it changing through the program. So for example… Well, let’s make this make sense.

02:02 We have a problem here in that we’re not reassigning x, okay? Now right now, we don’t really know what’s going on. If I run this debugger,

02:13 same situation as before. We stop here. x is 0. And now we want to watch what happens, what should it be if x gets squared, okay? x at 0 should be 0, okay.

02:24 Step to the next point of execution. 1, not interesting yet. But now we have x is 2, and we know that x squared should be 4.

02:33 However, what we’re getting printed out is 2. So that gives us an idea to figure out what might be going wrong here. This WATCH is a fun feature. I could also add other things here, like x to the power of 3, right?

02:48 And for each time that x changes, this watched expression also changes. This can obviously also be other things than just this squared in here, but it’s a interesting way to keep track of what’s happening in our program and extrapolate what might be going on if you use a different expression.

03:05 Okay, so that’s the WATCH feature. I’ll stop this right here and show you something else that I like about debugging in here. Breakpoints can be the simple breakpoints that we just looked at.

03:19 Let’s fix this. It can also be something else. I can, for example, instead of printing this x here, maybe I don’t actually need to print it out but I still want to know what’s going on.

03:30 I can edit the breakpoint and instead use a log message.

03:37 And here we have the instruction, Message to log when breakpoint is hit. So this is not going to break the execution. It’s actually going to continue, but it’s going to print out something.

03:45 So it’s similar to using the poor man’s debugger, the print statement, but we don’t actually have to put a print() inside of our code. And we can also print out expressions if we’re using these squiggly brackets.

03:57 ‘Enter’ to accept, ‘esc’ to cancel. Let’s try this out. The variable x is currently—and then I want to give the value, so I put it inside of these curly brackets and then press Enter.

04:12 You see that this is a different thing. It’s not the round debug symbol, but now it’s this lopsided square, and that tells us what the log message is. Now I will get rid of this print statement for now, and if I now run the debugger,

04:29 what happens is it doesn’t actually stop. It runs all the way to the end and there’s no output here, but in the DEBUG CONSOLE, I can see all my print messages—essentially, my log messages.

04:42 So that’s a interesting feature that maybe can help you to transition away from using print statements to a proper debugger. Okay! So these are just a few features that Visual Studio Code has built-in for debugging. You can see that it happens pretty easy, it’s very intuitive, and quite a powerful feature.

05:01 There’s more that you can inspect here. Explore this a little bit, you can see the stack trace, you can define which breakpoints to raise, so I could raise an exception and then automatically jump into the console. There’s also, I have the…

05:18 Let’s show you this.

05:30 We also have a console, so if I run this here and then switch over to the Debug Console, I can also run in here and figure out what’s going on. Squared, whatever I want to do, right? Continue execution.

05:48 Let’s go three times, see what x is now. Now it’s 3. Okay. x + 4 is 7, great, ha. So we just have this interactive console also available in the debugger.

06:01 I personally like the debugger in Visual Studio Code a lot. I think it’s well-designed, intuitive, and easy to use, and it’s a good way to get started learning more about debugging.

06:12 I hope you’ll enjoy it too, and in the next video, I’ll show you a couple of other very cool features that Visual Studio Code comes shipped with. See you there.