Debugging in Visual Studio Code with Watches

Today we're going to be looking at setting up watches for debugging inside of Visual Studio Code. So if that sounds interesting, do me a favor, give the video a thumbs up, leave a comment for the algorithm, of course, and then subscribe to the channel so you can see more content like this. So let's jump over to the code. Awesome. So I have Visual Studio Code opened up here. The actual code that we're going to be looking at isn't super important for this context. And what I'm going to be doing is I'm going to press F5 on my keyboard so that I can start debugging here. There we go. I'm going to navigate to this URL. And to trigger my breakpoint that I've set here, I need to you can see that I've just pressed right here to be able set to set a breakpoint on the line here for return. Uh, and it's inside this function that I have. And to trigger that, what I'm going to be doing is pressing this recipes tab here. And when I click it, I hit my break point. So, that's something you might have known already. Great. But now that we're here, what are watches all about? So, watches, if you see on my left portion of my screen, I have this big section for watches. I usually don't code like this. It's just for the video. And you can get to that by pressing this run and debug tab on the left. And then you get this watches section broken out here. So what's a watch? Well, this is going to give us the ability to examine variables and have them kind of pinned here for us to look at. So if I were to hover over like uh this data variable, you can see in the tool tip that I have a a property here called recipes and it's an looks like an array and has 94 things in it. So cool. But how do I go like navigate that? I can go click on this and that works. But it's kind of a pain in the butt and it's kind of like maybe you want to do a one-off thing and look at that. But if you're debugging a whole bunch and you really want to just be examining data, it's really handy to have a watch. So you can go ahead and press the plus button here and it says add an expression. So what's the expression to watch? Well, what does that mean? Well, the expression is, I think, the easiest way to think about this is if you were to write a little bit of code, it's going to tell you what it evaluates to. So, what you want to type into here is literally the thing that you want to watch. So, in my case, if I wanted to watch my data variable, I could type data. And in the context of this function, when it evaluates it, you can see that I have all of my recipes, right? So, I can expand that. There's the big list of them. I could go expand one of these and I get all the content. So, it's just like hovering over with your mouse and getting that tool tip. But the difference is now that it's kind of pinned here for us. So, that's a really simple example, but if you think about what I mentioned, this lets us watch an expression. So, we could type things like, right, I don't think you need to watch one, but it's an expression and it evaluated to two. So, what if you wanted to get the length of the the array of recipes because that was the thing that you were interested in? Well, you could do that by typing that in here and you're going to see 94. So, if you didn't care about all of the other details and you just wanted to kind of pay attention to the length of how many recipes were coming back, that might be really handy for you. You could even do something like um you only care when um the length of the recipes is over some value, right? Maybe you're debugging some issue with communication between your server and sometimes you get the full list of 94 and other times it's only one. I don't know why, but maybe that's something you care about and you just want to make sure that you're getting more than one. Um, so as you're debugging stuff and you're stepping through all your code, you could be like, "Oh, yep. That's easy to watch, literally. And I can see that I have at least one item there. So I've I seem to have fixed the bug." That kind of thing. So that's mostly it. And you'll notice that if I I'm going to press F10 on my keyboard to kind of continue this and step out of the function. Right? Now that I've left the context of that function, these expressions don't really evaluate to anything that makes sense in the context of this next function. So you can see it's kind of useless right here. But that's okay because if I press F5 to continue running, we'll go back here. I'm going to just jump back to foods and then back over to recipes. And you'll notice we hit the break point again. And of course, all of the things that we set up to watch that remained here because we didn't delete them, they all get re-evaluated. I can go see all the recipes again. So, it's just a nice way to kind of set yourself up when you're having a little debugging session. And I think it's a lot more handy than just uh every time you're going through trying to hover over stuff. And especially when you have to deal with arrays and collections and you want to move your cursor over and just click the thing and then you miss or something and it goes away, it's frustrating. So, it's just a little quick tip and hopefully that helps you with debugging. Awesome. So, just a quick one today. Hopefully that was helpful. Uh, if you thought that was useful and something that you're going to try out in your debugging and you didn't know about it, give the video a thumbs up. Leave a comment below if you have any other tips for debugging that I could share with other folks. And of course, subscribe to the channel if you like content like this.