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
Often JavaScript exceptions (errors) will accompany bugs. Learning to break on errors can save you a lot of time.
Chrome Update
Since the recording of this video, the 'Pause on Exception' button, as shown, has been removed. The same feature can now be found under the 'Breakpoints' dropdown. Here, you will find two checkboxes to pause on either caught or uncaught exceptions.
Function Scope
- Variable Scope video from Treehouse's JavaScript Basics course
- Understanding Closures in JavaScript is a more advanced Treehouse workshop that digs deeper into scope, if you're interested.
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
So far, none of the bugs we fixed
were actual JavaScript errors.
0:00
We were getting unexpected behavior, but
0:05
the JavaScript interpreter didn't
see any problems with our code.
0:07
Often though, errors will accompany bugs.
0:12
As you'll see, this can be a great thing
that can help us find the bug faster.
0:15
Errors after all are designed
to help troubleshoot code.
0:20
In the app, I'll click the remove
button on one of the names.
0:24
Nothing happened.
0:28
And if I look in dev tools, I can see this
red x up in the upper right-hand corner.
0:30
This tells me an error occurred.
0:35
If I click on the x,
a console appears in the sources window.
0:38
This is the same console as
the one in the console tab.
0:43
Sometimes it's handy to have a console
open when you're viewing other tabs.
0:47
To make this second
console window appear and
0:52
disappear just press the Escape
key on your keyboard.
0:55
Let me show you another trick for
working with DevTools.
0:59
You can change where Chrome
displays its DevTools.
1:02
They can appear in the bottom
of the window like they are now,
1:06
on the side of the window, or even in
their own separate floating window.
1:09
To do that go to the upper
right hand corner and
1:14
choose one of the three
options next to dock side.
1:17
Here's the side window view and
here's the floating window.
1:21
Back to our error, this error tells us
that removeChild couldn't be called.
1:31
The error occurred on line 87.
1:37
If I click the link,
I can jump there in the document viewer.
1:40
The error says the parameter we're
passing in to remove child is not a node.
1:46
So what is LI then?
1:54
Once an error has been thrown
the interpreter stops running.
1:57
So we can't use these tools to look
through the call stack or the scope.
2:00
If we knew how remove was being called for
2:05
example, we might get insight into
what value is getting passed in here.
2:07
Let's set a breakpoint to freeze
the program just before the error occurs.
2:12
That way, we can inspect the state
that is causing this error.
2:17
All we need to do is click
the pause exceptions button.
2:22
It's blue when it's enabled.
2:27
Now whenever the interpreter
encounters an error or
2:29
exception it will pause just
before the error is thrown.
2:32
I'll refresh and click on a remove button.
2:38
Now we can see that LI is undefined and
removes local scope.
2:43
You can also see the error object
that is about to be thrown.
2:51
Let's move down the stack and
see how this remove function was called.
2:55
The remove function is inside
this nameActions object,
3:01
Right here, and
it's being accessed by the action variable
3:08
which holds the string remove,
then it is called.
3:13
But no argument is passed in,
which is why li undefined inside remove.
3:18
If we go back to remove and
look at the scope and remove,
3:24
notice that even though li is
undefined locally, in the block scope,
3:29
which is the scope immediately
outside this function, li is defined.
3:34
So because li exists locally
it is blocking the remove
3:39
functions ability to use
the variable from the outer scope.
3:43
If you're still new to function scoping
this might be a little confusing.
3:48
I'm posting some resources in
the teacher's notes for further research.
3:53
For now though,
3:57
just know that if we delete this
li parameter from our function,
3:58
the remove function will regain access
to this li variable and its outer scope.
4:03
In fact, let's just see the difference.
4:09
I'll refresh this,
move over to our text editor.
4:12
And down on line 86 we'll remove that
parameter from the remove function.
4:17
Save and switch back to our DevTools.
4:26
Now before I refresh and hit remove,
this line is no longer going to
4:29
trigger an error so I'll just put a break
point so we can see what's happening now.
4:35
So refresh and click remove, and
4:40
now you can see there is
no li in the local scope.
4:44
Remove will now need to get
the value from the block scope.
4:48
If I remove the break point and
press play.
4:55
You can see that list item disappears now.
5:01
Aside from getting some more
practice with the call stack and
5:05
scope windows,
you learned how to pause on exceptions.
5:08
You'll probably use this
feature a lot in debugging, and
5:12
your debugging workflow will
greatly improve as a result.
5:16
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