Preview
Video Player
00:00
00:00
Debugging Exception Errors
5:19Often JavaScript exceptions (errors) will accompany bugs. Learning to break on errors can save you a lot of time.
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