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
Get started with Node.js debugging directly in Visual Studio Code.
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
All right, let's get started debugging
server-side JavaScript with node directly
0:00
in Visual Studio code.
0:04
You debug node programs in VS code in much
the same way as you might debug JavaScript
0:06
in the browser.
0:10
If you were, for example,
using Google Chrome's dev tools.
0:11
Debugging is a core feature
of Visual Studio code, so
0:14
using its debugger with
node has many benefits.
0:17
For example, it's faster and
easier to get set up with debugging.
0:19
And you can debug, fix, and test your
application directly in your code editor.
0:23
Once you've downloaded the project files,
open your project folder in Visual Studio
0:28
code, then open the integrated terminal by
pressing Ctrl + Backtick on your keyboard.
0:32
Or from the top menu,
click View and select Terminal.
0:36
In the terminal,
0:40
install the project dependencies by
running the command npm install.
0:41
To begin using Visual Studio code's
built-in debugger, click the bug
0:48
symbol in the left side bar or
from the top menu click View then Debug.
0:53
The debug view displays all information
and panels related to debugging.
0:58
For example, variables, watch,
breakpoints, and call stack panels.
1:02
And we'll go over these
in more detail later, but
1:06
they should look familiar to you and
work in much the same way if
1:09
you've previously done any debugging with
a tool like Chrome dev tools for instance.
1:11
VS code also has
an internal debug console,
1:15
which displays as soon as
a debugging session starts.
1:18
The console serves as a REPL or read eval
print loop feature you can use to evaluate
1:22
expressions and show debugging output.
1:27
Setting up your node app for debugging
is quite straightforward with VS code.
1:29
It provides settings and configuration
options to help you get up and
1:33
running quickly.
1:37
To begin debugging, you will need to
instruct VS code to launch your app in
1:38
debug mode or attach its debugger to
an already running program or process.
1:42
There are several ways you
might do either of these and
1:47
I've posted many of them in
the teacher's notes with this video.
1:50
In this workshop, we're going to
launch the express app and debug mode
1:53
directly from a launch configuration and
we'll set up within VS code.
1:57
The VS code debugger lets you
set up launch configurations for
2:00
common Node JS debugging scenarios.
2:04
The top left debug bar displays
all your launch configurations,
2:06
which we don't yet have.
2:09
I'll create one by clicking the Configure
or Fix launch.json gear icon.
2:11
It asks you to select your debug
environment, select node.js.
2:16
And this creates a launch.json file for
configuring and
2:20
saving you're debugging setup details.
2:22
As you can see it's inside
a .vs code folder which
2:24
is VS code stores configuration files for
your project.
2:28
The default configuration launch.json
sets up is launch program,
2:31
which launches your node
program in debug mode.
2:36
With this configuration VS code,
we'll look in your package.json file for
2:39
a start script.
2:44
And we'll use it in the program value for
the launch program configuration.
2:45
In this case it's your
workspaceFolder/bin/www.
2:50
So this is a configuration
we'll use in this workshop.
2:54
You can add other launch configurations
by clicking the Add Configuration button.
2:57
Be sure to check the teacher's notes with
this video to learn about other types of
3:01
configuration.
3:05
I'll close the launch.json file,
and now in the top left debug panel
3:06
of the debug view, select the launch
program configuration, then click
3:11
the Start Debugging icon, and VS code
launches the app in its debug mode.
3:16
As you can see,
the bottom status bar turns orange,
3:22
which indicates that you're in debug mode.
3:25
And the debug console prints a message to
let you know that debugger is listening
3:27
and attached.
3:32
It's running your app in debug mode.
3:33
So now you're able to view the app in the
browser as you debug on local host 3000.
3:35
Also once a debugging session starts,
3:41
a debug tool bar appears at the top of the
editor with debug actions like pause or
3:44
continue, step over,
step into, and step out.
3:50
We'll start using these in a later video.
3:53
All right, you're now all set
up to debug the app in VS code.
3:55
From here you can set breakpoints
in your code, inspect variables,
3:58
step through your code, and more.
4:02
In the next video,
4:03
you'll learn how to set breakpoints
to pause execution of your program.
4: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