Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Debugging JavaScript in the Browser!
You have completed Debugging JavaScript in the Browser!
Preview
Let's walk through the basics of debugging JavaScript in the browser.
Covered in this Video
- Overview of Sources tab in DevTools
- Set an Event Listener Breakpoint
- All variables and values in current scope
- Step over button, seeing code execute line-by-line
- Changing value of a variable while program is paused
- Disable/enable all breakpoints
JavaScript's this keyword
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You can open a workspace on
this page to follow along.
0:00
Or download the project files below and
serve them from your local computer.
0:03
I have the app open here,
0:08
when I click to confirm a guest nothing
happens, this list item should highlight.
0:11
When I uncheck confirmed names,
0:17
they don't lose their highlighting,
this is our first bug.
0:19
Let's open the developer tools
to dig into these problems.
0:24
You can get there from the menu,
going to More Tools, Developer Tools.
0:27
But I like to use the keyboard shortcut
Cmd+Option+I, if you're on a PC,
0:35
you'll use Ctrl+Shift+I.
0:40
Along the top of
the Developer Tools window,
0:43
are tabs that control what
information you see below.
0:45
You may have seen the Elements or the
Console tab in other Treehouse courses.
0:51
We'll use these from time to time,
but our main tab for
0:56
this course will be the Sources tab.
0:59
Under this tab you'll see three panes,
if they aren't visible,
1:03
try expanding them with these buttons.
1:07
In the left pane you can see a file tree.
1:12
You can navigate through the assets
the browser downloaded here.
1:16
Here's app.js, for
1:19
example, when I click on it, you can see
the contents show up in the middle pane.
1:21
If I click on index.html,
you can view that file in the middle pane.
1:27
If you don't see it,
try refreshing the browser.
1:33
DevTools sometimes needs a refresh after
you first open it to reset itself.
1:37
These are the files
the workspace is serving.
1:42
If you're on your local computer,
1:45
you'll see a name corresponding to how
you're serving the app right here.
1:47
Below, there are assets that are being
pulled in from other sources
1:52
such as Web Fonts coming in from Google.
1:57
In the right pane, we have a number of
tools that we can use to debug our code.
2:05
We'll use these in a moment.
2:10
First, though, let's think about
how to tackle the problem.
2:12
The bug happens when you check and
uncheck these boxes.
2:16
We're triggering the change event,
but the program isn't responding.
2:20
So let's pause the execution
when the change event occurs.
2:24
We can do this by setting
what's called a breakpoint,
2:28
the spot in our code we
want to pause our program.
2:32
We'll set a breakpoint by expanding
this list of Event Listener breakpoints.
2:35
On the right, these are all
the types of events we can break on.
2:40
I'll open the Control events which
includes events from form controls and
2:45
select change.
2:50
Now watch what happens when
I click on a checkbox.
2:53
The screen dims, and line 67 is
highlighted in app.js in the viewer below,
2:58
showing where the program paused.
3:04
That's the spot in the code where
the listener function begins.
3:07
Look in the right pane under Scope.
3:11
Here is a list of the variables that
exist in the current function scope.
3:15
And because we are paused before any
lines of the handler have executed,
3:20
none of the three variables listed here
have been assigned, so they're undefined.
3:24
As we move forward through the function
and these become assigned values,
3:29
though, you'll see this window will
update to reflect the current state.
3:33
e, the event object was passed in when we
triggered the event, and so it is defined.
3:39
And we can browse through
the object in its current state.
3:44
In other words, the object's properties
at the moment the program paused.
3:48
You also may notice this keyword here.
3:54
This is present in all JavaScript
functions and is a big topic.
3:57
You can safely ignore it for
this course, but
4:01
if you're curious, I'll post some links in
the teacher's notes for further research.
4:04
To move forward through the function,
4:09
we'll step through each line
using this button, Step over.
4:11
If I click it,
you can see the next line is highlighted.
4:16
But notice,
the checkbox variable is still undefined.
4:20
That's because lines are highlighted
before they are executed.
4:24
If I step to the next line,
you can see checkbox now has a value.
4:28
Notice, the value is showing
up in the viewer too.
4:34
You can also hover over the check box
variable to get a window into its content.
4:39
If we step past the current line,
you can see the value here is a label,
4:45
not a list item as its
variable name suggests.
4:51
Looking ahead to line 73 the labels
class will be set to responded.
4:55
Let's look at the label in the DOM to see
how it fits into the page's structure.
5:02
Clicking on label takes
us to the Elements tab,
5:06
where we can see that the list
item is the parent of the label.
5:11
You can also see the other list
items with the correct styling
5:16
all have a class of responded.
5:19
So the bug appears to be
that the responded class is
5:21
being set on the label element,
not the list item.
5:25
Let's switch back to Sources and look at
how listItem is being declared in line 69.
5:29
We just saw that we want to target
the parent of the label element.
5:35
So we need to use parent
node twice in this line.
5:40
In other words,
5:43
the listItem is the grandparent of
the checkbox in the HTML structure.
5:44
So, we need to traverse two levels
upward in the DOM tree, not just one.
5:50
In this paused state, we can set the
listItem variable to the correct element.
5:55
Then step forward to see
if that fixes our code.
6:01
I'll just copy this assignment on line 69
6:04
And switch over to the console and
paste it in.
6:13
Now, I'll add another parentNode property
on the end of this and hit Return.
6:18
This way, we're sort of rewriting line 69,
6:26
before we continue on to
execute the lines that follow.
6:29
If we switch back to the Sources tab,
6:33
you can see it still says
listItem is a label element.
6:36
Even though we just
changed it in the console.
6:40
But that's just because these
values haven't refreshed.
6:43
If I step forward,
you should see these values do refresh,
6:46
and listItem does hold
a list item element.
6:52
Now when we step past line 73,
6:55
the responded class will be
assigned to the listItem.
6:58
When that happens, you should see this
item being highlighted, and you do.
7:04
Now we know we just need to
repeat what we did in the console
7:13
to the code in the text editor.
7:17
In other words,
7:19
we need to rewrite line 69 to traverse
to the check boxes grandparent element.
7:20
I'll switch over to my editor and
just go down to line 69.
7:26
And we seem to be completely frozen here.
7:32
Well, I just wanted to show you this,
because DevTools actually
7:37
freezes other windows when
it freezes one window.
7:42
So what we need to do is refresh this.
7:47
And then that will free up this window,
and we can go down and make our change.
7:51
So if you're having that issue, just try
refreshing your other window when DevTools
7:58
is open, and that should fix it.
8:03
So on line 69,
we'll add that extra parentNode.
8:07
To traverse up to the listItem element,
and we'll save and switch back.
8:12
Now I can test this out in Chrome
by deactivating my breakpoint and
8:19
refreshing the page.
8:23
To deactivate breakpoints,
I can press this button.
8:24
I just have one, but if I had others,
they would be disabled also.
8:30
I can click it again to re-enable
all my current breakpoints.
8:34
But I want them disabled, so
I can see if this bug is fixed.
8:38
Now, after refreshing the page,
you can see that our
8:43
styles are being applied correctly when
we check and check the confirmed boxes.
8:50
Let's review what we learned so far.
8:55
You got an overview of
the Sources tab in DevTools.
8:58
You set your first breakpoint on a browser
event, you know where to look for
9:02
variables and their values in
the executing function scope.
9:06
You can step through the function line
by line and watch the values change.
9:11
We got to use the console to change
the value of a variable while the program
9:16
was paused and
observe how that affected the execution.
9:21
And to test our fix,
9:25
we disabled the breakpoint by toggling
it off with the click of a button.
9:27
These are some of the basics of debugging.
9:31
I would recommend pausing here,
removing the fix we applied on line 69,
9:34
and trying to work through this
process again on your own.
9:38
This can really help you solidify
the techniques we just learned.
9:43
The better you are at navigating DevTools,
9:47
the more efficient you'll be tracking
down real bugs when they come up.
9:49
In the next video, we'll look at
some other ways to set breakpoints.
9:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up