1 00:00:00,220 --> 00:00:05,390 So far, none of the bugs we fixed were actual JavaScript errors. 2 00:00:05,390 --> 00:00:07,840 We were getting unexpected behavior, but 3 00:00:07,840 --> 00:00:12,470 the JavaScript interpreter didn't see any problems with our code. 4 00:00:12,470 --> 00:00:15,580 Often though, errors will accompany bugs. 5 00:00:15,580 --> 00:00:20,740 As you'll see, this can be a great thing that can help us find the bug faster. 6 00:00:20,740 --> 00:00:24,400 Errors after all are designed to help troubleshoot code. 7 00:00:24,400 --> 00:00:28,770 In the app, I'll click the remove button on one of the names. 8 00:00:28,770 --> 00:00:30,030 Nothing happened. 9 00:00:30,030 --> 00:00:35,900 And if I look in dev tools, I can see this red x up in the upper right-hand corner. 10 00:00:35,900 --> 00:00:38,190 This tells me an error occurred. 11 00:00:38,190 --> 00:00:42,150 If I click on the x, a console appears in the sources window. 12 00:00:43,230 --> 00:00:47,240 This is the same console as the one in the console tab. 13 00:00:47,240 --> 00:00:52,460 Sometimes it's handy to have a console open when you're viewing other tabs. 14 00:00:52,460 --> 00:00:55,190 To make this second console window appear and 15 00:00:55,190 --> 00:00:59,490 disappear just press the Escape key on your keyboard. 16 00:00:59,490 --> 00:01:02,480 Let me show you another trick for working with DevTools. 17 00:01:02,480 --> 00:01:06,080 You can change where Chrome displays its DevTools. 18 00:01:06,080 --> 00:01:09,290 They can appear in the bottom of the window like they are now, 19 00:01:09,290 --> 00:01:14,160 on the side of the window, or even in their own separate floating window. 20 00:01:14,160 --> 00:01:17,800 To do that go to the upper right hand corner and 21 00:01:17,800 --> 00:01:21,500 choose one of the three options next to dock side. 22 00:01:21,500 --> 00:01:26,477 Here's the side window view and here's the floating window. 23 00:01:31,239 --> 00:01:36,520 Back to our error, this error tells us that removeChild couldn't be called. 24 00:01:37,580 --> 00:01:40,776 The error occurred on line 87. 25 00:01:40,776 --> 00:01:45,080 If I click the link, I can jump there in the document viewer. 26 00:01:46,310 --> 00:01:51,776 The error says the parameter we're passing in to remove child is not a node. 27 00:01:54,760 --> 00:01:56,280 So what is LI then? 28 00:01:57,370 --> 00:02:00,630 Once an error has been thrown the interpreter stops running. 29 00:02:00,630 --> 00:02:05,430 So we can't use these tools to look through the call stack or the scope. 30 00:02:05,430 --> 00:02:07,920 If we knew how remove was being called for 31 00:02:07,920 --> 00:02:12,990 example, we might get insight into what value is getting passed in here. 32 00:02:12,990 --> 00:02:17,640 Let's set a breakpoint to freeze the program just before the error occurs. 33 00:02:17,640 --> 00:02:22,200 That way, we can inspect the state that is causing this error. 34 00:02:22,200 --> 00:02:27,100 All we need to do is click the pause exceptions button. 35 00:02:27,100 --> 00:02:29,370 It's blue when it's enabled. 36 00:02:29,370 --> 00:02:32,780 Now whenever the interpreter encounters an error or 37 00:02:32,780 --> 00:02:36,580 exception it will pause just before the error is thrown. 38 00:02:38,020 --> 00:02:41,820 I'll refresh and click on a remove button. 39 00:02:43,200 --> 00:02:50,200 Now we can see that LI is undefined and removes local scope. 40 00:02:51,530 --> 00:02:55,810 You can also see the error object that is about to be thrown. 41 00:02:55,810 --> 00:02:59,890 Let's move down the stack and see how this remove function was called. 42 00:03:01,820 --> 00:03:06,460 The remove function is inside this nameActions object, 43 00:03:08,361 --> 00:03:13,195 Right here, and it's being accessed by the action variable 44 00:03:13,195 --> 00:03:18,070 which holds the string remove, then it is called. 45 00:03:18,070 --> 00:03:23,860 But no argument is passed in, which is why li undefined inside remove. 46 00:03:24,940 --> 00:03:28,210 If we go back to remove and look at the scope and remove, 47 00:03:29,230 --> 00:03:34,240 notice that even though li is undefined locally, in the block scope, 48 00:03:34,240 --> 00:03:39,518 which is the scope immediately outside this function, li is defined. 49 00:03:39,518 --> 00:03:43,890 So because li exists locally it is blocking the remove 50 00:03:43,890 --> 00:03:48,770 functions ability to use the variable from the outer scope. 51 00:03:48,770 --> 00:03:53,020 If you're still new to function scoping this might be a little confusing. 52 00:03:53,020 --> 00:03:57,110 I'm posting some resources in the teacher's notes for further research. 53 00:03:57,110 --> 00:03:58,330 For now though, 54 00:03:58,330 --> 00:04:03,100 just know that if we delete this li parameter from our function, 55 00:04:03,100 --> 00:04:09,830 the remove function will regain access to this li variable and its outer scope. 56 00:04:09,830 --> 00:04:11,850 In fact, let's just see the difference. 57 00:04:12,870 --> 00:04:16,690 I'll refresh this, move over to our text editor. 58 00:04:17,720 --> 00:04:24,750 And down on line 86 we'll remove that parameter from the remove function. 59 00:04:26,080 --> 00:04:29,980 Save and switch back to our DevTools. 60 00:04:29,980 --> 00:04:35,200 Now before I refresh and hit remove, this line is no longer going to 61 00:04:35,200 --> 00:04:40,610 trigger an error so I'll just put a break point so we can see what's happening now. 62 00:04:40,610 --> 00:04:44,680 So refresh and click remove, and 63 00:04:44,680 --> 00:04:48,512 now you can see there is no li in the local scope. 64 00:04:48,512 --> 00:04:53,380 Remove will now need to get the value from the block scope. 65 00:04:55,150 --> 00:04:58,970 If I remove the break point and press play. 66 00:05:01,040 --> 00:05:03,360 You can see that list item disappears now. 67 00:05:05,500 --> 00:05:08,460 Aside from getting some more practice with the call stack and 68 00:05:08,460 --> 00:05:12,860 scope windows, you learned how to pause on exceptions. 69 00:05:12,860 --> 00:05:16,180 You'll probably use this feature a lot in debugging, and 70 00:05:16,180 --> 00:05:19,490 your debugging workflow will greatly improve as a result.