Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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