1
00:00:00,220 --> 00:00:05,390
So far, none of the bugs we fixed
were actual JavaScript errors.

2
00:00:05,390 --> 00:00:07,840
We were getting unexpected behavior, but

3
00:00:07,840 --> 00:00:12,470
the JavaScript interpreter didn't
see any problems with our code.

4
00:00:12,470 --> 00:00:15,580
Often though, errors will accompany bugs.

5
00:00:15,580 --> 00:00:20,740
As you'll see, this can be a great thing
that can help us find the bug faster.

6
00:00:20,740 --> 00:00:24,400
Errors after all are designed
to help troubleshoot code.

7
00:00:24,400 --> 00:00:28,770
In the app, I'll click the remove
button on one of the names.

8
00:00:28,770 --> 00:00:30,030
Nothing happened.

9
00:00:30,030 --> 00:00:35,900
And if I look in dev tools, I can see this
red x up in the upper right-hand corner.

10
00:00:35,900 --> 00:00:38,190
This tells me an error occurred.

11
00:00:38,190 --> 00:00:42,150
If I click on the x,
a console appears in the sources window.

12
00:00:43,230 --> 00:00:47,240
This is the same console as
the one in the console tab.

13
00:00:47,240 --> 00:00:52,460
Sometimes it's handy to have a console
open when you're viewing other tabs.

14
00:00:52,460 --> 00:00:55,190
To make this second
console window appear and

15
00:00:55,190 --> 00:00:59,490
disappear just press the Escape
key on your keyboard.

16
00:00:59,490 --> 00:01:02,480
Let me show you another trick for
working with DevTools.

17
00:01:02,480 --> 00:01:06,080
You can change where Chrome
displays its DevTools.

18
00:01:06,080 --> 00:01:09,290
They can appear in the bottom
of the window like they are now,

19
00:01:09,290 --> 00:01:14,160
on the side of the window, or even in
their own separate floating window.

20
00:01:14,160 --> 00:01:17,800
To do that go to the upper
right hand corner and

21
00:01:17,800 --> 00:01:21,500
choose one of the three
options next to dock side.

22
00:01:21,500 --> 00:01:26,477
Here's the side window view and
here's the floating window.

23
00:01:31,239 --> 00:01:36,520
Back to our error, this error tells us
that removeChild couldn't be called.

24
00:01:37,580 --> 00:01:40,776
The error occurred on line 87.

25
00:01:40,776 --> 00:01:45,080
If I click the link,
I can jump there in the document viewer.

26
00:01:46,310 --> 00:01:51,776
The error says the parameter we're
passing in to remove child is not a node.

27
00:01:54,760 --> 00:01:56,280
So what is LI then?

28
00:01:57,370 --> 00:02:00,630
Once an error has been thrown
the interpreter stops running.

29
00:02:00,630 --> 00:02:05,430
So we can't use these tools to look
through the call stack or the scope.

30
00:02:05,430 --> 00:02:07,920
If we knew how remove was being called for

31
00:02:07,920 --> 00:02:12,990
example, we might get insight into
what value is getting passed in here.

32
00:02:12,990 --> 00:02:17,640
Let's set a breakpoint to freeze
the program just before the error occurs.

33
00:02:17,640 --> 00:02:22,200
That way, we can inspect the state
that is causing this error.

34
00:02:22,200 --> 00:02:27,100
All we need to do is click
the pause exceptions button.

35
00:02:27,100 --> 00:02:29,370
It's blue when it's enabled.

36
00:02:29,370 --> 00:02:32,780
Now whenever the interpreter
encounters an error or

37
00:02:32,780 --> 00:02:36,580
exception it will pause just
before the error is thrown.

38
00:02:38,020 --> 00:02:41,820
I'll refresh and click on a remove button.

39
00:02:43,200 --> 00:02:50,200
Now we can see that LI is undefined and
removes local scope.

40
00:02:51,530 --> 00:02:55,810
You can also see the error object
that is about to be thrown.

41
00:02:55,810 --> 00:02:59,890
Let's move down the stack and
see how this remove function was called.

42
00:03:01,820 --> 00:03:06,460
The remove function is inside
this nameActions object,

43
00:03:08,361 --> 00:03:13,195
Right here, and
it's being accessed by the action variable

44
00:03:13,195 --> 00:03:18,070
which holds the string remove,
then it is called.

45
00:03:18,070 --> 00:03:23,860
But no argument is passed in,
which is why li undefined inside remove.

46
00:03:24,940 --> 00:03:28,210
If we go back to remove and
look at the scope and remove,

47
00:03:29,230 --> 00:03:34,240
notice that even though li is
undefined locally, in the block scope,

48
00:03:34,240 --> 00:03:39,518
which is the scope immediately
outside this function, li is defined.

49
00:03:39,518 --> 00:03:43,890
So because li exists locally
it is blocking the remove

50
00:03:43,890 --> 00:03:48,770
functions ability to use
the variable from the outer scope.

51
00:03:48,770 --> 00:03:53,020
If you're still new to function scoping
this might be a little confusing.

52
00:03:53,020 --> 00:03:57,110
I'm posting some resources in
the teacher's notes for further research.

53
00:03:57,110 --> 00:03:58,330
For now though,

54
00:03:58,330 --> 00:04:03,100
just know that if we delete this
li parameter from our function,

55
00:04:03,100 --> 00:04:09,830
the remove function will regain access
to this li variable and its outer scope.

56
00:04:09,830 --> 00:04:11,850
In fact, let's just see the difference.

57
00:04:12,870 --> 00:04:16,690
I'll refresh this,
move over to our text editor.

58
00:04:17,720 --> 00:04:24,750
And down on line 86 we'll remove that
parameter from the remove function.

59
00:04:26,080 --> 00:04:29,980
Save and switch back to our DevTools.

60
00:04:29,980 --> 00:04:35,200
Now before I refresh and hit remove,
this line is no longer going to

61
00:04:35,200 --> 00:04:40,610
trigger an error so I'll just put a break
point so we can see what's happening now.

62
00:04:40,610 --> 00:04:44,680
So refresh and click remove, and

63
00:04:44,680 --> 00:04:48,512
now you can see there is
no li in the local scope.

64
00:04:48,512 --> 00:04:53,380
Remove will now need to get
the value from the block scope.

65
00:04:55,150 --> 00:04:58,970
If I remove the break point and
press play.

66
00:05:01,040 --> 00:05:03,360
You can see that list item disappears now.

67
00:05:05,500 --> 00:05:08,460
Aside from getting some more
practice with the call stack and

68
00:05:08,460 --> 00:05:12,860
scope windows,
you learned how to pause on exceptions.

69
00:05:12,860 --> 00:05:16,180
You'll probably use this
feature a lot in debugging, and

70
00:05:16,180 --> 00:05:19,490
your debugging workflow will
greatly improve as a result.