Debugging

[00:00:00]
>> So let's talk about debugging apps. Of course, you can't write or be functional with an application that you can debug. And so you're gonna wanna do that. So let's go ahead and paste this in. And again, it's gonna be mad at us over that isolated modules issue which we can get rid of by saying export this right here and that will go away.

[00:00:21]
All right, so in this case, we're just gonna read in an argument and write that out. So let's see how we can debug this. In Dino, I'm gonna go ahead and quit this, there is a we could run and we can pass in this inspect flag. So we do inspect app.ts.

[00:00:42]
This will run attaches the debugger, but then it just immediately exits because the program runs to completion, we now have an opportunity to set a break point anywhere so not terribly useful. But if we do inspect -BRK, which I think is the same convention that node uses, then it will stop, it will actually stop.

[00:01:03]
And it's just waiting for us to connect debugger. So how do we connect the debugger? The one way to do it is in a browser such as Edge or Chrome, both will work because they're both chromium based. If you type in Edge, or actually, for those of you on Chrome, and this will work in Edge too, so we'll just do this inspect Edge just automatically maps this to Edge.

[00:01:32]
This is the inspector that comes with Chrome or chromium powered browsers. And so what you'll see here in a minute is it should detect that we have a process running now. I wanna be forthright here and say that I have not been able to get this to work with the WSL because It's looking for a file that's in this location, and this is inside of the WSL on my machine.

[00:01:59]
If you're not familiar with the windows subsystem, it's just a different file system that's also running on Windows. And so what I've had to do to make this work is actually open and run this on Windows, to use the browser debugging. So what I wanna do here is I'm just gonna reopen this folder in Windows.

[00:02:15]
And then you'll notice that we'll be in PowerShell. My terminal will be different. So we're in PowerShell here. So let's try this again. Let's just do Dino run. We're gonna pass and inspect BRK oops, let's move into exercise. Dino run. Collapse this, collapse, no, I can't do that, all right.

[00:02:36]
Then we add dino run --, jeez, having all kinds of problems. Dino run, inspect-brk app.ts, I think that's all we need to do. And then I'm gonna pass in world which is the value. They're gonna check it, and then it should start it and start the debugger, really something.

[00:03:04]
Just do this. By the way, did you know you can just upgrade Dino with Dino upgrade? That's pretty nice. If you've used node before, you have to remember, you need like a version manager? Don't need that with Dino, you just do it. So let's try that again. All right, so the debugger is now listening, cool.

[00:03:26]
So let's go back to the browser and try this again. So this time we'll do edge inspect. And wait for it to detect our running process and inspect. And now you can see we're broken inside and we can actually see the value, and so if we look at Dino ARDS, do we not pass one and we didn't pass an Oregon but normally we'd see that here and we can step over and to completion of the program.

[00:03:58]
Now, you probably aren't going to debug with a browser, you can but the better way is to do it with Visual Studio code. So let's reopen this in the WSL no. Try that again, reopen folder in WSL. So what we wanna do instead what we'd be better is if we could like set a break point here like that, and debug inside of Visual Studio code and we can do that.

[00:04:27]
So to do that, what we need to do is we need to go to our debug view in VS code, which is this little bug with a play button, and then we need to create a launch.Json file which tells it how to attach. Now fortunately, there's a Dino option already in the list, so we don't have to figure this out it's gonna preconfigure it for us.

[00:04:52]
So I'm gonna click on this, and it's going to create the launch.Json file, and then we'll take a look at it. So what we've got here is this program is gonna run, and we need to point it at the right file, and our file is exercise app.ts, so let's do that, exerciseapp.ts.

[00:05:14]
And then the rest of this stuff, we can just sort of leave that the same. The only thing is we wanna pass in some arcs to this thing, so let's do that. Cuz it's the program is looking for some arcs I'm just gonna pass in world. If we pass them in as runtime arcs, it will get passed before the filename and then as we discussed, it wouldn't work, arcs have to come after the file name.

[00:05:40]
Okay, so in theory now we should be able to just come here and click the play button. And we have now have this launch Dino which comes from this name right here, and it should attach the debugger. So let's see. So we're gonna run, okay? Perfect. And then let's look at ARDS and there's our ard it got passed in.

[00:06:02]
And then if we continue on, console log, and then we go back into the Dino code, and then things exit, but we never actually got to see the output. Why is that? Well, that's because by default, VS code outputs to an internal console that you can't see. And so you can change that by coming to the launch.Json, let's collapse this terminal here.

[00:06:30]
And we can say, come here we can say console, I think we can change it to integrated terminal. So by default, it's internal console, which is when you can't see, so we're gonna change it to integrated terminal. And then we're gonna run it again. So let's do it again.

[00:06:49]
Let's make sure our break point is still there. Right, it is. So let's go ahead and run it again, and this time look, you see it, you can see it running. We're gonna step over, console log and we can now see it here down in the console. So, that's how we debug apps with, Dino apps with Visual Studio Code.

[00:07:13]
It's pretty easy, it's pretty much set it and forget it. It creates the launch configuration for you. Not much that you have to do there besides pointed out the correct file, the correct entry point for your project, click play. We'll do this later on. We'll look at more complex application as well.