Debugging Node

[00:00:00]
>> Mike: So the last thing we're gonna look at in terms of using Visual Studio code is debugging. Man, does this text editor do a great job at allowing us to remain in our code authoring environment, while getting first class debugging support. That I would be hard pressed to find anywhere else.

[00:00:24]
I don't know if it's possible to do the kinds of things we're gonna look at in other editors. In order to sort of work our way up, let's talk about debugging various things. And we've got two system components of interest here. We've got node.js backend, that's what providing our JSON.

[00:00:45]
And then we've got react React that's running in browser. So the old node debugging experience, I will show it to you, looks kind of like this. Node debug, and then you'd say, here's the image of your file. And effectively what's happened here, like we're in a text-only environment, number one.

[00:01:07]
The extent of the user interface we've got is it looks like something has been highlighted in green. I really don't know what that is. And if I tried like help, what you find is that we can use some of these commands to set breakpoints on particular files, on particular lines, it's all done through your terminal.

[00:01:30]
It's all done with text. And my key, you see here we can continue, we can step, we can use the next. These where the things if you use debugging with Chrome, we use to having the whole buttons for that. Here you have to know the key bindings. And if were gonna like inspect for whats going on, we actually have to enter the repl, which is the, what is it, read, edit-

[00:01:52]
>> Speaker 2: Execute.
>> Mike: Read, execute.
>> Speaker 2: Print, loop.
>> Mike: Print, loop. Read, execute, print, loop. So now, I'm actually, I can't see where I am at the stack now. I've lost that, cuz I'm out of that mode. But I could do something like,
>> Mike: And you'll see, I can run JavaScript here.

[00:02:12]
This is the equivalent of just running the node command, except we're frozen at this point in time. Who liked this debugging experience? Okay, for the record, zero hands in the room just went up.
>> [LAUGH]
>> Mike: Let that stand on the video. Okay, so luckily May 2016, Google I/O of last year, they launched something really cool.

[00:02:37]
By the way, I am not being totally fair to node. You could have added some packages to this that would have improved the experience here. But you had to know how to do that, it wasn't part of the core node thing. So here's what we got last year.

[00:02:54]
We could do the same thing. Instead of saying, debug, we're gonna say, inspect and inspect PRK, which is this first flag here tells the V8 one time to start up. Listening to the inspector protocol, which is next generation of, the way that the JavaScript runtime will talk to like tools and then inform them about, like here's the current stock and you just stop to your break point, just think of it like it's JSON going back and forth.

[00:03:29]
This is a new version of the protocol. This here, adds the additional benefit of basically freezing as soon as you start up. And listening for break points to be set even after the debugging session has started. So we need that if we wanna be able to click on lines as we're stepping through the code and have those break points be something the debugger listens to.

[00:03:53]
Otherwise, you got what you got when you start up. So once we do this, you'll see you get a web socket URL. Some versions of Node would give you a chrome://URL you could click on. And you could jump right into Chrome. What you would do here is go in to Chrome, inspect, and what you'll see is hey look, I've got a remote target here.

[00:04:17]
I click this and we'll find that we're frozen at this particular break point, and if we look over here, it says debugger attached. And so, now we can actually say step, step, step, and it will do stuff. So you get to use Chrome's tools here, which is great.

[00:04:36]
This is so much better than what we were looking at before. And frankly, this was the major advancement here.
>> Mike: What we can do to make this even better is bring it into our environment, but I wanna show you, this is not Visual Studio code, but I have to show it to you.

[00:04:56]
You see I've got multiple break points here, this is a relatively new Chrome feature where I can say, I want a break point on this line. Let me make it a little bigger, and I do not need this console right now. I want a break point on this line, but this is async, right, where I'm saying DB instance, returns of value, then I've got start.

[00:05:15]
And that result, that returns of promise, that results to something. I can actually pick which one of these or multiple I wish to stop at on the single line. So there's sort of like, which step in this chain of things do you want to stop at? Goes to show you that debugging is evolving, and the basics of just like breakpoint and watchlist.

[00:05:42]
This is sort of, this is the, just the table steaks, right? This is the least you can implement. Many, many teams are working on more advanced stuff. So let's get out of here.
>> Mike: And let's do something else. So I'm gonna run, you may notice, I've got in this project.

[00:06:08]
Let's see if I have it, great, aunch.json. So we're gonna talk about this in detail. We're gonna deal with launch configurations. I've got two in here. Don't worry about them for now. We're going to dive into this in detail, but the consequence of this is if we open up the Debug View, and if you have you Activity Bar on, it's the little bug with the circle and slash through it.

[00:06:29]
What we can do here is we can say, attach and that is the equivalent of like clicking on that link in Chrome. So I wanna start up Node, same flags, inspect, inspect, break. And I've selected attach here, and I can hit play. And now I am stopped at a break point right within code.

[00:06:50]
I can have a watch here. These are basically, if you have ever used these before, they're expressions where whatever you stop at a break point whenever you pause essentially you get to see what certain expressions evaluate to. You've got your list of breakpoints here and a call stack, and then here is your local scope.

[00:07:10]
So I've got a break point here, you will note that I can't step into this as easily. I am fairly sure that we will soon get that kind of thing, at the rate that the VS code team is working. Then we'll be able to jump into specific, some people call these column break points, where you can say this part of this chain call should be used.

[00:07:35]
So in addition to that, let me not get ahead of my slides here. But we can do other stuff, so we'll look at that later on. But we're currently at a break point in Chrome. Rather than using these flags here, you have an npm script that will do the exact same thing for you within this project.

[00:07:54]
So if you just run npm run debug, attach. You'll start up with the correct flags, and you'll be able to attach just like I did.