nodemon

[00:00:00]
>> Speaker 1: If you transpile your code, this type of thing would still work?
>> Burke Holland: Yes. So, that's a good question. Yes, it will. You mean, in terms of bright points and things like that if you transpile? Well, no, because your break points are around the line number, and your your transposition is gonna change that.

[00:00:20]
So if you're transpiling, and you're not debugging via source map back to, in other words, if you were in the index file, and that's where you put your breakpoint and then you changed the TypeScript, and saved, and it changed the file. Then the breakpoint's now not on the same line anymore, so it's not gonna work.

[00:00:37]
Now, here's what you can do. In the case of the express application,
>> Burke Holland: Let me do this again, I'll show you what happens here. Let's start this, this thing's running, cool. So now I'm a developer, [COUGH] I got my Cheetos and my Coke and I'm gonna come over here to I mean, that's what I eat.

[00:00:57]
And then I'm gonna come over here in the index file, and I'm gonna do something. I'm gonna, you know what, I need to go ahead and console.log this. Even though I know about log points, I just don't have time for it. So I'm just gonna log out the color.

[00:01:07]
Let's go ahead and save that. Let's go ahead and change this, change the color, good, yep, hit the breakpoint. And then, let's go ahead and look it our debug console to see my, it's not there. Why isn't it there? Anybody know? It's because in order for it to pick up the changes, we have to stop the application and then restart the application because it's a node app, that is a pain, you do not wanna do that.

[00:01:40]
So we give you a tip on how to get around that. You can install something called nodemon. It's called nodemon, which I think is short for node monitor. And then Visual Studio code will automatically pick up that you have that and it will give you the opportunity to use it in your launch config.

[00:01:56]
So let me come over here and show you what that looks like. This is not actually answering the question, but it is answering the question of what happens when your code changes can a debugger still works. I'm gonna show you how to do that with at least the node part.

[00:02:10]
So here we have a node. Let's add a new configuration up here. So I'm gonna do add configuration and if you go down you'll see, let's see here nodemon setup right here you see it some a click that you have to have nodemon installed, which is an NPM package.

[00:02:30]
>> Speaker 3: Is there also a configuration for currently?
>> Burke Holland: Let's see.
>> Speaker 3: And do you see any problems with concurrently messing with the debug on the running debug on both the server and the front end?
>> Burke Holland: To concurrently run the process? Well, remember it when you run concurrently, you're gonna run it from NPM start.

[00:02:58]
So in that case, you're not using the debugger to launch, you're just attaching. So you would be attaching your processes that are all ready running or in the case of Chrome, you always have to open that additional window. But if you use concurrently to launch a node process, then you can go ahead and, Launch.

[00:03:15]
Attach to that, yeah. But well, disconnect here is that oftentimes you have to start your apps with NPM start, and then you have to launch the debugger. Which launches debug instances of those things. In other words, in order to debug Chrome, you have to launch Chrome with a debug flag.

[00:03:33]
In order to debug node, you have to launch node with the debug flag. So what you would do is you'd launch with concurrently then you'd come over and create a launch config, and you would hit start, and it would create debug instances of that. So a little bit of a disconnect there, but the problem is you have to get those things in to debug mode.

[00:03:53]
You have to pass, now if you did concurrently and it has like an inspect flag that you could pass to it for node then you could just attach the debugger process instead of launching it. So up here, let me add, I'm going to add nodemon real quick.
>> Burke Holland: So you can see how this works, and it's got lots of options.

[00:04:17]
Lets take this out, let's move this up. How do we move things? Option, up arrow, yes, no, was that whole section a waste, all right. [LAUGH]. Let's pull this out, and then we want server, server slash, learn to type, server slash server dot JS and see we've got, we're going to use nodemon.

[00:04:40]
Remember, I said nodemon is a, you install it for a NPM, so you do NPM install, nodemon. Nodemon like this. And you'd probably do it globally. This launch config. So let's Run this now. We need to change, what did I call this? This is called nodemon, let's change it back to launch server.

[00:04:58]
VS quotes complaining about that, this doesn't exist. It does now. Update yourself. All right, and then let's launch the whole darn app.
>> Burke Holland: So there's the front end. This looks like the back end running here. So now we can come back and we can say, so for instance, if we change the color here, we should actually see this now in the, yep, it's right there, it's being logged out.

[00:05:28]
So let's come back and say, okay, I don't wanna see that anymore. So I'm gonna go ahead and let's clear out some real estate here. Let's say I need more information here I'm like the color is a little bit of string interpolation. And now I've saved it and if you notice, but up in the top it very briefly blanked because it killed the node process, restarted it and reattach the debugger all with me just clicking save.

[00:05:57]
And so if I come back and do this again, change it to blue. And now let's look at our debug console, the color is, right? So we're now changing node code on the fly without having to stop and start our debugger every time. So it's also a very nifty tool for your at least the API side.