Preview
Video Player
00:00
00:00
Debug Functions
4:31Learn how to inspect the flow of your application by stepping into and out of functions.
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