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!
You have completed Debugging Node Applications with Google Chrome!
Preview
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