1 00:00:00,200 --> 00:00:02,360 There's another bug in this program as well. 2 00:00:03,550 --> 00:00:07,770 If I check the Hide checkbox, all the guests who haven't 3 00:00:07,770 --> 00:00:13,120 RSVPd should disappear from the page, but they don't disappear. 4 00:00:13,120 --> 00:00:16,340 Instead, they become highlighted as if they were confirmed. 5 00:00:17,370 --> 00:00:23,042 No further changes happen when I check or uncheck this box. 6 00:00:23,042 --> 00:00:27,620 Let's inspect one of these items to see what may be happening. 7 00:00:27,620 --> 00:00:33,648 I'll refresh and inspect Tammy's list item in the elements tab. 8 00:00:38,003 --> 00:00:42,147 Now I will check the hide box again. 9 00:00:42,147 --> 00:00:44,460 And you can see there's a problem here. 10 00:00:44,460 --> 00:00:49,055 All of the guests who were not marked responded have been 11 00:00:49,055 --> 00:00:51,610 added the class of responded. 12 00:00:51,610 --> 00:00:56,428 And they also should be getting an inline display property of 13 00:00:56,428 --> 00:00:59,361 none to make them hide from the page. 14 00:00:59,361 --> 00:01:02,238 But that's not happening, which you can see here. 15 00:01:02,238 --> 00:01:08,830 And you can also confirm that by looking down at its display property right here. 16 00:01:08,830 --> 00:01:10,740 It's still list-item. 17 00:01:10,740 --> 00:01:14,290 Setting an event listener breakpoint worked really well before, 18 00:01:14,290 --> 00:01:16,310 so let's do it again here. 19 00:01:16,310 --> 00:01:17,860 I'll go to the sources tab. 20 00:01:19,400 --> 00:01:20,375 Set the breakpoint. 21 00:01:23,618 --> 00:01:26,466 And it looks like it's already set from before, so 22 00:01:26,466 --> 00:01:28,660 I'll leave the change event checked. 23 00:01:29,990 --> 00:01:33,170 Now, I'll refresh and check the hide box. 24 00:01:34,840 --> 00:01:39,580 The debugger's paused where the listener begins on line 17. 25 00:01:39,580 --> 00:01:42,420 Before we start stepping through the program, 26 00:01:42,420 --> 00:01:46,630 I'm immediately curious about what's happening in this for loop down here. 27 00:01:47,980 --> 00:01:53,530 And that's because that's where the list items are being manipulated in our code. 28 00:01:53,530 --> 00:01:58,260 We can jump to a specific line of code by setting a breakpoint. 29 00:01:58,260 --> 00:02:01,510 While we previously set breakpoints on browser events, 30 00:02:01,510 --> 00:02:04,380 this time we'll set one on a line. 31 00:02:04,380 --> 00:02:07,940 To set a breakpoint click the line number where you want to break at. 32 00:02:09,400 --> 00:02:14,023 Let's put our breakpoint on the line right after line 22 where 33 00:02:14,023 --> 00:02:16,514 the list item is set up in the loop. 34 00:02:16,514 --> 00:02:18,515 So line 23. 35 00:02:18,515 --> 00:02:22,376 We can do this by clicking on 23 and to remove a breakpoint, 36 00:02:22,376 --> 00:02:25,090 I'll just click it again. 37 00:02:25,090 --> 00:02:26,460 And I'll put it back. 38 00:02:26,460 --> 00:02:30,319 Now any time the JavaScript interpreter reaches this point, 39 00:02:30,319 --> 00:02:31,960 it will pause right here. 40 00:02:31,960 --> 00:02:37,154 You don't need to step through each line of code from 17 down to 23 either. 41 00:02:37,154 --> 00:02:41,950 The play button right here and pauses the interpreter letting it run until 42 00:02:41,950 --> 00:02:45,580 it reaches a breakpoint or the end of the program. 43 00:02:45,580 --> 00:02:50,370 I'll press the play button now, see how it jump down there? 44 00:02:50,370 --> 00:02:53,460 Now we're inside the first time through the loop. 45 00:02:53,460 --> 00:02:58,702 You can tell because i is set to 0. 46 00:02:58,702 --> 00:03:03,076 Also, if we hover over the li element in the scope window, 47 00:03:03,076 --> 00:03:06,934 you can see the first name highlighted on the page. 48 00:03:06,934 --> 00:03:11,686 Because our bug only affects unchecked guests, though, we might want to jump 49 00:03:11,686 --> 00:03:15,980 ahead until we get to the fourth guest to see what is happening. 50 00:03:15,980 --> 00:03:23,106 If I press play again, the loop will cycle around and land on the breakpoint. 51 00:03:23,106 --> 00:03:29,010 Now i: 1 and li points to the second list item. 52 00:03:29,010 --> 00:03:36,479 I'll press play two more times, and now we've landed on our unchecked guest. 53 00:03:36,479 --> 00:03:40,481 Let's say we had a list of 200 guests though and 54 00:03:40,481 --> 00:03:43,734 our bug only showed up at number 175. 55 00:03:43,734 --> 00:03:47,650 That would mean we'd need to press the play button 175 times. 56 00:03:49,390 --> 00:03:52,950 Fortunately, dev tools also lets us set a breakpoint 57 00:03:52,950 --> 00:03:55,950 that will only pause if a certain condition is met. 58 00:03:57,020 --> 00:03:59,570 Let's refresh this page and I'll show you how it works. 59 00:04:01,660 --> 00:04:07,460 I'll go ahead and check the box to pause the execution at the top of our handler. 60 00:04:07,460 --> 00:04:10,442 I'll click this breakpoint off. 61 00:04:10,442 --> 00:04:16,859 Then I'll right-click line 23 and choose Add conditional breakpoint. 62 00:04:16,859 --> 00:04:21,620 I can enter any condition here like 63 00:04:21,620 --> 00:04:28,420 lI.classname is not equal to responded. 64 00:04:28,420 --> 00:04:32,450 Now when I hit play, the loop won't stop until we get to the first 65 00:04:32,450 --> 00:04:35,780 lI element without a responded class. 66 00:04:35,780 --> 00:04:40,080 I'll hit enter to set our breakpoint, and now I'll hit play. 67 00:04:41,210 --> 00:04:45,602 And we can verify it worked by hovering over the value and 68 00:04:45,602 --> 00:04:48,881 you can see the fourth li is highlighted. 69 00:04:48,881 --> 00:04:51,195 Now let me just show you one thing. 70 00:04:51,195 --> 00:04:56,200 If I edit the breakpoint, we could've added any expression in here. 71 00:04:56,200 --> 00:05:01,663 The same thing would've happened if we'd used i is strictly equal to 3, 72 00:05:01,663 --> 00:05:03,230 for example. 73 00:05:03,230 --> 00:05:07,850 If possible, though, it's better to pick an expression that gets you directly to 74 00:05:07,850 --> 00:05:09,850 the situation you're diagnosing. 75 00:05:11,660 --> 00:05:15,300 In this case, it's when an element is missing a certain class name. 76 00:05:17,100 --> 00:05:19,050 I'll step forward now and 77 00:05:19,050 --> 00:05:23,890 we'll expect to jump into the else clause of this if statement. 78 00:05:23,890 --> 00:05:27,730 That's because the current list item's class name is not responded. 79 00:05:29,850 --> 00:05:32,310 But the first branch is executing. 80 00:05:32,310 --> 00:05:37,053 Moreover, the style of the element has changed and over in scope, 81 00:05:37,053 --> 00:05:40,790 I can see that the class of responded has been added. 82 00:05:40,790 --> 00:05:42,109 Can you spot the bug? 83 00:05:44,468 --> 00:05:48,080 The single equal sign is an assignment operator. 84 00:05:48,080 --> 00:05:51,020 It assigns the class to that element. 85 00:05:51,020 --> 00:05:55,700 But it should be testing the condition using an equality operator. 86 00:05:55,700 --> 00:05:59,120 So this should be three equal signs and not just one. 87 00:05:59,120 --> 00:06:02,810 If you're wondering why three and not two, see the teacher's notes for 88 00:06:02,810 --> 00:06:05,364 a more detailed discussion of the two operators. 89 00:06:05,364 --> 00:06:09,934 I'll refresh, switch over to my editor. 90 00:06:09,934 --> 00:06:14,617 And on line 23, I'll add the two more equals signs and save and 91 00:06:14,617 --> 00:06:16,110 I'll switch back. 92 00:06:18,820 --> 00:06:21,610 And now I'll disable all my breakpoints so 93 00:06:21,610 --> 00:06:25,690 I can see if it's fixed or not and I'll check the hide box. 94 00:06:28,205 --> 00:06:29,290 I need to refresh. 95 00:06:30,930 --> 00:06:31,980 Now I'll check the hide box. 96 00:06:33,130 --> 00:06:34,202 And you can see it works. 97 00:06:37,311 --> 00:06:40,350 Let's review what we learned in this video. 98 00:06:40,350 --> 00:06:45,070 We looked at two kinds of break points you can set on lines of your program. 99 00:06:45,070 --> 00:06:49,500 A line breakpoint, and a conditional line breakpoint. 100 00:06:49,500 --> 00:06:53,530 You'll probably use these a lot in your debugging process because they're so 101 00:06:53,530 --> 00:06:54,980 versatile. 102 00:06:54,980 --> 00:06:58,180 In the next video I'll show you how to debug functions.