1
00:00:00,270 --> 00:00:05,820
In this video we're going to talk about how we can best debug our node j s applications.

2
00:00:05,820 --> 00:00:12,000
So we'll talk about some debugging strategies and we'll also explore the debugging tools that node provides

3
00:00:12,000 --> 00:00:15,600
you to make it much easier to fix your broken apps.

4
00:00:15,600 --> 00:00:21,510
We'll be exploring the node debugger which integrates directly with the Chrome developer tools GIVING

5
00:00:21,510 --> 00:00:25,060
YOU A NICE GOOEY for debugging your back end applications.

6
00:00:25,080 --> 00:00:29,790
It's a really great way to figure out why your apps are not working now in general.

7
00:00:29,790 --> 00:00:35,670
There are two types of errors so we're gonna run into when working with no J S we're gonna have things

8
00:00:35,670 --> 00:00:39,690
go wrong and we're gonna get an explicit error message.

9
00:00:39,690 --> 00:00:45,090
So we've already seen that when we've made a typos in the class and the other type of error is when

10
00:00:45,090 --> 00:00:51,390
things go wrong and there is no error message which likely means we have some sort of logic problem

11
00:00:51,420 --> 00:00:55,170
in our code that we're gonna need to first figure out where it is.

12
00:00:55,230 --> 00:00:58,910
And then second adjust to make it actually work.

13
00:00:58,920 --> 00:01:03,080
Now we can employ these same strategies for debugging both types of errors.

14
00:01:03,150 --> 00:01:09,060
So let's kick things off by exploring some of the basic tools that node provides the most basic debugging

15
00:01:09,060 --> 00:01:12,450
tool we have is something we've already used dozens of times before.

16
00:01:12,450 --> 00:01:14,050
Console dialogue.

17
00:01:14,100 --> 00:01:17,840
So let's say that for some reason this message never seems to print.

18
00:01:17,880 --> 00:01:22,860
Even when I try to add a duplicate I'm not getting note title taken printing.

19
00:01:22,890 --> 00:01:24,320
What would I do to fix this.

20
00:01:24,330 --> 00:01:30,180
The first thing I would do is look at the contents of duplicate note right here to make sure it's what

21
00:01:30,180 --> 00:01:31,850
I'm expecting it to be.

22
00:01:31,860 --> 00:01:32,700
So what would I do.

23
00:01:32,700 --> 00:01:40,320
Well I could just use console dot log I could print out the duplicate note variable allowing me to see

24
00:01:40,320 --> 00:01:42,820
its value when I run the program.

25
00:01:42,870 --> 00:01:49,200
NO CONSOLE dialog might get a bad reputation on medium dot com posts or they say you should never use

26
00:01:49,200 --> 00:01:51,630
console dialog for debugging.

27
00:01:51,630 --> 00:01:53,370
I think that's all overblown.

28
00:01:53,370 --> 00:01:55,910
Everyone wants things to be black and white.

29
00:01:55,920 --> 00:02:02,040
This is the only way that way is bad and in general it's all about finding the right tool for the job.

30
00:02:02,040 --> 00:02:08,580
I use console dot log all the time and client projects to quickly just dump a value to the terminal

31
00:02:08,670 --> 00:02:09,980
so I can check it out.

32
00:02:10,140 --> 00:02:15,060
Right here we could now run the application to dump that and see what's going on so I could do something

33
00:02:15,060 --> 00:02:18,860
like run node app dot J.S. using the ad command.

34
00:02:19,020 --> 00:02:21,640
I'll provide a title for my new note.

35
00:02:21,720 --> 00:02:29,190
Let's go ahead and set it equal to something like courses then I'll go ahead and I will create a body

36
00:02:29,190 --> 00:02:35,370
option as well setting that equal to something like node j s perfect.

37
00:02:35,370 --> 00:02:37,300
So we have our new note being added.

38
00:02:37,320 --> 00:02:43,230
And as that program runs we're gonna be able to see the value of duplicate note when we run it here.

39
00:02:43,230 --> 00:02:46,420
I can see it's undefined which is good when I run it again.

40
00:02:46,440 --> 00:02:51,540
I can see now the duplicate has been found and we're getting that printed so hopefully we would be able

41
00:02:51,540 --> 00:02:54,740
to use that information to figure out what's up now.

42
00:02:54,750 --> 00:02:59,380
If not we would want to take things one step further if duplicate note is bad.

43
00:02:59,400 --> 00:03:05,670
That means either the notes array isn't what we're expecting or maybe the title argument is in what

44
00:03:05,670 --> 00:03:06,630
we are expecting.

45
00:03:06,900 --> 00:03:12,420
So what do we do from there and we continue to log things so I could console dialogue or something like

46
00:03:12,420 --> 00:03:16,660
title and I could even console log notes down below.

47
00:03:16,770 --> 00:03:22,170
If I were to rerun the program we now get even more information making sure we can figure out exactly

48
00:03:22,170 --> 00:03:25,160
why our application is running the way it is.

49
00:03:25,260 --> 00:03:32,010
No console log is great for a lot of situations but if you find yourself logging out five or six or

50
00:03:32,010 --> 00:03:35,860
seven different values it can really become a burden.

51
00:03:35,880 --> 00:03:39,970
It can be annoying to add all of those console dot logs around your program.

52
00:03:39,990 --> 00:03:43,350
Then remember where you put them and actually remove them.

53
00:03:43,500 --> 00:03:48,750
So console that log is the most basic tool available to us for debugging our apps.

54
00:03:48,750 --> 00:03:55,500
Next up is the node debugger and that is nodes built in debugging tool which integrates with the 8 and

55
00:03:55,530 --> 00:03:56,920
the Chrome browser.

56
00:03:56,940 --> 00:04:02,340
The debugger like console dialog needs to be added at a specific point in your application.

57
00:04:02,340 --> 00:04:08,130
So let's say that right here once again I want to explore the variable values at this point in time.

58
00:04:08,250 --> 00:04:14,550
If I want to pause the program here I can use a debugger that's gonna stop the application at this point

59
00:04:14,550 --> 00:04:15,350
in time.

60
00:04:15,450 --> 00:04:21,090
Then I can use the developer tools which we'll see in a second to look at any values I want I could

61
00:04:21,090 --> 00:04:26,150
look at notes or duplicate note or title or body or anything else that existed.

62
00:04:26,220 --> 00:04:30,200
And obviously this gives us a bit more flexibility with console dialog.

63
00:04:30,210 --> 00:04:34,050
We have to manually list out the things we want to see with debugger.

64
00:04:34,050 --> 00:04:40,370
We can just add the debugger statement one time and once we get to the dev tools we can look at everything.

65
00:04:40,500 --> 00:04:46,480
Now with this in place our application isn't going to change how it runs by default.

66
00:04:46,530 --> 00:04:50,490
Down below I'm going to rerun the command I ran before.

67
00:04:50,490 --> 00:04:53,360
It is indeed going to pass through this line of code.

68
00:04:53,370 --> 00:04:54,650
But what happens.

69
00:04:54,690 --> 00:04:55,840
Nothing happens.

70
00:04:55,890 --> 00:04:59,560
We just see our message which comes from the line down here.

71
00:04:59,580 --> 00:05:00,630
So this line ran.

72
00:05:00,630 --> 00:05:04,720
Which means that this line definitely ran but the program didn't stop.

73
00:05:04,950 --> 00:05:09,640
When we have the buggers in our application they're not going to pause the program by default.

74
00:05:09,690 --> 00:05:17,350
We have to run node with a special option to get that done and to do this we use node followed by inspect.

75
00:05:17,430 --> 00:05:18,920
So node inspect.

76
00:05:18,960 --> 00:05:24,990
Then we add everything we would normally add so I could add the script name aspect J s like so.

77
00:05:25,100 --> 00:05:31,020
And in this case I can also add my command line arguments afterwards so I could set up the ad command

78
00:05:32,010 --> 00:05:39,280
I will provide a value for a title I'll use courses once again and I'll also provide a value for a body.

79
00:05:39,390 --> 00:05:41,130
Once again using node j.

80
00:05:41,130 --> 00:05:50,010
S So now by just adding inspect in there and running the script we're gonna get much different output.

81
00:05:50,030 --> 00:05:52,640
This is Andrew from the future with a quick update.

82
00:05:52,640 --> 00:05:57,020
So as we run that command some of you running on Windows you're gonna get an error you're gonna get

83
00:05:57,020 --> 00:05:58,540
the error that we're seeing here.

84
00:05:58,550 --> 00:06:02,840
So right here on the screen I have two commands I have the command we just ran up top and I have an

85
00:06:02,840 --> 00:06:04,810
alternative command down below.

86
00:06:04,840 --> 00:06:09,740
Now as you run that first command you might get the error that's shown just below it right here that

87
00:06:09,740 --> 00:06:17,420
is time out 2000 waiting on 1 2 7 0 0 0 1 on Port 9 to 2 9 to be free.

88
00:06:17,420 --> 00:06:22,600
So if you run the command that we just typed out and you get that error this update is for you.

89
00:06:22,610 --> 00:06:26,680
So I've been digging around a bit in the issues and this is an actual problem which means that there's

90
00:06:26,690 --> 00:06:29,580
not something we can really do on our machines to fix this.

91
00:06:29,600 --> 00:06:31,700
We have to wait for a fix to be released.

92
00:06:31,700 --> 00:06:35,390
Then we can install a new version of node and hopefully things start to work.

93
00:06:35,450 --> 00:06:39,740
For now though if you are running into that error the second command down below that should allow you

94
00:06:39,740 --> 00:06:43,010
to continue on exactly as we're seeing in the video.

95
00:06:43,010 --> 00:06:45,350
The only difference is that the command is a bit different.

96
00:06:45,350 --> 00:06:48,370
So up top we have node inspect down below.

97
00:06:48,380 --> 00:06:56,420
We have node space hyphen hyphen inspect hyphen be our K so Baquet is short for break that second command

98
00:06:56,420 --> 00:07:01,260
is going to run the inspector it's gonna break on that first line which means that we're still gonna

99
00:07:01,280 --> 00:07:05,390
be able to use Chrome to inspect our application as it runs.

100
00:07:05,390 --> 00:07:11,270
So once again this update only applies to users on Windows who are actually getting the error shown

101
00:07:11,270 --> 00:07:11,930
in red.

102
00:07:11,930 --> 00:07:16,640
If you're not getting that error I'd recommend using the first command as it's more modern.

103
00:07:16,640 --> 00:07:21,380
If you are getting an error for the moment I'd recommend running that second command hopefully in the

104
00:07:21,380 --> 00:07:25,950
future node fixes this issue and I can remove this update altogether.

105
00:07:25,970 --> 00:07:27,680
All right that's it for this update.

106
00:07:27,680 --> 00:07:32,480
If you have any questions just open a question in the course Q and A and we'll work with you to get

107
00:07:32,540 --> 00:07:34,370
unstuck and back on track.

108
00:07:34,370 --> 00:07:41,870
See you soon the output we're seeing here is node letting us know that a debugger is now up and running.

109
00:07:41,880 --> 00:07:48,990
We can see debugger listening on followed by this you are L Now we can head over to Chrome to actually

110
00:07:48,990 --> 00:07:52,350
inspect our application over in the Chrome browser.

111
00:07:52,350 --> 00:07:56,460
What I'm gonna do is close down all of the open tabs I have so far.

112
00:07:56,460 --> 00:08:02,880
We don't need those anymore and we're going to pull up a specific you are all it is chrome colon forward

113
00:08:02,880 --> 00:08:05,350
slash forward slash inspect.

114
00:08:05,370 --> 00:08:10,920
Now remember the node debugger it's using the built in V8 debugger tools.

115
00:08:10,920 --> 00:08:17,880
That means that Chrome which also uses V8 is currently the only browser we can inspect our node applications

116
00:08:18,030 --> 00:08:18,730
using.

117
00:08:18,750 --> 00:08:24,450
So if you normally use Safari or Firefox or some other browser you're not going to have the exact same

118
00:08:24,450 --> 00:08:25,890
debugger integration.

119
00:08:25,890 --> 00:08:31,460
I definitely recommend grabbing chrome for the rest of the class even if you only use it for debugging.

120
00:08:31,470 --> 00:08:34,400
Note now right here what can we do.

121
00:08:34,410 --> 00:08:39,230
Well we can see we have some stuff under remote target under remote target.

122
00:08:39,240 --> 00:08:45,210
I have two targets I have one at the port and then I have one at these shorthand local host and the

123
00:08:45,210 --> 00:08:47,690
end of the day both are the exact same process.

124
00:08:47,700 --> 00:08:49,290
They're just duplicates.

125
00:08:49,290 --> 00:08:54,900
Now if you're seeing nothing under remote target that likely means you have a mis configuration.

126
00:08:54,900 --> 00:09:00,630
Some chrome browsers for some reason have altered configuration details if you click that configure

127
00:09:00,630 --> 00:09:03,580
button you should see two values inside of here.

128
00:09:03,660 --> 00:09:12,180
Local host port 9 2 2 9 then 1 2 7 0 0 dot one on port 9 2 2 9.

129
00:09:12,240 --> 00:09:17,310
If you don't have both of those go ahead and add them into the mix then if you refresh the page you

130
00:09:17,310 --> 00:09:19,310
should see the target showing up.

131
00:09:19,380 --> 00:09:23,190
If that still doesn't work as always just crack open a question in the queue and.

132
00:09:23,330 --> 00:09:26,450
And I'll work with you to get unstuck and back on track.

133
00:09:26,580 --> 00:09:32,470
Now from here we can actually inspect our application and we can pause at that point in time.

134
00:09:32,520 --> 00:09:38,010
We put the debugger statement and view all of our applications variables and values.

135
00:09:38,010 --> 00:09:43,860
Let's get started by clicking inspect so we can actually open up a new instance of the debugger tools

136
00:09:43,860 --> 00:09:46,740
for debugging our node j J.S. application.

137
00:09:46,800 --> 00:09:51,740
So right here we have the Chrome developer tools although obviously some stuff is not here.

138
00:09:51,750 --> 00:09:55,260
For example we have our tabs up above in the browser.

139
00:09:55,260 --> 00:10:00,690
We would have something like an elements panel that doesn't make sense for node since the elements panel

140
00:10:00,780 --> 00:10:07,590
allowed you to debug your hcm UML document and we don't have an HDMI document here but we do have two

141
00:10:07,590 --> 00:10:13,920
very important tabs we have the console tab and the sources tab both of which we'll be using to debug

142
00:10:13,950 --> 00:10:15,270
our application.

143
00:10:15,270 --> 00:10:21,090
Now there is a lot going on with this source's tab so let's take a quick moment to break down what's

144
00:10:21,090 --> 00:10:22,290
happening in the middle.

145
00:10:22,290 --> 00:10:23,910
We have our file app.

146
00:10:24,030 --> 00:10:30,600
Yes exactly as we have it over inside of Visual Studio code with one very important difference.

147
00:10:30,720 --> 00:10:37,080
You'll notice on line one of our program we define the chalk variable over here that does indeed happen

148
00:10:37,120 --> 00:10:42,690
but there's a whole bunch of stuff added beforehand from the very first character of line one all the

149
00:10:42,690 --> 00:10:46,380
way over here to where the const chalk is defined.

150
00:10:46,380 --> 00:10:48,180
This is all been added.

151
00:10:48,180 --> 00:10:53,130
Now this is a function that wraps your node j s script.

152
00:10:53,130 --> 00:10:58,490
So with other programming languages you might have a main function you define when you run the program.

153
00:10:58,500 --> 00:11:03,340
That's the function that starts up your application with no J S we don't have that.

154
00:11:03,390 --> 00:11:06,570
It just runs your entire script top to bottom.

155
00:11:06,570 --> 00:11:12,690
So to make node actually be able to run your program through the eight your code is wrapped in this

156
00:11:12,690 --> 00:11:14,280
function right here.

157
00:11:14,280 --> 00:11:17,160
Now this function does indeed get closed as well.

158
00:11:17,160 --> 00:11:22,380
So if I scroll all the way to the bottom of the file I can see the closing of the curly braces and the

159
00:11:22,380 --> 00:11:23,460
parentheses.

160
00:11:23,460 --> 00:11:29,160
So this function can be considered our main function of sorts and it provides to our application a few

161
00:11:29,160 --> 00:11:31,440
different values we can access.

162
00:11:31,440 --> 00:11:34,300
We'll be exploring the others later throughout the class.

163
00:11:34,380 --> 00:11:41,670
But one of them is required which we've already used extensively to load in NPM modules Node core modules

164
00:11:41,730 --> 00:11:44,340
and the other scripts we've created.

165
00:11:44,340 --> 00:11:49,560
Now we can actually add our project folder to the developer tools on the left hand side.

166
00:11:49,560 --> 00:11:54,850
We can get that done by clicking add folder to workspace under file system.

167
00:11:54,870 --> 00:11:59,650
I'm gonna go ahead and do just that and I'm going to navigate to my notes app directory.

168
00:11:59,700 --> 00:12:05,730
So from the desktop I've added the node course folder in there I have notes app which is the directory

169
00:12:05,730 --> 00:12:08,730
we've been working with in visual studio code.

170
00:12:08,730 --> 00:12:15,570
I'm going to select that directory and we can see that after we allow access to that folder what we

171
00:12:15,570 --> 00:12:17,370
see changes a little bit.

172
00:12:17,370 --> 00:12:20,390
Right here we no longer have that wrapping function.

173
00:12:20,460 --> 00:12:25,010
We just have the code we wrote exactly as we wrote it on the left hand side.

174
00:12:25,020 --> 00:12:30,330
We could even dig through the other files in our application and we have this little green icon to show

175
00:12:30,330 --> 00:12:36,820
which is the currently active file when I am debugging node j asked I like to keep the console open

176
00:12:36,820 --> 00:12:37,510
as well.

177
00:12:37,540 --> 00:12:43,690
We can actually have both sources and console open by keeping these sources tab open and using the escape

178
00:12:43,690 --> 00:12:45,520
key to toggle the console.

179
00:12:45,560 --> 00:12:50,470
So I'm going to leave that up as well so we can view the output from our program and we can even use

180
00:12:50,470 --> 00:12:54,960
this to run various commands which we'll see a little bit later.

181
00:12:54,970 --> 00:13:00,820
Now it's important to note that at this point in time not a single line of our program has executed

182
00:13:01,120 --> 00:13:01,630
right here.

183
00:13:01,630 --> 00:13:04,230
Line 1 is highlighted in blue.

184
00:13:04,300 --> 00:13:07,420
This is the line that the debugger is currently paused at.

185
00:13:07,690 --> 00:13:11,020
And when it's paused at a line it hasn't executed that line yet.

186
00:13:11,050 --> 00:13:15,910
So we haven't even defined this chalk variable on the right hand side.

187
00:13:15,940 --> 00:13:19,580
We have a lot of information about where our program currently is.

188
00:13:19,600 --> 00:13:22,330
So I have information about the call stack.

189
00:13:22,330 --> 00:13:23,400
I have the scope.

190
00:13:23,410 --> 00:13:26,300
We currently have access to an up above.

191
00:13:26,350 --> 00:13:29,380
I have tools for working through our application.

192
00:13:29,380 --> 00:13:32,030
So currently the debugger is paused.

193
00:13:32,050 --> 00:13:37,440
We need to go ahead and manually tell node to continue running the application.

194
00:13:37,540 --> 00:13:40,860
So at this point in time we can go ahead and do just that.

195
00:13:40,930 --> 00:13:46,750
What I'm going to do is click this blue play button that's going to resume executing our script and

196
00:13:46,780 --> 00:13:50,290
this is going to run until it's told otherwise.

197
00:13:50,290 --> 00:13:56,080
And one of the things that's going to posit is the debugger statement which we do have in our program.

198
00:13:56,080 --> 00:13:58,960
So I'm going to click play it is going to run the script.

199
00:13:58,960 --> 00:14:01,230
Now you can see we are over in notes dot.

200
00:14:01,240 --> 00:14:06,340
J.S. Right here on line 8 where we defined that debugger statement.

201
00:14:06,340 --> 00:14:11,750
And at this point in time we can really start to debug our program at this point in time.

202
00:14:11,770 --> 00:14:17,580
So over here in the call stack we have some useful information about exactly where we are in the program.

203
00:14:17,590 --> 00:14:21,030
We can see we are on line 8 of notes dot J.

204
00:14:21,030 --> 00:14:28,240
S in the ad note function and down below under scope we can actually see access to the variables we

205
00:14:28,240 --> 00:14:29,410
have in scope.

206
00:14:29,470 --> 00:14:35,860
So I have duplicate note I have notes I have this title and body and I can see all of those values right

207
00:14:35,890 --> 00:14:36,740
there.

208
00:14:36,760 --> 00:14:42,550
Now we can always dive deeper into any of those values by running some statements from the console so

209
00:14:42,550 --> 00:14:43,170
down below.

210
00:14:43,180 --> 00:14:49,930
For example I could access body by typing it out I can hit enter and I can get that value.

211
00:14:49,930 --> 00:14:54,780
I could even grab something like one of the notes so I could go ahead and reference the notes or write

212
00:14:55,120 --> 00:14:58,590
grabbing an item by index using my square brackets.

213
00:14:58,600 --> 00:15:04,300
I'll go ahead and grab the second item with the index of one I hit enter and I can dump that object

214
00:15:04,360 --> 00:15:09,050
to the console and make sure its individual properties are what I'm expecting.

215
00:15:09,070 --> 00:15:14,580
So with the debugger statement we can really dive deep into the current state of our application.

216
00:15:14,620 --> 00:15:20,980
At that point in time and we can figure out exactly what's not looking right and what needs to change

217
00:15:21,360 --> 00:15:26,410
now as we run through our program eventually we will get to the end and that's what's going to happen

218
00:15:26,410 --> 00:15:30,660
if we click play again since we don't have any other debugger statements.

219
00:15:30,670 --> 00:15:34,070
It is going to work through to the end and now we're all done.

220
00:15:34,090 --> 00:15:36,780
We have ran through the application and down below.

221
00:15:36,880 --> 00:15:41,130
I am seeing the console dialog note title taken.

222
00:15:41,290 --> 00:15:47,080
Now unfortunately chalk can't style the output in the debugger but that's OK as that's just a little

223
00:15:47,080 --> 00:15:53,530
utility to make our applications a little nicer it's not an essential piece to the puzzle at this point.

224
00:15:53,530 --> 00:15:59,110
Our application has finished and if I closed down the developer tools I can see that on that inspect

225
00:15:59,110 --> 00:16:02,720
page there is no longer a remote target available.

226
00:16:02,770 --> 00:16:08,650
Now if I wanted to run through the program again and debug things I can run a single command from the

227
00:16:08,650 --> 00:16:10,120
debugger in the terminal.

228
00:16:10,120 --> 00:16:14,650
Right here I can run restart that's going to start the program again.

229
00:16:14,650 --> 00:16:20,200
I can see I now have a new remote target and I can inspect the application again working through it

230
00:16:20,260 --> 00:16:23,960
from beginning to end looking for whatever I happen to be looking for.

231
00:16:24,130 --> 00:16:29,740
Now at some point we're gonna be all done with the inspector and we can always shut it down by heading

232
00:16:29,740 --> 00:16:34,360
over to the terminal and using control C twice when we do that.

233
00:16:34,360 --> 00:16:39,670
It's going to exit the process bringing us back to the command line where we can do whatever we want.

234
00:16:39,670 --> 00:16:46,420
We could install a new NPM module or we could run our node application without inspect if we fixed the

235
00:16:46,420 --> 00:16:51,970
issue where debugging it from there or we can go ahead and remove that debugger statement bringing our

236
00:16:51,970 --> 00:16:55,440
application back to the state it was when we first started.

237
00:16:55,840 --> 00:16:59,920
So there we go a couple of tools we can use to debug our apps.

238
00:16:59,920 --> 00:17:06,460
We explore a console dot log as well as the debugger in the next video we're going to continue working

239
00:17:06,460 --> 00:17:07,600
through debugging.

240
00:17:07,600 --> 00:17:08,980
I'm excited to get to that.

241
00:17:09,010 --> 00:17:11,310
So let's go ahead and jump right in.