1
00:00:00,000 --> 00:00:04,785
All right, let's get started debugging
server-side JavaScript with node directly

2
00:00:04,785 --> 00:00:06,104
in Visual Studio code.

3
00:00:06,104 --> 00:00:10,363
You debug node programs in VS code in much
the same way as you might debug JavaScript

4
00:00:10,363 --> 00:00:11,238
in the browser.

5
00:00:11,238 --> 00:00:14,187
If you were, for example,
using Google Chrome's dev tools.

6
00:00:14,187 --> 00:00:17,101
Debugging is a core feature
of Visual Studio code, so

7
00:00:17,101 --> 00:00:19,772
using its debugger with
node has many benefits.

8
00:00:19,772 --> 00:00:23,304
For example, it's faster and
easier to get set up with debugging.

9
00:00:23,304 --> 00:00:28,357
And you can debug, fix, and test your
application directly in your code editor.

10
00:00:28,357 --> 00:00:32,561
Once you've downloaded the project files,
open your project folder in Visual Studio

11
00:00:32,561 --> 00:00:36,896
code, then open the integrated terminal by
pressing Ctrl + Backtick on your keyboard.

12
00:00:36,896 --> 00:00:40,639
Or from the top menu,
click View and select Terminal.

13
00:00:40,639 --> 00:00:41,947
In the terminal,

14
00:00:41,947 --> 00:00:47,191
install the project dependencies by
running the command npm install.

15
00:00:48,757 --> 00:00:53,537
To begin using Visual Studio code's
built-in debugger, click the bug

16
00:00:53,537 --> 00:00:58,092
symbol in the left side bar or
from the top menu click View then Debug.

17
00:00:58,092 --> 00:01:02,660
The debug view displays all information
and panels related to debugging.

18
00:01:02,660 --> 00:01:06,951
For example, variables, watch,
breakpoints, and call stack panels.

19
00:01:06,951 --> 00:01:09,196
And we'll go over these
in more detail later, but

20
00:01:09,196 --> 00:01:11,976
they should look familiar to you and
work in much the same way if

21
00:01:11,976 --> 00:01:15,894
you've previously done any debugging with
a tool like Chrome dev tools for instance.

22
00:01:15,894 --> 00:01:18,753
VS code also has
an internal debug console,

23
00:01:18,753 --> 00:01:22,320
which displays as soon as
a debugging session starts.

24
00:01:22,320 --> 00:01:27,199
The console serves as a REPL or read eval
print loop feature you can use to evaluate

25
00:01:27,199 --> 00:01:29,726
expressions and show debugging output.

26
00:01:29,726 --> 00:01:33,526
Setting up your node app for debugging
is quite straightforward with VS code.

27
00:01:33,526 --> 00:01:37,180
It provides settings and configuration
options to help you get up and

28
00:01:37,180 --> 00:01:38,190
running quickly.

29
00:01:38,190 --> 00:01:42,840
To begin debugging, you will need to
instruct VS code to launch your app in

30
00:01:42,840 --> 00:01:47,647
debug mode or attach its debugger to
an already running program or process.

31
00:01:47,647 --> 00:01:50,235
There are several ways you
might do either of these and

32
00:01:50,235 --> 00:01:53,471
I've posted many of them in
the teacher's notes with this video.

33
00:01:53,471 --> 00:01:57,218
In this workshop, we're going to
launch the express app and debug mode

34
00:01:57,218 --> 00:02:00,979
directly from a launch configuration and
we'll set up within VS code.

35
00:02:00,979 --> 00:02:04,359
The VS code debugger lets you
set up launch configurations for

36
00:02:04,359 --> 00:02:06,443
common Node JS debugging scenarios.

37
00:02:06,443 --> 00:02:09,973
The top left debug bar displays
all your launch configurations,

38
00:02:09,973 --> 00:02:11,396
which we don't yet have.

39
00:02:11,396 --> 00:02:16,302
I'll create one by clicking the Configure
or Fix launch.json gear icon.

40
00:02:16,302 --> 00:02:20,224
It asks you to select your debug
environment, select node.js.

41
00:02:20,224 --> 00:02:22,898
And this creates a launch.json file for
configuring and

42
00:02:22,898 --> 00:02:24,909
saving you're debugging setup details.

43
00:02:24,909 --> 00:02:28,048
As you can see it's inside
a .vs code folder which

44
00:02:28,048 --> 00:02:31,656
is VS code stores configuration files for
your project.

45
00:02:31,656 --> 00:02:36,460
The default configuration launch.json
sets up is launch program,

46
00:02:36,460 --> 00:02:39,872
which launches your node
program in debug mode.

47
00:02:39,872 --> 00:02:44,378
With this configuration VS code,
we'll look in your package.json file for

48
00:02:44,378 --> 00:02:45,360
a start script.

49
00:02:45,360 --> 00:02:50,386
And we'll use it in the program value for
the launch program configuration.

50
00:02:50,386 --> 00:02:54,718
In this case it's your
workspaceFolder/bin/www.

51
00:02:54,718 --> 00:02:57,415
So this is a configuration
we'll use in this workshop.

52
00:02:57,415 --> 00:03:01,847
You can add other launch configurations
by clicking the Add Configuration button.

53
00:03:01,847 --> 00:03:05,685
Be sure to check the teacher's notes with
this video to learn about other types of

54
00:03:05,685 --> 00:03:06,544
configuration.

55
00:03:06,544 --> 00:03:11,618
I'll close the launch.json file,
and now in the top left debug panel

56
00:03:11,618 --> 00:03:16,950
of the debug view, select the launch
program configuration, then click

57
00:03:16,950 --> 00:03:22,284
the Start Debugging icon, and VS code
launches the app in its debug mode.

58
00:03:22,284 --> 00:03:25,320
As you can see,
the bottom status bar turns orange,

59
00:03:25,320 --> 00:03:27,946
which indicates that you're in debug mode.

60
00:03:27,946 --> 00:03:32,420
And the debug console prints a message to
let you know that debugger is listening

61
00:03:32,420 --> 00:03:33,298
and attached.

62
00:03:33,298 --> 00:03:35,251
It's running your app in debug mode.

63
00:03:35,251 --> 00:03:40,099
So now you're able to view the app in the
browser as you debug on local host 3000.

64
00:03:41,896 --> 00:03:44,611
Also once a debugging session starts,

65
00:03:44,611 --> 00:03:50,039
a debug tool bar appears at the top of the
editor with debug actions like pause or

66
00:03:50,039 --> 00:03:53,510
continue, step over,
step into, and step out.

67
00:03:53,510 --> 00:03:55,622
We'll start using these in a later video.

68
00:03:55,622 --> 00:03:58,756
All right, you're now all set
up to debug the app in VS code.

69
00:03:58,756 --> 00:04:02,091
From here you can set breakpoints
in your code, inspect variables,

70
00:04:02,091 --> 00:04:03,827
step through your code, and more.

71
00:04:03,827 --> 00:04:04,766
In the next video,

72
00:04:04,766 --> 00:04:08,425
you'll learn how to set breakpoints
to pause execution of your program.