1
00:00:00,170 --> 00:00:05,060
There are a few more bugs in this program,
for example when I submit

2
00:00:05,060 --> 00:00:09,615
a new name to the RSVP app,

3
00:00:09,615 --> 00:00:15,990
the new invitee reads text
instead of the name I entered.

4
00:00:17,130 --> 00:00:21,790
Any string of characters
results in the same behavior.

5
00:00:23,180 --> 00:00:24,770
Let's dig in and see what's wrong here.

6
00:00:26,450 --> 00:00:30,630
To jump right to the start of the handler,
we can set an event listener breakpoint.

7
00:00:32,110 --> 00:00:37,140
In previous videos we were debugging
check boxes but this time it's a form.

8
00:00:38,340 --> 00:00:39,930
So we'll use the submit event.

9
00:00:42,100 --> 00:00:49,150
If I click Submit, we jump right to
the start of the submit handler.

10
00:00:50,480 --> 00:00:55,610
Okay, when we submit the form
the program creates a new invitee

11
00:00:55,610 --> 00:00:59,400
which is represented by
a list item in our HTML.

12
00:00:59,400 --> 00:01:03,700
This create a li function
may be where the problem is.

13
00:01:03,700 --> 00:01:09,690
So let's look there first, I'll set
a breakpoint at line 63 and jump forward.

14
00:01:10,900 --> 00:01:15,380
If I click the step over button
though this function executes and

15
00:01:15,380 --> 00:01:18,150
we move to line 64.

16
00:01:18,150 --> 00:01:21,750
That's because step over
doesn't go into functions,

17
00:01:21,750 --> 00:01:26,100
it steps over them,
which is where it gets its name.

18
00:01:26,100 --> 00:01:29,830
We need the button next to it, step into.

19
00:01:29,830 --> 00:01:34,462
Let's refresh the page and
enter the name Tyler again.

20
00:01:37,602 --> 00:01:40,970
Now I'll play forward to get to line 63.

21
00:01:42,250 --> 00:01:44,940
And now when I click step into

22
00:01:44,940 --> 00:01:49,810
we jump inside create li pass
these function declarations.

23
00:01:52,430 --> 00:01:57,770
Down to line 50 which is our first
executing line of code in this function.

24
00:01:57,770 --> 00:02:00,230
Let's look at this window on the right.

25
00:02:00,230 --> 00:02:02,480
It's the call stack window.

26
00:02:02,480 --> 00:02:05,280
You see two functions
stacked on top of each other

27
00:02:06,290 --> 00:02:11,460
at the bottom is form.addeventlistener
which is the submit handler.

28
00:02:11,460 --> 00:02:13,660
That was the first function called.

29
00:02:13,660 --> 00:02:17,630
It called create li which
was added to the stack.

30
00:02:17,630 --> 00:02:21,870
Any function create li calls
will be added to the stack and

31
00:02:21,870 --> 00:02:28,030
sit above create a li until that function
returns when it will disappear again.

32
00:02:28,030 --> 00:02:31,290
And when createLI returns,
It will leave this list too.

33
00:02:31,290 --> 00:02:36,220
And the JavaScript interpreter will hand
control back to the original handler

34
00:02:37,530 --> 00:02:40,520
this stack is a visual representation

35
00:02:40,520 --> 00:02:43,380
of what functions are currently
in the process of running.

36
00:02:44,480 --> 00:02:48,370
You see createLI is active and
we are on line 50.

37
00:02:48,370 --> 00:02:51,970
Below these are the variables in scope.

38
00:02:51,970 --> 00:02:56,160
In other words the variables that
this function has access to.

39
00:02:56,160 --> 00:03:01,670
If I click on form.addEventListener,
we jump to

40
00:03:01,670 --> 00:03:06,660
line 63 which is where createLI was
called and is in the process of running.

41
00:03:07,730 --> 00:03:11,630
Here you can see the scope now shows
the variables and this function scope.

42
00:03:13,000 --> 00:03:17,170
As functions are called within
other functions, the call stack and

43
00:03:17,170 --> 00:03:22,090
scope windows help us keep track of
where we are and what's in scope.

44
00:03:23,110 --> 00:03:28,315
We can see how it will go a level
deeper when we step into appendToLI.

45
00:03:29,600 --> 00:03:36,760
I'll step into twice, and
now we are three functions deep.

46
00:03:36,760 --> 00:03:41,455
Step in again lands us
inside createElement.

47
00:03:41,455 --> 00:03:46,600
createElement is where the app
is generating DOM elements to

48
00:03:46,600 --> 00:03:49,120
place inside the list item.

49
00:03:49,120 --> 00:03:54,620
Over in the scope window we can see that
we're going to make a span element and

50
00:03:54,620 --> 00:03:59,390
set its text content to text,
that's not right.

51
00:03:59,390 --> 00:04:01,905
Value should hold the name
we entered Tyler.

52
00:04:03,140 --> 00:04:07,390
Value is being passed in from
earlier in the call stack.

53
00:04:07,390 --> 00:04:13,255
If I click appendToLI where
createElement is being called,

54
00:04:13,255 --> 00:04:17,511
we see value is being
passed in here as well.

55
00:04:17,511 --> 00:04:22,472
I'll click on createLI and
you can see the string

56
00:04:22,472 --> 00:04:27,810
text that we're passing in to appendToLI.

57
00:04:27,810 --> 00:04:31,010
We should be passing in
the variable named text

58
00:04:31,010 --> 00:04:35,170
which you can see in the scope
window holds the string Tyler.

59
00:04:35,170 --> 00:04:40,730
Before we fix this bug, I want to show
you this last button called step out.

60
00:04:40,730 --> 00:04:43,830
Step out lets you complete
the current function and

61
00:04:43,830 --> 00:04:45,870
jump back to the function that called it.

62
00:04:48,630 --> 00:04:52,600
In other words,
you step out of the current function and

63
00:04:52,600 --> 00:04:55,340
back to the point in
the program it was called.

64
00:04:55,340 --> 00:05:01,060
In this case, when I click step out
the function returns the element and

65
00:05:01,060 --> 00:05:04,257
the debugger jumps back to
the appendToLI function.

66
00:05:05,360 --> 00:05:11,160
Now createElement has returned and
stored its value into element.

67
00:05:11,160 --> 00:05:15,650
Notice also that that function has
now disappeared from the call stack

68
00:05:15,650 --> 00:05:16,650
since it has completed.

69
00:05:17,810 --> 00:05:20,360
I'll step out of the appendToLI function.

70
00:05:22,010 --> 00:05:27,050
And the debugger returns to
the createLI function on line 52.

71
00:05:27,050 --> 00:05:33,030
To execute these remaining lines and jump
back out again, I'll click step out again.

72
00:05:33,030 --> 00:05:36,290
And you can see we're back
in the original handler.

73
00:05:36,290 --> 00:05:39,210
Now that we got a feel for
step out, I'll fix the bug,

74
00:05:39,210 --> 00:05:41,220
which you remember was on line 51.

75
00:05:41,220 --> 00:05:45,040
I'll refresh and
switch over to the text editor.

76
00:05:47,830 --> 00:05:54,830
Down on line 51,
I'll remove these quotes and save.

77
00:05:57,970 --> 00:06:01,540
Then I'll disable my break points and
refresh.

78
00:06:03,150 --> 00:06:05,159
Now when I answer Tyler.

79
00:06:08,914 --> 00:06:09,990
You can see it works.

80
00:06:11,050 --> 00:06:13,750
We covered some really cool tools here.

81
00:06:13,750 --> 00:06:15,990
Let's look at them one more time.

82
00:06:15,990 --> 00:06:21,040
We learned how to step into functions and
step out of them.

83
00:06:21,040 --> 00:06:25,940
We also learned how to see where we
are in the call stack at any given time

84
00:06:25,940 --> 00:06:28,280
as well as what variables are in scope.

85
00:06:29,410 --> 00:06:32,380
Now you really have
the basics of debugging.

86
00:06:32,380 --> 00:06:36,590
There are just a few more features
we'll explore in the remaining videos.

87
00:06:36,590 --> 00:06:37,120
Good job.