Preview
Video Player
00:00
00:00
Debugging Functions
6:37Knowing how to navigate into, out of, and through functions with DevTools is crucial. Learn how.
There are a few more bugs in this program,
for example when I submit
0:00
a new name to the RSVP app,
0:05
the new invitee reads text
instead of the name I entered.
0:09
Any string of characters
results in the same behavior.
0:17
Let's dig in and see what's wrong here.
0:23
To jump right to the start of the handler,
we can set an event listener breakpoint.
0:26
In previous videos we were debugging
check boxes but this time it's a form.
0:32
So we'll use the submit event.
0:38
If I click Submit, we jump right to
the start of the submit handler.
0:42
Okay, when we submit the form
the program creates a new invitee
0:50
which is represented by
a list item in our HTML.
0:55
This create a li function
may be where the problem is.
0:59
So let's look there first, I'll set
a breakpoint at line 63 and jump forward.
1:03
If I click the step over button
though this function executes and
1:10
we move to line 64.
1:15
That's because step over
doesn't go into functions,
1:18
it steps over them,
which is where it gets its name.
1:21
We need the button next to it, step into.
1:26
Let's refresh the page and
enter the name Tyler again.
1:29
Now I'll play forward to get to line 63.
1:37
And now when I click step into
1:42
we jump inside create li pass
these function declarations.
1:44
Down to line 50 which is our first
executing line of code in this function.
1:52
Let's look at this window on the right.
1:57
It's the call stack window.
2:00
You see two functions
stacked on top of each other
2:02
at the bottom is form.addeventlistener
which is the submit handler.
2:06
That was the first function called.
2:11
It called create li which
was added to the stack.
2:13
Any function create li calls
will be added to the stack and
2:17
sit above create a li until that function
returns when it will disappear again.
2:21
And when createLI returns,
It will leave this list too.
2:28
And the JavaScript interpreter will hand
control back to the original handler
2:31
this stack is a visual representation
2:37
of what functions are currently
in the process of running.
2:40
You see createLI is active and
we are on line 50.
2:44
Below these are the variables in scope.
2:48
In other words the variables that
this function has access to.
2:51
If I click on form.addEventListener,
we jump to
2:56
line 63 which is where createLI was
called and is in the process of running.
3:01
Here you can see the scope now shows
the variables and this function scope.
3:07
As functions are called within
other functions, the call stack and
3:13
scope windows help us keep track of
where we are and what's in scope.
3:17
We can see how it will go a level
deeper when we step into appendToLI.
3:23
I'll step into twice, and
now we are three functions deep.
3:29
Step in again lands us
inside createElement.
3:36
createElement is where the app
is generating DOM elements to
3:41
place inside the list item.
3:46
Over in the scope window we can see that
we're going to make a span element and
3:49
set its text content to text,
that's not right.
3:54
Value should hold the name
we entered Tyler.
3:59
Value is being passed in from
earlier in the call stack.
4:03
If I click appendToLI where
createElement is being called,
4:07
we see value is being
passed in here as well.
4:13
I'll click on createLI and
you can see the string
4:17
text that we're passing in to appendToLI.
4:22
We should be passing in
the variable named text
4:27
which you can see in the scope
window holds the string Tyler.
4:31
Before we fix this bug, I want to show
you this last button called step out.
4:35
Step out lets you complete
the current function and
4:40
jump back to the function that called it.
4:43
In other words,
you step out of the current function and
4:48
back to the point in
the program it was called.
4:52
In this case, when I click step out
the function returns the element and
4:55
the debugger jumps back to
the appendToLI function.
5:01
Now createElement has returned and
stored its value into element.
5:05
Notice also that that function has
now disappeared from the call stack
5:11
since it has completed.
5:15
I'll step out of the appendToLI function.
5:17
And the debugger returns to
the createLI function on line 52.
5:22
To execute these remaining lines and jump
back out again, I'll click step out again.
5:27
And you can see we're back
in the original handler.
5:33
Now that we got a feel for
step out, I'll fix the bug,
5:36
which you remember was on line 51.
5:39
I'll refresh and
switch over to the text editor.
5:41
Down on line 51,
I'll remove these quotes and save.
5:47
Then I'll disable my break points and
refresh.
5:57
Now when I answer Tyler.
6:03
You can see it works.
6:08
We covered some really cool tools here.
6:11
Let's look at them one more time.
6:13
We learned how to step into functions and
step out of them.
6:15
We also learned how to see where we
are in the call stack at any given time
6:21
as well as what variables are in scope.
6:25
Now you really have
the basics of debugging.
6:29
There are just a few more features
we'll explore in the remaining videos.
6:32
Good job.
6:36