1
00:00:00,180 --> 00:00:03,700
You can open a workspace on
this page to follow along.

2
00:00:03,700 --> 00:00:08,720
Or download the project files below and
serve them from your local computer.

3
00:00:08,720 --> 00:00:11,080
I have the app open here,

4
00:00:11,080 --> 00:00:17,210
when I click to confirm a guest nothing
happens, this list item should highlight.

5
00:00:17,210 --> 00:00:19,490
When I uncheck confirmed names,

6
00:00:19,490 --> 00:00:22,960
they don't lose their highlighting,
this is our first bug.

7
00:00:24,040 --> 00:00:27,870
Let's open the developer tools
to dig into these problems.

8
00:00:27,870 --> 00:00:34,360
You can get there from the menu,
going to More Tools, Developer Tools.

9
00:00:35,670 --> 00:00:40,600
But I like to use the keyboard shortcut
Cmd+Option+I, if you're on a PC,

10
00:00:40,600 --> 00:00:43,230
you'll use Ctrl+Shift+I.

11
00:00:43,230 --> 00:00:45,620
Along the top of
the Developer Tools window,

12
00:00:45,620 --> 00:00:48,780
are tabs that control what
information you see below.

13
00:00:51,280 --> 00:00:56,660
You may have seen the Elements or the
Console tab in other Treehouse courses.

14
00:00:56,660 --> 00:00:59,920
We'll use these from time to time,
but our main tab for

15
00:00:59,920 --> 00:01:02,030
this course will be the Sources tab.

16
00:01:03,300 --> 00:01:07,316
Under this tab you'll see three panes,
if they aren't visible,

17
00:01:07,316 --> 00:01:09,764
try expanding them with these buttons.

18
00:01:12,496 --> 00:01:16,220
In the left pane you can see a file tree.

19
00:01:16,220 --> 00:01:19,666
You can navigate through the assets
the browser downloaded here.

20
00:01:19,666 --> 00:01:21,998
Here's app.js, for

21
00:01:21,998 --> 00:01:27,750
example, when I click on it, you can see
the contents show up in the middle pane.

22
00:01:27,750 --> 00:01:33,430
If I click on index.html,
you can view that file in the middle pane.

23
00:01:33,430 --> 00:01:37,045
If you don't see it,
try refreshing the browser.

24
00:01:37,045 --> 00:01:42,300
DevTools sometimes needs a refresh after
you first open it to reset itself.

25
00:01:42,300 --> 00:01:45,220
These are the files
the workspace is serving.

26
00:01:45,220 --> 00:01:47,140
If you're on your local computer,

27
00:01:47,140 --> 00:01:50,950
you'll see a name corresponding to how
you're serving the app right here.

28
00:01:52,120 --> 00:01:57,023
Below, there are assets that are being
pulled in from other sources

29
00:01:57,023 --> 00:01:59,961
such as Web Fonts coming in from Google.

30
00:02:05,526 --> 00:02:10,570
In the right pane, we have a number of
tools that we can use to debug our code.

31
00:02:10,570 --> 00:02:12,740
We'll use these in a moment.

32
00:02:12,740 --> 00:02:16,370
First, though, let's think about
how to tackle the problem.

33
00:02:16,370 --> 00:02:20,770
The bug happens when you check and
uncheck these boxes.

34
00:02:20,770 --> 00:02:24,800
We're triggering the change event,
but the program isn't responding.

35
00:02:24,800 --> 00:02:28,740
So let's pause the execution
when the change event occurs.

36
00:02:28,740 --> 00:02:32,270
We can do this by setting
what's called a breakpoint,

37
00:02:32,270 --> 00:02:35,670
the spot in our code we
want to pause our program.

38
00:02:35,670 --> 00:02:40,850
We'll set a breakpoint by expanding
this list of Event Listener breakpoints.

39
00:02:40,850 --> 00:02:45,115
On the right, these are all
the types of events we can break on.

40
00:02:45,115 --> 00:02:50,850
I'll open the Control events which
includes events from form controls and

41
00:02:50,850 --> 00:02:52,280
select change.

42
00:02:53,760 --> 00:02:56,540
Now watch what happens when
I click on a checkbox.

43
00:02:58,540 --> 00:03:04,820
The screen dims, and line 67 is
highlighted in app.js in the viewer below,

44
00:03:04,820 --> 00:03:07,180
showing where the program paused.

45
00:03:07,180 --> 00:03:11,450
That's the spot in the code where
the listener function begins.

46
00:03:11,450 --> 00:03:13,300
Look in the right pane under Scope.

47
00:03:15,210 --> 00:03:20,200
Here is a list of the variables that
exist in the current function scope.

48
00:03:20,200 --> 00:03:24,790
And because we are paused before any
lines of the handler have executed,

49
00:03:24,790 --> 00:03:29,980
none of the three variables listed here
have been assigned, so they're undefined.

50
00:03:29,980 --> 00:03:33,950
As we move forward through the function
and these become assigned values,

51
00:03:33,950 --> 00:03:37,970
though, you'll see this window will
update to reflect the current state.

52
00:03:39,050 --> 00:03:44,950
e, the event object was passed in when we
triggered the event, and so it is defined.

53
00:03:44,950 --> 00:03:48,420
And we can browse through
the object in its current state.

54
00:03:48,420 --> 00:03:52,700
In other words, the object's properties
at the moment the program paused.

55
00:03:54,050 --> 00:03:57,470
You also may notice this keyword here.

56
00:03:57,470 --> 00:04:01,980
This is present in all JavaScript
functions and is a big topic.

57
00:04:01,980 --> 00:04:04,590
You can safely ignore it for
this course, but

58
00:04:04,590 --> 00:04:09,200
if you're curious, I'll post some links in
the teacher's notes for further research.

59
00:04:09,200 --> 00:04:11,590
To move forward through the function,

60
00:04:11,590 --> 00:04:16,630
we'll step through each line
using this button, Step over.

61
00:04:16,630 --> 00:04:20,830
If I click it,
you can see the next line is highlighted.

62
00:04:20,830 --> 00:04:24,550
But notice,
the checkbox variable is still undefined.

63
00:04:24,550 --> 00:04:28,830
That's because lines are highlighted
before they are executed.

64
00:04:28,830 --> 00:04:34,170
If I step to the next line,
you can see checkbox now has a value.

65
00:04:34,170 --> 00:04:36,540
Notice, the value is showing
up in the viewer too.

66
00:04:39,190 --> 00:04:43,820
You can also hover over the check box
variable to get a window into its content.

67
00:04:45,460 --> 00:04:51,800
If we step past the current line,
you can see the value here is a label,

68
00:04:51,800 --> 00:04:55,810
not a list item as its
variable name suggests.

69
00:04:55,810 --> 00:05:01,570
Looking ahead to line 73 the labels
class will be set to responded.

70
00:05:02,660 --> 00:05:06,977
Let's look at the label in the DOM to see
how it fits into the page's structure.

71
00:05:06,977 --> 00:05:11,275
Clicking on label takes
us to the Elements tab,

72
00:05:11,275 --> 00:05:16,135
where we can see that the list
item is the parent of the label.

73
00:05:16,135 --> 00:05:19,605
You can also see the other list
items with the correct styling

74
00:05:19,605 --> 00:05:21,955
all have a class of responded.

75
00:05:21,955 --> 00:05:25,305
So the bug appears to be
that the responded class is

76
00:05:25,305 --> 00:05:28,675
being set on the label element,
not the list item.

77
00:05:29,700 --> 00:05:35,600
Let's switch back to Sources and look at
how listItem is being declared in line 69.

78
00:05:35,600 --> 00:05:40,320
We just saw that we want to target
the parent of the label element.

79
00:05:40,320 --> 00:05:43,490
So we need to use parent
node twice in this line.

80
00:05:43,490 --> 00:05:44,680
In other words,

81
00:05:44,680 --> 00:05:50,050
the listItem is the grandparent of
the checkbox in the HTML structure.

82
00:05:50,050 --> 00:05:55,850
So, we need to traverse two levels
upward in the DOM tree, not just one.

83
00:05:55,850 --> 00:06:01,420
In this paused state, we can set the
listItem variable to the correct element.

84
00:06:01,420 --> 00:06:04,870
Then step forward to see
if that fixes our code.

85
00:06:04,870 --> 00:06:08,370
I'll just copy this assignment on line 69

86
00:06:13,286 --> 00:06:16,310
And switch over to the console and
paste it in.

87
00:06:18,570 --> 00:06:25,110
Now, I'll add another parentNode property
on the end of this and hit Return.

88
00:06:26,460 --> 00:06:29,510
This way, we're sort of rewriting line 69,

89
00:06:29,510 --> 00:06:32,710
before we continue on to
execute the lines that follow.

90
00:06:33,790 --> 00:06:36,520
If we switch back to the Sources tab,

91
00:06:36,520 --> 00:06:40,570
you can see it still says
listItem is a label element.

92
00:06:40,570 --> 00:06:43,350
Even though we just
changed it in the console.

93
00:06:43,350 --> 00:06:46,760
But that's just because these
values haven't refreshed.

94
00:06:46,760 --> 00:06:52,380
If I step forward,
you should see these values do refresh,

95
00:06:52,380 --> 00:06:55,740
and listItem does hold
a list item element.

96
00:06:55,740 --> 00:06:58,240
Now when we step past line 73,

97
00:06:58,240 --> 00:07:01,985
the responded class will be
assigned to the listItem.

98
00:07:04,970 --> 00:07:12,390
When that happens, you should see this
item being highlighted, and you do.

99
00:07:13,490 --> 00:07:17,240
Now we know we just need to
repeat what we did in the console

100
00:07:17,240 --> 00:07:19,580
to the code in the text editor.

101
00:07:19,580 --> 00:07:20,440
In other words,

102
00:07:20,440 --> 00:07:26,530
we need to rewrite line 69 to traverse
to the check boxes grandparent element.

103
00:07:26,530 --> 00:07:32,410
I'll switch over to my editor and
just go down to line 69.

104
00:07:32,410 --> 00:07:36,290
And we seem to be completely frozen here.

105
00:07:37,410 --> 00:07:42,400
Well, I just wanted to show you this,
because DevTools actually

106
00:07:42,400 --> 00:07:47,440
freezes other windows when
it freezes one window.

107
00:07:47,440 --> 00:07:50,020
So what we need to do is refresh this.

108
00:07:51,770 --> 00:07:56,530
And then that will free up this window,
and we can go down and make our change.

109
00:07:58,720 --> 00:08:03,350
So if you're having that issue, just try
refreshing your other window when DevTools

110
00:08:03,350 --> 00:08:07,080
is open, and that should fix it.

111
00:08:07,080 --> 00:08:10,510
So on line 69,
we'll add that extra parentNode.

112
00:08:12,110 --> 00:08:19,180
To traverse up to the listItem element,
and we'll save and switch back.

113
00:08:19,180 --> 00:08:23,320
Now I can test this out in Chrome
by deactivating my breakpoint and

114
00:08:23,320 --> 00:08:24,478
refreshing the page.

115
00:08:24,478 --> 00:08:28,500
To deactivate breakpoints,
I can press this button.

116
00:08:30,130 --> 00:08:34,890
I just have one, but if I had others,
they would be disabled also.

117
00:08:34,890 --> 00:08:38,760
I can click it again to re-enable
all my current breakpoints.

118
00:08:38,760 --> 00:08:43,070
But I want them disabled, so
I can see if this bug is fixed.

119
00:08:43,070 --> 00:08:50,650
Now, after refreshing the page,
you can see that our

120
00:08:50,650 --> 00:08:55,890
styles are being applied correctly when
we check and check the confirmed boxes.

121
00:08:55,890 --> 00:08:58,350
Let's review what we learned so far.

122
00:08:58,350 --> 00:09:02,150
You got an overview of
the Sources tab in DevTools.

123
00:09:02,150 --> 00:09:06,650
You set your first breakpoint on a browser
event, you know where to look for

124
00:09:06,650 --> 00:09:10,210
variables and their values in
the executing function scope.

125
00:09:11,260 --> 00:09:15,690
You can step through the function line
by line and watch the values change.

126
00:09:16,760 --> 00:09:21,270
We got to use the console to change
the value of a variable while the program

127
00:09:21,270 --> 00:09:25,280
was paused and
observe how that affected the execution.

128
00:09:25,280 --> 00:09:27,120
And to test our fix,

129
00:09:27,120 --> 00:09:31,810
we disabled the breakpoint by toggling
it off with the click of a button.

130
00:09:31,810 --> 00:09:34,460
These are some of the basics of debugging.

131
00:09:34,460 --> 00:09:38,880
I would recommend pausing here,
removing the fix we applied on line 69,

132
00:09:38,880 --> 00:09:43,120
and trying to work through this
process again on your own.

133
00:09:43,120 --> 00:09:47,245
This can really help you solidify
the techniques we just learned.

134
00:09:47,245 --> 00:09:49,565
The better you are at navigating DevTools,

135
00:09:49,565 --> 00:09:54,035
the more efficient you'll be tracking
down real bugs when they come up.

136
00:09:54,035 --> 00:09:57,845
In the next video, we'll look at
some other ways to set breakpoints.