Debugging Chrome with VS Code

[00:00:00]
>> Mike North: All right, so that was on node, Chrome is very similar. So we create a launch configuration here, this is not attach, this is launch. That's already exist in your project, don't worry about copying this in. And essentially, this lets us just create a new Chrome, and to attach to it immediately.

[00:00:19]
So we can launch this the same time as our node debugger, Let me show you. I'm gonna go launch Chrome, and then boom, and there it is. Now you'll note, I don't, I have some Chrome extensions installed. This has no Chrome extensions here. It's a nice, clean, standard environment set up.

[00:00:41]
And if we were to set up,
>> Mike North: A break point,
>> Mike North: Like here.
>> Mike North: That's not a line of code here, have it in the constructor.
>> Mike North: Let's kill this.
>> Mike North: All right, start up Chrome,
>> Mike North: Stop there, for some reason, and there we go. Now, you'll note that in this debugger thing, this is new.

[00:01:22]
So I can go between like, my Chrome and my node, and if we look at the call stack, you'll see I've got two different top level trees here. So, this isn't just multiple threads, these are multiple processes, multiple Java Script run times, all in one environment here. And it's all based on one project, and so, in terms of finding the files and things, we can just set break points in one spot, and then like advance, and then, maybe our server side debugger.

[00:01:51]
We'll pick up on others when we hit them, it is pretty nice. And of course, we can reorder all this stuff quite nicely. So, you would be hard pressed to find this kind of thing built into a browser, right? Browsers are generally are not gonna be able to say, yeah, you can debug this thing that's running in me right now.

[00:02:14]
And simultaneously, connect to node and show it all in one window that's seamlessly, tied to your source code. Not to rip on Chrome, but that's like, they're a Web browser, not a full scale, like, editing environment.