Preview
Video Player
00:00
00:00
Set up Debugging with VS Code
4:08Get started with Node.js debugging directly in Visual Studio Code.
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