1
00:00:00,320 --> 00:00:03,835
Nobody's code works the first time all the time.

2
00:00:03,835 --> 00:00:08,69
Learning to use a debugger to find problems in your code is part

3
00:00:08,69 --> 00:00:11,765
of a developer's job, and being able to debug your code

4
00:00:11,765 --> 00:00:16,414
right in the editor you're using to write it is very convenient.

5
00:00:16,414 --> 00:00:20,33
VS Code includes a built-in debugger with debugging

6
00:00:20,33 --> 00:00:21,480
support for Node.js.

7
00:00:21,480 --> 00:00:26,749
With it, you can debug JavaScript, TypeScript, and any language that

8
00:00:26,749 --> 00:00:28,636
transpiles to JavaScript.

9
00:00:28,636 --> 00:00:32,357
You can also install debugger extensions for lots of

10
00:00:32,357 --> 00:00:33,525
other languages.

11
00:00:33,525 --> 00:00:36,663
Let me show you a couple of ways you can get started with

12
00:00:36,663 --> 00:00:37,896
the built-in debugger.

13
00:00:37,896 --> 00:00:43,332
I'll first open the menus.js file from the scripts folder

14
00:00:43,332 --> 00:00:44,691
in my project.

15
00:00:44,691 --> 00:00:48,818
You can add breakpoints to a code file by clicking in the far

16
00:00:48,818 --> 00:00:52,738
left margin on the line where you want the code to pause.

17
00:00:52,738 --> 00:00:55,970
I'll add one on Line 8 of this file.

18
00:00:55,970 --> 00:01:00,890
Since the index.htm file is the home page for the site,

19
00:01:00,890 --> 00:01:05,94
I'll open it so we can run and debug from there.

20
00:01:05,94 --> 00:01:11,110
I'll now click the "Run and Debug" button on the activity bar.

21
00:01:11,110 --> 00:01:16,157
From here, I'll click the "Run and Debug" button at the

22
00:01:16,157 --> 00:01:17,807
top of the panel.

23
00:01:17,807 --> 00:01:21,992
The debugger starts up, I'm taken back to the

24
00:01:21,992 --> 00:01:23,323
menus.js file,

25
00:01:23,323 --> 00:01:27,618
and the code pauses on Line 8 where I set the breakpoint.

26
00:01:27,618 --> 00:01:30,835
Also, the site was opened in a new browser window.

27
00:01:30,835 --> 00:01:34,116
I'll quickly switch to that window.

28
00:01:34,116 --> 00:01:38,80
You can see the page hasn't finished loading because it's

29
00:01:38,80 --> 00:01:42,398
dependent on execution of the JavaScript file that's currently

30
00:01:42,398 --> 00:01:44,26
paused in the debugger.

31
00:01:44,26 --> 00:01:47,937
If you've used debuggers built into other editors and IDEs,

32
00:01:47,937 --> 00:01:52,92
then using the one in VS Code should feel very natural.

33
00:01:52,92 --> 00:01:55,982
It has all the basic features you would expect. At the top of

34
00:01:55,982 --> 00:01:59,609
the run and debug panel, there's a section where you can

35
00:01:59,609 --> 00:02:01,851
browse local and global variables.

36
00:02:01,851 --> 00:02:04,460
The code is currently paused on Line 8,

37
00:02:04,460 --> 00:02:08,16
but you can see that a new variable named menu was

38
00:02:08,16 --> 00:02:09,540
declared on Line 6.

39
00:02:09,540 --> 00:02:13,177
It appears in this section as a local variable in the

40
00:02:13,177 --> 00:02:14,156
enableMenus.

41
00:02:14,156 --> 00:02:16,608
function.

42
00:02:16,608 --> 00:02:19,949
I can click the little arrow beside it to expand it and view

43
00:02:19,949 --> 00:02:22,441
its properties and more information about it.

44
00:02:22,441 --> 00:02:25,819
Below this section is a section where you can define

45
00:02:25,819 --> 00:02:27,11
watch expressions.

46
00:02:27,11 --> 00:02:31,232
There's nothing in it yet, but I'll click the "Plus" button and

47
00:02:31,232 --> 00:02:33,765
I'm prompted to add a new expression.

48
00:02:33,765 --> 00:02:40,390
I'll add document.title to see the title of the current page.

49
00:02:40,390 --> 00:02:45,430
Below this are sections for the call stack,

50
00:02:45,430 --> 00:02:47,950
loaded scripts, and breakpoints.

51
00:02:47,950 --> 00:02:52,235
You can see I already have a breakpoint set in the

52
00:02:52,235 --> 00:02:56,257
menus.js file, but I'll also go ahead and check

53
00:02:56,257 --> 00:03:00,629
the boxes to break on caught and uncaught exceptions.

54
00:03:00,629 --> 00:03:05,234
Just above the editor panel is a debug toolbar you can use to

55
00:03:05,234 --> 00:03:06,999
step through your code.

56
00:03:06,999 --> 00:03:12,910
It has all the standard buttons for stepping a line at a time or

57
00:03:12,910 --> 00:03:15,349
into and out of functions.

58
00:03:15,349 --> 00:03:20,375
Notice as I click the step button, the yellow highlight in the code

59
00:03:20,375 --> 00:03:23,40
file moves to the next line of code.

60
00:03:23,40 --> 00:03:27,561
I can stop debugging by clicking the red square at the end of

61
00:03:27,561 --> 00:03:29,219
the debugging toolbar.

62
00:03:29,219 --> 00:03:33,519
That's a quick way to get started debugging your client-side

63
00:03:33,519 --> 00:03:34,685
JavaScript code.

64
00:03:34,685 --> 00:03:39,124
I also want to show you how to do the same thing with your Node.js

65
00:03:39,124 --> 00:03:40,285
server-side code.

66
00:03:40,285 --> 00:03:43,790
I don't currently have any server side code in this project,

67
00:03:43,790 --> 00:03:46,780
but I'll quickly add just enough to show you how to get

68
00:03:46,780 --> 00:03:47,943
started debugging it.

69
00:03:47,943 --> 00:03:57,09
I'll first go back to the project explorer and add a new

70
00:03:57,09 --> 00:04:00,470
file named server.js.

71
00:04:00,470 --> 00:04:07,182
I'll paste into the file some sample code I got from the

72
00:04:07,182 --> 00:04:10,111
official Node.js website.

73
00:04:10,111 --> 00:04:14,888
The node site refers to this as the hello world of Node.js

74
00:04:14,888 --> 00:04:16,380
applications.

75
00:04:16,380 --> 00:04:21,580
It declares a few variables and then creates a new HTTP server and

76
00:04:21,580 --> 00:04:24,540
listens for new incoming HTTP request.

77
00:04:24,540 --> 00:04:26,862
It's a very basic web server.

78
00:04:26,862 --> 00:04:30,899
I'll add a new breakpoint on Line 4.

79
00:04:30,899 --> 00:04:35,123
I'm going to start the debugger for this application a little

80
00:04:35,123 --> 00:04:37,235
differently from the last one.

81
00:04:37,235 --> 00:04:41,575
This code includes a special terminal known as the JavaScript

82
00:04:41,575 --> 00:04:45,47
Debug Terminal that you can use to start command

83
00:04:45,47 --> 00:04:47,289
line node apps in the debugger.

84
00:04:47,289 --> 00:04:51,613
To get to it, I'll first open my default terminal.

85
00:04:51,613 --> 00:04:55,320
From the new terminal dropdown on the right,

86
00:04:55,320 --> 00:04:58,893
you can see some of the terminal choices we looked at earlier

87
00:04:58,893 --> 00:04:59,727
in the course.

88
00:04:59,727 --> 00:05:03,767
One in this list that I didn't mention before is the JavaScript

89
00:05:03,767 --> 00:05:04,745
Debug Terminal.

90
00:05:04,745 --> 00:05:08,270
I'll click on it to open a new one.

91
00:05:08,270 --> 00:05:10,986
It looks like any other terminal.

92
00:05:10,986 --> 00:05:14,839
However, if I use it to start a node application I have

93
00:05:14,839 --> 00:05:15,981
open in VS Code,

94
00:05:15,981 --> 00:05:19,758
it will automatically attach it to the built-in debugger.

95
00:05:19,758 --> 00:05:26,100
I'll start my new web server application with the command

96
00:05:26,100 --> 00:05:28,478
node server.js.

97
00:05:28,478 --> 00:05:32,40
I get a message in the terminal that the debugger is attached,

98
00:05:32,40 --> 00:05:35,879
and you can see in the editor above that it's already paused at

99
00:05:35,879 --> 00:05:37,984
the breakpoint I set on Line 4.

100
00:05:37,984 --> 00:05:41,623
At this point, I have access to all the same debugging tools

101
00:05:41,623 --> 00:05:42,918
I showed you earlier.

102
00:05:42,918 --> 00:05:44,100
In the watch section,

103
00:05:44,100 --> 00:05:47,702
you can see it retain my document.title expression,

104
00:05:47,702 --> 00:05:50,790
but doesn't know how to evaluate that for this app.

105
00:05:50,790 --> 00:05:58,411
I'll quickly delete it and add another watch on the hostname

106
00:05:58,411 --> 00:06:02,349
variable created on Line 3.

107
00:06:02,349 --> 00:06:09,377
I can also step through code just like you saw me do earlier.

108
00:06:09,377 --> 00:06:14,827
When I'm done, I can press the "Disconnect" button at the end

109
00:06:14,827 --> 00:06:16,800
of the debug toolbar.

110
00:06:16,800 --> 00:06:21,481
These debugging options work great for JavaScript and TypeScript

111
00:06:21,481 --> 00:06:22,150
projects,

112
00:06:22,150 --> 00:06:24,280
but if you're working in a different language,

113
00:06:24,280 --> 00:06:28,570
you'll probably need to install a VS Code extension that includes

114
00:06:28,570 --> 00:06:30,514
a debugger for that language.

115
00:06:30,514 --> 00:06:33,631
I covered installing extensions earlier in the course,

116
00:06:33,631 --> 00:06:38,252
but one way to quickly browse debugger extensions is to

117
00:06:38,252 --> 00:06:40,134
click on the "Run" menu.

118
00:06:40,134 --> 00:06:44,907
At the bottom of the menu, select "Install Additional

119
00:06:44,907 --> 00:06:45,843
Debuggers."

120
00:06:45,843 --> 00:06:49,548
That opens the extensions panel and filters it by the

121
00:06:49,548 --> 00:06:50,830
debugger category.

122
00:06:50,830 --> 00:06:54,645
You should definitely check this out and see if there's a debugger

123
00:06:54,645 --> 00:06:56,758
available for your favorite language.

124
00:06:56,758 --> 00:07:00,540
You've now seen a couple of quick ways to get started debugging

125
00:07:00,540 --> 00:07:01,150
your code,

126
00:07:01,150 --> 00:07:04,210
but debugging is something you're going to do a lot of,

127
00:07:04,210 --> 00:07:08,134
and there are additional settings and options you may want to take

128
00:07:08,134 --> 00:07:10,186
advantage of every time you do it.

129
00:07:10,186 --> 00:07:14,286
Up next, I'll show you how to do that with a feature known as

130
00:07:14,286 --> 00:07:16,00
launch configurations.