Challenge 4: Solution

[00:00:00]
>> Mike North: So we're gonna go through the solution to multi process debugging. The first thing we're gonna do is just get our break points in order. This is the one where I don't have the correct link there. So I'm gonna open up cart-store and in the save cart function I'm just gonna set a break point here, before we send our fetch request out.

[00:00:20]
And I'm really just interested in like, what is this? That we're about to send out as the payload of our response. On the server side I'm gonna open up this cart.js and it says look for this put/items handler. Up, there it is right here, put/items. So I just set a break point right here, like all we've done is kind of grab some stuff.

[00:00:46]
Before we start trying to do anything with what looks to be a database. Something or the other, we'll just stop and have a look at what's going on. So the next step here is we want to, by the way, a pro tip here, just cuz I'm seeing it now.

[00:01:05]
Notice how cart is italicized here, as opposed to here it's not? So that means this is what's called a preview pane. Where we've kinda looked at it, we can make an edit and then if we go away it may disappear. Like if we say I wanna go back to cart-store that's gonna take the place of where we just were.

[00:01:25]
You can double click on the tab and now it's like a full fledged thing and anything else would be open up in new tab. So you can turn this off if you like, but I kinda like to live it on. So good time for debugging. We'll open open up our debugger panel on the side just to show everyone where that is.

[00:01:45]
You probably have an activity bar that looks like this, there's your debugger panel right there. If you were somewhere else, like the keyboard shortcut for me, which I've kind of gotten used to is Cmd+Shift+D. Oops, you have to have something over here selected, and now we're at the debugger.

[00:02:02]
So, we can, we will kick things off here. First thing we need to do is launch this thing. Debug inspect,
>> Mike North: And we will attach to the node that we just started out. There we are at our break point, we're gonna let it run cuz that's fine. We didn't need it to stop there.

[00:02:33]
Next thing we'll do is launch Chrome. Click the play button again. If I look at the Chrome that just started up. You can see we've got a similar like break point there that it stops at. Now the app's running. So I want to hit this at the cart button.

[00:02:52]
This is where the arrow happens. We've actually frozen that at our first break point and we can see, here, this attach here, we can rename our launch configurations, in order to make this, like, to make it a little easier to see what's going on here. But we could attach, we can see that Chrome is what's paused here.

[00:03:15]
And if we look, we've got what appears to be a list of items. In fact, I can just stringify this, go to my Debug Console, paste that. And it looks to be an array.
>> Mike North: Let's look up at the top. Yeah, it begins as an array here. Okay, so I'm just gonna let this play.

[00:03:35]
And where I stop next is now I'm in my other debugger. So if we look, Chrome is running now. I can go back here, I can scroll around, I'm not frozen. I am now on my backend. Now that was a pretty seamless transition for popping between two debuggers.

[00:03:52]
So, what we can see here, is we've got the context. There's our request object. There's our body. And then we grab a data property off of it and it's not telling me anything, so what's going on here? And it turns out, this ends up being undefined. So it looks like this wants a data property like wrapping this array.

[00:04:15]
So we would need to fix that or to say like, we could test our hypothesis here. Step to the next break point and then say items = ctx.requests.body;, that's it. Cannot read property. R-E-Q-U-E-S-T. Okay, so now items has we'd have to look over here. Let see. Do we need to,

[00:04:54]
>> Mike North: Interesting.
>> Mike North: I wonder if we have to let it run here. See what happens.
>> Mike North: Items? There it is, okay. So we didn't get a new look just having set that in our console. Our scope, our variables panel here did not update. But it has in fact been updated.

[00:05:14]
There are the items here. So this should play through with no issue. And it in fact does, and that item just got added to the cart, so I can pick another one here. And I can do the same thing and you'd see the cart kept another item added to it.

[00:05:29]
How will we fix this?
>> Mike North: I just updated on the client side.
>> Mike North: Now, you'll note that what we just did is we saved a file, which is part of this app we're building up to serve over HTML. Like serve with HTMLs and external JavaScript. We've got webpack kind of built in into this tool.

[00:06:02]
So we won't even have to restart here. Webpack kind of did this thing on the next refresh. We're gonna get the new version of the asset. So let's add a new item to the cart. Something that I haven't had in there before. Pretty sure I don't have this.

[00:06:17]
Okay, so now we can see, yeah, we've got this thing here. We've wrapped it appropriately. We're gonna pop back over to the server side. Hey look, there's our data. And so now we've just fixed this bug. We'll peel back all our break points, let it run through. And now we see the number nine up here.

[00:06:34]
And there's our ginger root in the cart. So I've never seen quite so easy a way to toggle back and forth, between two different states like this. Two different fun times that we're debugging here.