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
Learn how to inspect the flow of your application by stepping into and out of functions.
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
So far you've learned how to set break
points and use debugging tools for
0:00
inspecting and modifying variables
in JavaScript expressions.
0:04
Now, we'll take a look at how to inspect
the flow of your application by stepping
0:08
into and out of functions.
0:13
In the browser,
0:15
I'll once again trigger the break points
set on line 37 by clicking on a name.
0:16
Earlier, you used the step over
feature to inspect how your code
0:20
is executed line by line.
0:25
Step over doesn't go into functions,
it's steps over them,
0:27
which is where it gets its name.
0:30
For example, clicking the step over button
moves the debugger forward to line 39.
0:32
On line 39, there's a call to
the function reverse string.
0:38
I can see what's going inside this
function by using the step into button.
0:43
Click step into, and I jump inside
the reverse string function and
0:47
pause on the first line of the function,
28.
0:51
Now I can step over each line inside
this function to see the state of
0:54
the application change.
0:59
I know that the reverse string function
works correctly because the app does
1:01
display the reverse string.
1:05
So I can opt to step out of this function
by clicking the step out button.
1:07
Step out lets you complete
the current function and
1:11
jump back to the function that called it.
1:14
So clicking step out moves the debugger
out of the reverse string function and
1:17
back inside the route
handler that calls it.
1:22
Now I'm on the line of code that runs
after reverse string is called and
1:25
executed, where the handler responds
with the template to render.
1:28
Notice it's a render method from express.
1:32
You can even step in
functions you didn't write.
1:35
For example,
1:38
I can jump inside the express render
function by clicking the step into button.
1:39
This code brings up the source file
where the function is written.
1:45
When inside the render function,
I see that it takes in the view,
1:49
which is the reverse template to display,
1:53
and options which is the local
variables that display in the view.
1:56
If I go into the debug console and
type options,
2:01
I see that there's a reversed key but
there's no original key.
2:04
I think that might just be
the bug I'm trying to fix.
2:10
So here in the debug console,
2:12
I'll test it by typing options = an object
2:16
with an original key set to mali and
2:22
a reversed key set to ilam,
which is mali backwards.
2:27
Then press Enter.
2:34
I'll then resume the application
by clicking the continue button.
2:36
Then view the app and the browser and
great that indeed is the issue.
2:44
The options object is
missing the original key.
2:48
I found the problem, so
now I can stop running the debugger by
2:52
clicking the Stop button,
then edit the code in the app.js file.
2:57
In the route handler on line 41,
the reversed variable is being
3:03
passed into the local variables
that are accessed by the template.
3:08
So this is where I should also
pass the original variable.
3:12
Now, I'll run the app in
the terminal with npm start.
3:19
Click on a name.
3:27
And see that it works.
3:28
I'll test a few other routes,
for example, Carlos and Emily.
3:31
And everything works great.
3:40
So I hope that you've enjoyed learning
some of the debugging features
3:43
available to you in VS code,
and how they can improve and
3:47
accelerate your node development cycle.
3:50
Be sure to review the teacher's notes with
this video to explore other features that
3:52
weren't covered in this workshop.
3:56
The next time you need insight into
what's happening in your Node app,
3:58
save yourself from the time and maybe the
frustration of dealing with console.log by
4:01
taking advantage of the features
of VS code you just learned.
4:05
Debugging in VS code might feel a little
awkward or uncomfortable at first.
4:08
And it might take a few tries to find
a Node debugging cycle that works
4:13
best for you.
4:16
Like anything else, it gets easier and
more familiar with time, practice, and
4:17
experience.
4:21
If you have questions about
anything covered in this workshop,
4:22
feel free to reach out to other students
in the community or the Treehouse staff.
4:25
Thanks everyone and happy debugging.
4:29
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