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 Debug Node Applications with Visual Studio Code!
You have completed Debug Node Applications with Visual Studio Code!
Preview
In this video, you will use the "Variables" panel to inspect variables available in the scope of the current line and the "Watch" panel to evaluate any JavaScript expression in your program.
Resources
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
Now let's have a look at how to
inspect and evaluate variables and
0:00
expressions in VS Code's debug view.
0:03
I'll start by once again pausing execution
at the breakpoint set on line 37, by
0:05
refreshing the app in the browser on local
host for 3000, and clicking on the name.
0:10
The Variables panel shows the variables
available in the scope of
0:15
the current line.
0:20
As you can see, under Local,
we have access to the request and
0:21
response variables that are passed
into the route handler, and
0:25
the two constant variables,
original and reversed.
0:29
Currently, they're undefined.
0:32
You can also see the current
value of a variable by hovering
0:33
over their source in the editor.
0:37
You may be asking,
why is original undefined,
0:39
when we're breaking on the line
where original is being declared?
0:42
Well, its because the breakpoint pauses
before the evaluation of the line.
0:45
Pausing before the evaluation of the
statement allows you to see the state of
0:51
the application before and
after the execution of the line of code.
0:55
Now as the number of variables
in the Variables panel increase,
1:00
it may be difficult to keep track of
the variables you want to inspect.
1:03
So a handy way to observe the evolution
of a variable is to use the Watch panel.
1:07
In the Watch panel,
1:12
I'll click the Add Expression
button to add a variable to watch.
1:14
I'll add the variable original,
1:18
which holds the original
string value to reverse.
1:19
The Watch panel isn't limited to
variables either, as it can be used for
1:22
any JavaScript expression.
1:27
For example,
you can check an array's length over time.
1:29
Or a deeply nested value, like the value
of requests.params.userString,
1:32
which is the URL path as a string.
1:38
Although you can watch for
any JavaScript expression,
1:42
I'll monitor just the variable
original for now.
1:45
To remove an expression from the Watch
panel, right-click on it and
1:48
click Remove Expression.
1:52
Next, to execute the line of code
you're currently on or move forward
1:54
through the program click the Step Over
button in the Debug Actions panel.
1:59
That's the button to the right of
the Continue button, with a blue dot and
2:05
an arrow going around it.
2:09
By pressing the Step Over button,
you can see your code executed and
2:10
highlighted line by line.
2:14
This works in much the same way as
stepping over code when debugging
2:15
JavaScript in the browser with
Chrome Dev Tools, for example.
2:18
Click Step Over once, and you can see
that the original value has been updated
2:21
in the Watch panel, and in the Variables
panel under the Local scope.
2:27
Another way to interact with variables
is by using the Debug Console and
2:31
typing JavaScript code there.
2:37
For example,
original is equal to the string milo.
2:40
You can even override the value too.
2:44
For example,
I'll set original to the string guil,
2:48
and see the value change
in the Watch panel.
2:53
Once you're done testing values,
click the Continue button.
2:57
Now the response has finished.
3:02
And liug, which is a guil backwards,
displays in the application.
3:04
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