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
Knowing how to navigate into, out of, and through functions with DevTools is crucial. Learn how.
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
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
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