Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Debugging Node Applications with Google Chrome!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Debugging tools offer powerful ways to explore the flow of your application, like stepping in to a function and see in greater detail how something works.
This video doesn't have any notes.
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
We've looked at the debugging tools for
inspecting and modifying variables.
0:00
Now we'll take a look at some more
powerful tools inspecting the flow
0:04
of your application going in and
out of functions.
0:08
Let's trigger the breakpoint
again by refreshing the page.
0:12
As we can see, on line 40,
there's a function called reverseString.
0:16
We can see what's going on in
this function by using the Step
0:21
into the next function button.
0:25
First, let's move to line 40
using the Step over button.
0:27
Then we can press the Step into button.
0:32
We are now inside
the reverseString function,
0:35
paused on the first line of the function,
line 29.
0:38
We can then step over each line of
the function, if we wanted to, and
0:42
see the state of the application change.
0:46
However, we know that this
reverse function works correctly.
0:49
So we can opt out to step out using
the Step out of current function button.
0:53
We are then moved out of
the reverseString function and
0:59
on to the next line of code,
where we respond with a template.
1:03
Notice, it's a render method from Express.
1:07
We can even step into
functions we didn't write.
1:11
Let's jump in by pressing
the Step in button.
1:15
Here we are in the render function,
1:21
which takes in a view,
which is the reverse template.
1:23
And the options,
1:27
which are the local variables that
you want to display in the view.
1:29
If we jump into the console and
1:32
type in options, we see there's
a reversed key, but no original key.
1:34
Maybe that's the bug we're trying to fix.
1:39
Let's it try out with options
1:41
= { original: "joel", reversed:,
1:47
"leoj"}.
1:54
Let's resume our application and
check out the page.
2:00
Yep, that was the issue.
2:06
We're missing the original key.
2:08
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