Check out a free preview of the full Organizing JavaScript Functionality course:
The "Debugging" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

While troubleshooting a couple issues with his application, Kyle walks through how to debug both the client-side and server-side logic. Once the code is fixed, Kyle demonstrates the working application.

Get Unlimited Access Now

Transcript from the "Debugging" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: The first step, I know I'm in the local path here.
>> Kyle Simpson: Let's see, about.js.
>> Kyle Simpson: So let's set ourselves up a breakpoint here. Make sure that, actually that's not gonna be terribly helpful. Let's set ourselves up a breakpoint inside of the validator.
>> Kyle Simpson: Normally I do that inside of my thing.

[00:00:41] I'm not really sure, I think it might be my cache busting or something, I'm not really sure why Chrome is freaking out on my local debugging. Okay,
>> Kyle Simpson: Let's check and see what we're getting in. We got in a zero and a zero, which is what we're expecting.

[00:01:01] Let's look at those rules. Max less than min, which it's not. Min less than zero. So I intuited wrong. Actually that should pass, right? So we probably should add ourselves an extra validation rule. So my bug isn't necessarily in. That is just that I'm missing a validation rule, we should probably say if (max <= min), all right?

[00:01:34] Cuz that's a case that we probably don't want, a min and a max equal to each other, that's not gonna be very helpful. So let's just try that. Let me reload here. Since I changed a file that is gonna be used on the server, I'm gonna wanna restart my server.

[00:01:59]
>> Kyle Simpson: Yep, there we got our validation rule. Now we didn't actually handle, I need to handle that. This is a detail I forgot. We didn't actually handle what happens if the Ajax response gives us an error back, right? Cuz that's one of those cases where validation could fail at the API level and not here.

[00:02:19] We know that won't actually happen, but this is a case that we should handle just in case something was broken in the browser. Maybe you had an old version of the validate function or something like that. So we wanna handle the .fail case. Actually, not the .fail case, that's still going to be a success, but we wanna look at the response to figure out whether it had an answer or an error in it.

[00:02:41] So if it had resp.answer, then we'll render the answer. And if it had resp.error,
>> Kyle Simpson: We'll render the error.
>> Kyle Simpson: We can't really test that that stuff's gonna work without trying to break our app,but let's just a piece that I don't want to forget. Okay, so,
>> Kyle Simpson: Let's try 3 and 10.

[00:03:26]
>> Kyle Simpson: I got back a random number, but it's not constrained properly which lets me know that I wrote something wrong about my constraints logic. So let's go to my Foo module.
>> Kyle Simpson: So, that would have been this number mod seven, plus, or mod eight which is zero to seven.

[00:03:49] Plus the min of three, which should have constrained this between three and ten. Why is that not working?
>> Kyle Simpson: Let me verify that we're not getting something weird coming in.
>> Kyle Simpson: We're being way too trusting about the inputs. We're converting them to numbers for the validate purpose but we're not converting them in the Foo module.

[00:04:48] So we should be doing that. We should say, min = Number(min); max = Number(max);.
>> Kyle Simpson: Let's check that.
>> Kyle Simpson: All right, that looks better.
>> Kyle Simpson: So let's take out my debugger so I'm not gonna be annoyed over and over.
>> Kyle Simpson: Well, it appears to be working there. Let's try something slightly bigger like,

[00:05:46]
>> Kyle Simpson: 10 and 50. What happens if I make the max too big? My validation rule fails. Now let's switch this to local. Let's give it something, let's just verify that, to remote. Let's verify that we're gonna in fact still get stuff working if we send it off to our API.

[00:06:07] Lemme restart my server cuz I think I might of made changes that the server needs to have
>> Kyle Simpson: All right, let's go between 10 and 40, and let's see what the server has to say. So it gives us a 39, 38, what happens if we give something bad to the server?

[00:06:37] There we got our error message back. Actually that error message didn't come back from the API, that was our local validation. We can very easily break our data validation to verify that the server is still backing us up. Which will be the last step and then we'll wrap for the day.

[00:06:58] In our about.js, all we need to do to verify is just skip the local validate step entirely. So we're not going to do any local validation and we're gonna now try it in a non-local case and and verify that the server validation is still working correctly.
>> Kyle Simpson: So 10 and 40 still works but 10 and 400, we got back the failed from our API.

[00:07:41]
>> Kyle Simpson: All right, so let me just recap and then we'll finish up. I'll make sure there's. Is there any validation preventing zero and zero? Yeah, the validation of but they can't be less than or equal to each other. That's the test.