1
00:00:01,120 --> 00:00:02,420
‫In this video, we're gonna learn

2
00:00:02,420 --> 00:00:06,120
‫about debugging Node.JS because, let's face it,

3
00:00:06,120 --> 00:00:09,240
‫there will always be some bugs in our code no matter

4
00:00:09,240 --> 00:00:11,040
‫how careful we are.

5
00:00:11,040 --> 00:00:13,910
‫And so it's good to have a tool to help us

6
00:00:13,910 --> 00:00:15,740
‫with debugging our code.

7
00:00:15,740 --> 00:00:18,870
‫Now this is not really about error handling with Express,

8
00:00:18,870 --> 00:00:21,200
‫but I thought this was a good point in the course

9
00:00:21,200 --> 00:00:23,510
‫to introduce you to a debugging tool

10
00:00:23,510 --> 00:00:26,423
‫which we might then use throughout the rest of the course.

11
00:00:27,920 --> 00:00:31,270
‫And there are different ways of debugging Node.JS code.

12
00:00:31,270 --> 00:00:33,740
‫For example, we could use VS code for that.

13
00:00:33,740 --> 00:00:38,190
‫But, actually, Google very recently released an amazing tool

14
00:00:38,190 --> 00:00:42,840
‫which we can use to debug which is called NDB, all right?

15
00:00:42,840 --> 00:00:46,610
‫So let's move over to our other terminal here

16
00:00:46,610 --> 00:00:48,850
‫and then install NDB.

17
00:00:48,850 --> 00:00:51,720
‫And NDB, which stands for Node debugger,

18
00:00:51,720 --> 00:00:53,823
‫is actually just an NPM package.

19
00:00:54,780 --> 00:00:56,927
‫So NPM install NDB.

20
00:00:58,440 --> 00:01:00,250
‫All right, and you should then install it

21
00:01:00,250 --> 00:01:04,120
‫as a global package, all right?

22
00:01:04,120 --> 00:01:07,563
‫And if you're on a Mac, you might need global permissions.

23
00:01:08,440 --> 00:01:10,890
‫So just write sudo here in front.

24
00:01:10,890 --> 00:01:14,720
‫Or if you're not at all able to install it globally,

25
00:01:14,720 --> 00:01:17,610
‫you can always just install it locally

26
00:01:17,610 --> 00:01:19,003
‫as a death dependency.

27
00:01:20,040 --> 00:01:22,420
‫So just like this, all right?

28
00:01:22,420 --> 00:01:25,000
‫Anyway, please go ahead and install this tool now.

29
00:01:25,000 --> 00:01:25,870
‫I'm not going to do it

30
00:01:25,870 --> 00:01:28,590
‫because it can be quite a heavy download, and

31
00:01:28,590 --> 00:01:30,630
‫that takes a bit too long now.

32
00:01:30,630 --> 00:01:33,720
‫Anyway, as soon as you have the tool installed,

33
00:01:33,720 --> 00:01:36,130
‫then let's head over to package.jason

34
00:01:36,130 --> 00:01:39,710
‫and add a new script here, all right?

35
00:01:39,710 --> 00:01:42,173
‫And I'm gonna call that one debug.

36
00:01:43,770 --> 00:01:44,900
‫Okay?

37
00:01:44,900 --> 00:01:47,270
‫And so the command that we want to run here

38
00:01:47,270 --> 00:01:50,890
‫is simply NDB, so the note debugger

39
00:01:50,890 --> 00:01:53,250
‫and then again our entry point,

40
00:01:53,250 --> 00:01:56,270
‫So, server.js

41
00:01:56,270 --> 00:01:57,103
‫Okay?

42
00:01:57,103 --> 00:01:59,200
‫And now this is gonna work no matter if you installed

43
00:01:59,200 --> 00:02:01,320
‫NDB locally or globally.

44
00:02:01,320 --> 00:02:03,537
‫All right, so let's now run the script.

45
00:02:03,537 --> 00:02:05,260
‫And in order for this to work

46
00:02:05,260 --> 00:02:07,690
‫we actually need to finish this process

47
00:02:07,690 --> 00:02:09,460
‫because it's basically gonna start

48
00:02:09,460 --> 00:02:12,210
‫the server as well and so it will then

49
00:02:12,210 --> 00:02:14,120
‫try to do it on the same port

50
00:02:14,120 --> 00:02:15,980
‫and that's of course not gonna work.

51
00:02:15,980 --> 00:02:18,450
‫So we need to finish the one that's currently running

52
00:02:18,450 --> 00:02:21,670
‫and then from here we can run NPM

53
00:02:21,670 --> 00:02:22,503
‫run

54
00:02:23,690 --> 00:02:24,523
‫debug

55
00:02:24,523 --> 00:02:26,370
‫All right, and so now

56
00:02:26,370 --> 00:02:28,230
‫a new Chrome window should open

57
00:02:29,070 --> 00:02:31,220
‫so what's called a headless Chrome,

58
00:02:31,220 --> 00:02:32,690
‫but it's not a real Chrome.

59
00:02:32,690 --> 00:02:34,890
‫So you will see the Chrome icon down here

60
00:02:34,890 --> 00:02:36,550
‫and also here in the menu bar

61
00:02:36,550 --> 00:02:39,410
‫but really this is just the note debugger.

62
00:02:39,410 --> 00:02:41,260
‫So what do we have here?

63
00:02:41,260 --> 00:02:45,030
‫Well on the left side, we have our complete file system.

64
00:02:45,030 --> 00:02:48,010
‫We also have access to our NPM scripts here

65
00:02:48,010 --> 00:02:50,810
‫which we can actually run from here.

66
00:02:50,810 --> 00:02:52,910
‫We also have a console

67
00:02:52,910 --> 00:02:55,610
‫and so here we have our usual outputs with the app running

68
00:02:55,610 --> 00:02:57,310
‫and the database connection

69
00:02:58,570 --> 00:03:01,330
‫and we also have the performance and memory tabs,

70
00:03:01,330 --> 00:03:03,090
‫which we're not gonna use.

71
00:03:03,090 --> 00:03:05,170
‫All right, now if you're familiar

72
00:03:05,170 --> 00:03:07,130
‫with the general debugging process

73
00:03:07,130 --> 00:03:10,100
‫then all of this gonna be kinda familiar to you.

74
00:03:10,100 --> 00:03:12,260
‫All right, but if not don't worry

75
00:03:12,260 --> 00:03:13,810
‫I will show you a couple of techniques

76
00:03:13,810 --> 00:03:15,240
‫throughout this video.

77
00:03:15,240 --> 00:03:19,560
‫All right, anyway let's now open up our server.js.

78
00:03:19,560 --> 00:03:21,460
‫And one thing that's really amazing

79
00:03:21,460 --> 00:03:24,500
‫is that we can actually edit our files in here,

80
00:03:24,500 --> 00:03:26,040
‫so right in this debugger.

81
00:03:26,040 --> 00:03:28,530
‫So, for example let's say that we find a bug

82
00:03:28,530 --> 00:03:30,820
‫and we then want to fix it right away.

83
00:03:30,820 --> 00:03:33,340
‫We can do that right here in the debugger

84
00:03:33,340 --> 00:03:35,790
‫and it will then update the original code.

85
00:03:35,790 --> 00:03:37,020
‫So just to test it,

86
00:03:37,020 --> 00:03:38,943
‫let's just add a comment down here.

87
00:03:40,050 --> 00:03:44,460
‫So, test then hit command or control s to save

88
00:03:44,460 --> 00:03:46,570
‫and then when we go back to our code

89
00:03:47,830 --> 00:03:49,800
‫and open up server.js

90
00:03:49,800 --> 00:03:53,060
‫there you will see that the comment is actually here.

91
00:03:53,060 --> 00:03:53,950
‫Okay?

92
00:03:53,950 --> 00:03:55,810
‫And if we now delete it from here,

93
00:03:55,810 --> 00:03:57,370
‫give it a save,

94
00:03:57,370 --> 00:03:59,220
‫and back to the debugger,

95
00:03:59,220 --> 00:04:02,300
‫then it is gonna be gone from here as well.

96
00:04:02,300 --> 00:04:04,810
‫Okay, but now about the debugging itself.

97
00:04:04,810 --> 00:04:06,860
‫I would say that the fundamental aspect

98
00:04:06,860 --> 00:04:09,740
‫of the debugging is to set break points.

99
00:04:09,740 --> 00:04:12,420
‫So break points are basically points in our code

100
00:04:12,420 --> 00:04:14,540
‫that we can define here in the debugger,

101
00:04:14,540 --> 00:04:16,810
‫where our code will then stop running.

102
00:04:16,810 --> 00:04:18,810
‫It will basically freeze in time

103
00:04:18,810 --> 00:04:21,900
‫and we can then take a look at all our variables.

104
00:04:21,900 --> 00:04:24,530
‫Okay, so that will then be extremely useful

105
00:04:24,530 --> 00:04:26,270
‫to find some bugs.

106
00:04:26,270 --> 00:04:28,340
‫Now, right now there's not any bug in here,

107
00:04:28,340 --> 00:04:30,860
‫but let's still add a break point.

108
00:04:30,860 --> 00:04:34,850
‫And I'm going to add that break point here in this line 21.

109
00:04:34,850 --> 00:04:36,610
‫So I click here on this line

110
00:04:36,610 --> 00:04:38,920
‫and then you see this green marker, okay?

111
00:04:38,920 --> 00:04:41,600
‫And so that means that the code will stop at this point

112
00:04:41,600 --> 00:04:43,950
‫when we execute it, okay?

113
00:04:43,950 --> 00:04:45,750
‫And you actually can see it here on the right side

114
00:04:45,750 --> 00:04:48,850
‫on the break points tab here as well.

115
00:04:48,850 --> 00:04:50,680
‫Now, our application is actually

116
00:04:50,680 --> 00:04:52,360
‫already running at this point

117
00:04:52,360 --> 00:04:55,350
‫and basically waiting requests to come in.

118
00:04:55,350 --> 00:04:56,830
‫And so what we need to do here

119
00:04:56,830 --> 00:05:00,810
‫is to right click and then click on run this script.

120
00:05:00,810 --> 00:05:02,670
‫Okay, and so that will then basically

121
00:05:02,670 --> 00:05:04,153
‫run the script here again.

122
00:05:05,638 --> 00:05:06,720
‫All right?

123
00:05:06,720 --> 00:05:08,390
‫And so here we go.

124
00:05:08,390 --> 00:05:10,380
‫So you see here on the right side,

125
00:05:10,380 --> 00:05:12,940
‫that that it says paused on break point

126
00:05:12,940 --> 00:05:16,040
‫and so all the code that is above this break point here

127
00:05:16,040 --> 00:05:18,330
‫has already executed at this point.

128
00:05:18,330 --> 00:05:21,390
‫And so we can now take a look at the variables.

129
00:05:21,390 --> 00:05:24,230
‫For example, we can hover this port variable

130
00:05:24,230 --> 00:05:27,220
‫and we see that it's set to 3,000.

131
00:05:27,220 --> 00:05:29,670
‫And also actually hit this place here

132
00:05:29,670 --> 00:05:31,560
‫in the code here, all right.

133
00:05:31,560 --> 00:05:33,830
‫And then the third way of seeing it

134
00:05:33,830 --> 00:05:35,380
‫is here on the right side.

135
00:05:35,380 --> 00:05:38,280
‫So we have a couple of basically tabs here

136
00:05:38,280 --> 00:05:40,940
‫so node processes, the watch, the call stack,

137
00:05:40,940 --> 00:05:43,240
‫which is not really important for now.

138
00:05:43,240 --> 00:05:46,940
‫The scope, and so the scope is where all our

139
00:05:46,940 --> 00:05:49,050
‫variables are, okay?

140
00:05:49,050 --> 00:05:52,530
‫And so here again, you have the port set to 3,000.

141
00:05:52,530 --> 00:05:54,620
‫Okay, and here you also can see

142
00:05:54,620 --> 00:05:57,010
‫the five variables that we have access to

143
00:05:57,010 --> 00:05:58,490
‫in all modules.

144
00:05:58,490 --> 00:06:01,290
‫Remember that from the models lecture?

145
00:06:01,290 --> 00:06:03,590
‫So we have the directory name,

146
00:06:03,590 --> 00:06:07,250
‫we have the file name, we have the require function,

147
00:06:07,250 --> 00:06:10,150
‫we have module, and we have export.

148
00:06:10,150 --> 00:06:12,690
‫So remember, these are the five variables

149
00:06:12,690 --> 00:06:15,400
‫that are available in each and every module.

150
00:06:15,400 --> 00:06:17,960
‫And actually when we execute a code like this

151
00:06:17,960 --> 00:06:21,730
‫in the debugger, we can see that our entire code

152
00:06:21,730 --> 00:06:24,383
‫is in fact wrapped into this function.

153
00:06:25,390 --> 00:06:26,560
‫Right?

154
00:06:26,560 --> 00:06:28,810
‫So this wrapper function that gives us access

155
00:06:28,810 --> 00:06:31,230
‫to these five variables.

156
00:06:31,230 --> 00:06:34,710
‫All right, next I also want to take a look at

157
00:06:34,710 --> 00:06:38,013
‫our app variable, so basically the Express application

158
00:06:38,013 --> 00:06:42,330
‫that we export from app.js, remember that.

159
00:06:42,330 --> 00:06:44,870
‫And here is really a ton of stuff

160
00:06:44,870 --> 00:06:47,330
‫but what I find interesting

161
00:06:47,330 --> 00:06:50,393
‫is to take a look at this router here.

162
00:06:51,660 --> 00:06:54,763
‫Okay, and so in router we then have stack.

163
00:06:56,680 --> 00:06:59,100
‫Okay, and so let's open this up a little bit

164
00:07:00,240 --> 00:07:02,070
‫and so this stack here is basically

165
00:07:02,070 --> 00:07:05,420
‫the middleware stack that we have in our application.

166
00:07:05,420 --> 00:07:09,010
‫Okay, for example we have our jsonParser here,

167
00:07:09,010 --> 00:07:13,030
‫we have the code that serves the static files.

168
00:07:13,030 --> 00:07:16,760
‫Take a look at that here in app.js

169
00:07:16,760 --> 00:07:19,170
‫so this express.static.

170
00:07:19,170 --> 00:07:21,380
‫We also have the logger here

171
00:07:21,380 --> 00:07:23,910
‫which comes here from using Morgan.

172
00:07:23,910 --> 00:07:26,310
‫Then you have these next two middleware functions,

173
00:07:26,310 --> 00:07:27,480
‫so these two here,

174
00:07:27,480 --> 00:07:31,590
‫which are anonymous, so this one and this one

175
00:07:31,590 --> 00:07:33,740
‫and maybe we can take a look at them.

176
00:07:33,740 --> 00:07:35,803
‫But not really.

177
00:07:36,640 --> 00:07:38,390
‫Okay, it doesn't matter.

178
00:07:38,390 --> 00:07:40,740
‫So this is really just for curiosity

179
00:07:40,740 --> 00:07:42,170
‫and showing you that we actually

180
00:07:42,170 --> 00:07:45,520
‫can take a look at our middleware stack, okay?

181
00:07:45,520 --> 00:07:47,603
‫Then finally we have our two routers.

182
00:07:48,795 --> 00:07:49,970
‫Okay?

183
00:07:49,970 --> 00:07:53,080
‫So, we have the router, and you see here actually

184
00:07:53,080 --> 00:07:55,160
‫the route for which it applies.

185
00:07:55,160 --> 00:08:00,160
‫So api/v1/tours right and so I find this really interesting.

186
00:08:00,980 --> 00:08:03,710
‫Of course we still have the users here as well.

187
00:08:03,710 --> 00:08:07,250
‫And so with this really can take a look at how the

188
00:08:07,250 --> 00:08:09,823
‫Express application works behind the scenes.

189
00:08:10,710 --> 00:08:11,543
‫Okay?

190
00:08:12,380 --> 00:08:14,623
‫So let's close up all of this.

191
00:08:16,140 --> 00:08:18,440
‫And the other thing that I wanted to show you

192
00:08:18,440 --> 00:08:20,210
‫is here in the global variables

193
00:08:21,120 --> 00:08:24,300
‫because here we have the process variable

194
00:08:25,850 --> 00:08:28,453
‫or at least we should have it somewhere here.

195
00:08:30,700 --> 00:08:32,910
‫Yeah, so indeed here it is.

196
00:08:32,910 --> 00:08:35,140
‫So here we have the process variable

197
00:08:35,140 --> 00:08:37,400
‫that is remember, available everywhere.

198
00:08:37,400 --> 00:08:41,070
‫And so that's why it's called here a global variable.

199
00:08:41,070 --> 00:08:43,310
‫Then in there we have process.env

200
00:08:44,300 --> 00:08:46,030
‫and to remember that this where

201
00:08:46,030 --> 00:08:49,250
‫all our environment variables are stored.

202
00:08:49,250 --> 00:08:52,180
‫And so indeed here we have our database string,

203
00:08:52,180 --> 00:08:55,340
‫we have the local database, the password,

204
00:08:55,340 --> 00:08:57,910
‫and really all the other environment variables

205
00:08:57,910 --> 00:09:01,333
‫that we defined in our config.n file.

206
00:09:02,630 --> 00:09:03,740
‫All right?

207
00:09:03,740 --> 00:09:07,070
‫So really interesting stuff that we can take a look at here.

208
00:09:07,070 --> 00:09:10,260
‫But now let's continue with our debugging.

209
00:09:10,260 --> 00:09:11,093
‫Okay?

210
00:09:11,093 --> 00:09:13,540
‫So we stopped the code, we froze it in time

211
00:09:13,540 --> 00:09:16,630
‫here at this point, so at line 21.

212
00:09:16,630 --> 00:09:19,720
‫Okay, and so now we can click here on this button,

213
00:09:19,720 --> 00:09:22,400
‫in order to actually continue to running the code.

214
00:09:22,400 --> 00:09:24,210
‫And since we have no more break points,

215
00:09:24,210 --> 00:09:26,070
‫the code will then break no more,

216
00:09:26,070 --> 00:09:28,500
‫and basically finish running.

217
00:09:28,500 --> 00:09:29,980
‫So let's do that.

218
00:09:29,980 --> 00:09:32,910
‫And so now our application is really running.

219
00:09:32,910 --> 00:09:33,830
‫Let's take a look at that.

220
00:09:33,830 --> 00:09:36,600
‫In Console, okay?

221
00:09:36,600 --> 00:09:38,720
‫So app running on port 3,000

222
00:09:38,720 --> 00:09:40,793
‫and DB connection successful, of course.

223
00:09:43,550 --> 00:09:44,793
‫What's happened here?

224
00:09:46,120 --> 00:09:47,350
‫Now, all right,

225
00:09:47,350 --> 00:09:50,163
‫so let's now quickly do a request here.

226
00:09:51,580 --> 00:09:53,650
‫So simply one for /tours

227
00:09:55,532 --> 00:09:57,100
‫and now we have all this junk here

228
00:09:57,100 --> 00:09:59,683
‫and I'm gonna take care of that in a second.

229
00:10:01,050 --> 00:10:04,110
‫All right, and if you now come back to our Console here

230
00:10:04,110 --> 00:10:07,670
‫then of course we have all the code that we had before.

231
00:10:07,670 --> 00:10:09,220
‫Hello from the middleware and then

232
00:10:09,220 --> 00:10:12,120
‫how the long query actually took.

233
00:10:12,120 --> 00:10:14,890
‫All right, and now before we do anything else

234
00:10:14,890 --> 00:10:17,693
‫let's actually get rid of these junk tours.

235
00:10:19,380 --> 00:10:20,893
‫So I'm gonna reload it here,

236
00:10:22,270 --> 00:10:24,720
‫and I guess it will be somewhere here at the end.

237
00:10:26,720 --> 00:10:29,103
‫So, test whatever here.

238
00:10:29,980 --> 00:10:31,593
‫So let's get rid of it.

239
00:10:32,490 --> 00:10:35,573
‫This is the secret tour and I actually want to keep it here.

240
00:10:37,480 --> 00:10:40,413
‫But everything from here on we no longer want.

241
00:10:44,720 --> 00:10:45,830
‫And so

242
00:10:48,150 --> 00:10:51,490
‫so yeah, so now we're back to having just 10 tours,

243
00:10:51,490 --> 00:10:53,480
‫just as before.

244
00:10:53,480 --> 00:10:55,860
‫Anyway let's now actually set a break point

245
00:10:55,860 --> 00:10:58,203
‫in the function that handles this route.

246
00:10:59,060 --> 00:11:02,150
‫Okay, and so we come to our controllers folder

247
00:11:02,150 --> 00:11:04,540
‫and there we have the tour controller.

248
00:11:04,540 --> 00:11:05,373
‫Okay?

249
00:11:05,373 --> 00:11:08,200
‫And then the handler function is this get all tours.

250
00:11:08,200 --> 00:11:09,760
‫So for now all I wanted to do

251
00:11:09,760 --> 00:11:11,960
‫is to just set a break point here

252
00:11:11,960 --> 00:11:15,010
‫so that we can take a look at what these variables

253
00:11:15,010 --> 00:11:17,710
‫look like after the query is already done.

254
00:11:17,710 --> 00:11:20,430
‫So this code here will get our tours

255
00:11:20,430 --> 00:11:21,900
‫and we will then stop the code

256
00:11:21,900 --> 00:11:25,210
‫basically before actually sending it as a response.

257
00:11:25,210 --> 00:11:29,790
‫Okay, and so all we need to do is to actually do the request

258
00:11:29,790 --> 00:11:32,730
‫because that will then trigger that function.

259
00:11:32,730 --> 00:11:33,600
‫Right?

260
00:11:33,600 --> 00:11:36,550
‫And so since we have a break point, we automatically move

261
00:11:36,550 --> 00:11:39,440
‫back to this window here, and to the point

262
00:11:39,440 --> 00:11:41,270
‫where the code has stopped.

263
00:11:41,270 --> 00:11:43,713
‫So, what kind of variables do we have here?

264
00:11:44,830 --> 00:11:47,690
‫So you see that we have the request and a response,

265
00:11:47,690 --> 00:11:49,630
‫and we also have the features variable,

266
00:11:49,630 --> 00:11:51,670
‫and the tours, of course.

267
00:11:51,670 --> 00:11:53,770
‫So let's first take a look at the request.

268
00:11:54,740 --> 00:11:57,500
‫And here again, you see that we have all kinds

269
00:11:57,500 --> 00:11:58,560
‫of stuff really.

270
00:11:58,560 --> 00:12:02,470
‫So we have, baseurl, we have the method,

271
00:12:02,470 --> 00:12:05,150
‫we have for example, request.query,

272
00:12:05,150 --> 00:12:07,280
‫which right now is empty because we didn't pass

273
00:12:07,280 --> 00:12:08,560
‫any query string,

274
00:12:08,560 --> 00:12:11,170
‫but you see that it's really already here.

275
00:12:11,170 --> 00:12:13,730
‫Okay, and so you start seeing now how handy

276
00:12:13,730 --> 00:12:16,810
‫this can be in order to debug our code.

277
00:12:16,810 --> 00:12:20,060
‫So basically to freeze our code in time instead of

278
00:12:20,060 --> 00:12:23,620
‫having to do all these console.logs that we used to do

279
00:12:23,620 --> 00:12:25,040
‫up until this point.

280
00:12:25,040 --> 00:12:27,770
‫So usually when we wanted to take a look at

281
00:12:27,770 --> 00:12:31,010
‫the query for example, we would do a bunch of console.logs

282
00:12:31,010 --> 00:12:34,590
‫and use that to figure out a bug in case that something

283
00:12:34,590 --> 00:12:35,950
‫was not working.

284
00:12:35,950 --> 00:12:38,150
‫Right, but now we have this amazing tool

285
00:12:38,150 --> 00:12:41,130
‫which can help us avoid all these console.logs

286
00:12:41,130 --> 00:12:42,460
‫for example.

287
00:12:42,460 --> 00:12:44,530
‫Then we also have the response of course.

288
00:12:44,530 --> 00:12:48,460
‫And again you see all of these properties and methods

289
00:12:48,460 --> 00:12:50,890
‫that are on there, and they are not really interesting

290
00:12:50,890 --> 00:12:51,990
‫for us now.

291
00:12:51,990 --> 00:12:54,900
‫What I wanted to show you is of course at this point

292
00:12:54,900 --> 00:12:57,520
‫we already have the tours, okay?

293
00:12:57,520 --> 00:13:02,450
‫So we have nine tours, so let's take a look at them.

294
00:13:02,450 --> 00:13:06,000
‫And it looks kind of weird here, so in order to get access

295
00:13:06,000 --> 00:13:10,480
‫to the actual values, we need to click here, okay,

296
00:13:10,480 --> 00:13:11,880
‫so that's a bit weird.

297
00:13:11,880 --> 00:13:14,037
‫But it works of course.

298
00:13:14,037 --> 00:13:18,110
‫And so you see that in fact our tours are already here

299
00:13:18,110 --> 00:13:21,093
‫and of course the features as well.

300
00:13:21,930 --> 00:13:24,650
‫So you see here that the features are an instance of

301
00:13:24,650 --> 00:13:27,670
‫the API features class just as we defined it.

302
00:13:27,670 --> 00:13:31,130
‫And in there we have the query and the query string.

303
00:13:31,130 --> 00:13:34,660
‫Great, so this is how we take a look at all the variables.

304
00:13:34,660 --> 00:13:37,087
‫And this is how the most important parts of

305
00:13:37,087 --> 00:13:38,680
‫the debugger work.

306
00:13:38,680 --> 00:13:41,750
‫Now in order to learn a bit about the debugging process

307
00:13:41,750 --> 00:13:45,400
‫itself, let's introduce a very small bug into our code,

308
00:13:45,400 --> 00:13:48,300
‫and then take a look at how we can use these tools

309
00:13:48,300 --> 00:13:51,280
‫that we have here to basically take a deeper look

310
00:13:51,280 --> 00:13:52,790
‫at our code.

311
00:13:52,790 --> 00:13:55,410
‫So I'm not gonna resume the skipped execution

312
00:13:55,410 --> 00:13:59,850
‫in order to run basically the rest of the code, okay?

313
00:13:59,850 --> 00:14:01,270
‫So that should be done now.

314
00:14:01,270 --> 00:14:03,670
‫So now here we have all response.

315
00:14:03,670 --> 00:14:06,320
‫So you see that it took all this time here,

316
00:14:06,320 --> 00:14:08,970
‫so three minutes and 29 seconds,

317
00:14:08,970 --> 00:14:11,410
‫but that's just because we paused the execution

318
00:14:11,410 --> 00:14:12,313
‫for so long.

319
00:14:14,130 --> 00:14:15,130
‫Okay.

320
00:14:15,130 --> 00:14:17,793
‫Now let's come to our code here.

321
00:14:19,160 --> 00:14:21,853
‫Let's close what we no longer need.

322
00:14:23,810 --> 00:14:28,410
‫So actually in our API features file,

323
00:14:28,410 --> 00:14:32,603
‫I want to introduce a small bug here in the limit fields.

324
00:14:33,570 --> 00:14:36,080
‫So let's say that we were trying to implement

325
00:14:36,080 --> 00:14:39,340
‫this method here, but instead of joining with a space here,

326
00:14:39,340 --> 00:14:41,790
‫we forgot to put it here.

327
00:14:41,790 --> 00:14:45,030
‫And so let's just say that we joined without any space,

328
00:14:45,030 --> 00:14:49,010
‫and so this would then give us a weird result, right?

329
00:14:49,010 --> 00:14:50,633
‫So let's actually test it out.

330
00:14:52,650 --> 00:14:54,480
‫So let's say

331
00:14:56,350 --> 00:14:59,690
‫fields and that we wanted only the name

332
00:14:59,690 --> 00:15:04,050
‫and the duration, right?

333
00:15:04,050 --> 00:15:07,400
‫Now before I can actually send that request,

334
00:15:07,400 --> 00:15:09,050
‫let's remove the breakpoint here.

335
00:15:10,650 --> 00:15:11,483
‫Okay?

336
00:15:11,483 --> 00:15:14,410
‫Sent the request, and now we actually do not get

337
00:15:14,410 --> 00:15:16,073
‫the name and the duration.

338
00:15:16,920 --> 00:15:19,410
‫So let's pretend that is our bug now

339
00:15:19,410 --> 00:15:23,510
‫and we're now trying to figure out why this is not working.

340
00:15:23,510 --> 00:15:24,520
‫Okay?

341
00:15:24,520 --> 00:15:26,490
‫So let's go to our debugger.

342
00:15:26,490 --> 00:15:28,470
‫And we know that the error must probably be

343
00:15:28,470 --> 00:15:31,053
‫somewhere in our limit fields method.

344
00:15:32,090 --> 00:15:35,530
‫And so let's basically stop the code from executing

345
00:15:35,530 --> 00:15:37,320
‫at this point, okay?

346
00:15:37,320 --> 00:15:40,880
‫Because this is where this method will actually be called

347
00:15:40,880 --> 00:15:43,927
‫and so from here we can enter that function

348
00:15:43,927 --> 00:15:45,130
‫for that method.

349
00:15:45,130 --> 00:15:46,100
‫Okay?

350
00:15:46,100 --> 00:15:48,883
‫So then let's fire off that request now,

351
00:15:50,240 --> 00:15:54,240
‫and so now we go back to our debugger automatically.

352
00:15:54,240 --> 00:15:57,250
‫So at this point this line and this line and this line

353
00:15:57,250 --> 00:16:00,880
‫of code have already executed, and so let's now use

354
00:16:00,880 --> 00:16:02,980
‫the step tool, okay?

355
00:16:02,980 --> 00:16:05,770
‫What step will do is that it will basically execute

356
00:16:05,770 --> 00:16:07,430
‫the next line of code.

357
00:16:07,430 --> 00:16:09,810
‫And in this case that will be inside of

358
00:16:09,810 --> 00:16:11,790
‫the limit fields method.

359
00:16:11,790 --> 00:16:16,143
‫So step, and it will then move right into that function.

360
00:16:17,000 --> 00:16:20,670
‫Okay so let's take a look at what we have here.

361
00:16:20,670 --> 00:16:24,070
‫For example this .query string is name comma duration,

362
00:16:24,070 --> 00:16:26,083
‫so that is correct, right?

363
00:16:26,990 --> 00:16:30,520
‫Okay so let's step to the next line.

364
00:16:30,520 --> 00:16:33,600
‫All right and so this is where this operation

365
00:16:33,600 --> 00:16:35,263
‫is actually happening.

366
00:16:36,440 --> 00:16:38,460
‫Then next up.

367
00:16:38,460 --> 00:16:40,823
‫Let's take a look at our variables here.

368
00:16:42,500 --> 00:16:47,090
‫And so here we now see field, and so here we have our bug.

369
00:16:47,090 --> 00:16:47,930
‫Okay?

370
00:16:47,930 --> 00:16:50,810
‫So the problem is, of course, that we have no space

371
00:16:50,810 --> 00:16:53,170
‫between name and duration.

372
00:16:53,170 --> 00:16:54,830
‫And so that's why it's not working.

373
00:16:54,830 --> 00:16:58,410
‫So fields is of course defined here, and so like this

374
00:16:58,410 --> 00:17:02,500
‫we can find our bug and correct it right away.

375
00:17:02,500 --> 00:17:04,940
‫So remember that the added step we do here

376
00:17:04,940 --> 00:17:07,780
‫are reflected immediately in the code.

377
00:17:07,780 --> 00:17:08,823
‫So give it a save,

378
00:17:09,700 --> 00:17:12,560
‫and then it will do it again.

379
00:17:12,560 --> 00:17:14,233
‫So I can keep stepping.

380
00:17:15,140 --> 00:17:17,270
‫And so now fields is correct.

381
00:17:17,270 --> 00:17:19,193
‫So name space duration.

382
00:17:20,780 --> 00:17:22,670
‫Then the next line of code.

383
00:17:22,670 --> 00:17:26,330
‫And now we enter into the select method on the query.

384
00:17:26,330 --> 00:17:28,420
‫But we're not interested in that at all,

385
00:17:28,420 --> 00:17:31,710
‫so we can say "step out of current function."

386
00:17:31,710 --> 00:17:32,543
‫Okay?

387
00:17:32,543 --> 00:17:35,730
‫So that select that we just thought was running

388
00:17:35,730 --> 00:17:37,880
‫this function here, okay?

389
00:17:37,880 --> 00:17:40,150
‫But of course we were not interested in that

390
00:17:40,150 --> 00:17:43,080
‫so we just quit it and moved on to the next line.

391
00:17:43,080 --> 00:17:44,950
‫So now we have return this,

392
00:17:44,950 --> 00:17:48,330
‫next line, and again.

393
00:17:48,330 --> 00:17:51,373
‫So now we're back to where we were but in the next line.

394
00:17:52,590 --> 00:17:53,840
‫So let's keep doing that.

395
00:17:55,040 --> 00:17:56,750
‫So now we're into page eight,

396
00:17:56,750 --> 00:17:59,060
‫but we're not really interested in this one,

397
00:17:59,060 --> 00:18:01,660
‫and so let's again step out of the current function.

398
00:18:02,950 --> 00:18:05,190
‫And now we're here at the tours definition.

399
00:18:05,190 --> 00:18:07,840
‫Which at this point is not yet done.

400
00:18:07,840 --> 00:18:10,610
‫And so let's again say step.

401
00:18:10,610 --> 00:18:14,070
‫And so now at this point our tours should be defined.

402
00:18:14,070 --> 00:18:17,950
‫All right so we have our nine tours over here.

403
00:18:17,950 --> 00:18:19,250
‫Let's take a look at them,

404
00:18:20,590 --> 00:18:21,810
‫and here they are.

405
00:18:21,810 --> 00:18:23,670
‫And actually they have all the data,

406
00:18:23,670 --> 00:18:26,880
‫so not just the one we defined but in fact,

407
00:18:26,880 --> 00:18:28,560
‫actually it doesn't.

408
00:18:28,560 --> 00:18:32,220
‫So we really only have the name and duration,

409
00:18:32,220 --> 00:18:35,490
‫so duration, name, and all the other ones

410
00:18:35,490 --> 00:18:36,980
‫are undefined.

411
00:18:36,980 --> 00:18:40,010
‫So that's just because we limited a query to only

412
00:18:40,010 --> 00:18:41,603
‫these two fields, remember?

413
00:18:42,500 --> 00:18:45,350
‫Now what I also wanted to show you is here in the features,

414
00:18:45,350 --> 00:18:49,370
‫we can take a look at our query and here we have

415
00:18:49,370 --> 00:18:52,240
‫the fields property for example where we see duration

416
00:18:52,240 --> 00:18:54,780
‫set to one and name set to one.

417
00:18:54,780 --> 00:18:58,300
‫And so that's exactly the two names that we selected.

418
00:18:58,300 --> 00:19:00,420
‫We also have these options here,

419
00:19:00,420 --> 00:19:05,420
‫which is at this point set to create it minus one.

420
00:19:05,690 --> 00:19:07,393
‫And so that's coming from here.

421
00:19:08,560 --> 00:19:10,500
‫So this here.

422
00:19:10,500 --> 00:19:13,360
‫So basically what this method here, this sort method

423
00:19:13,360 --> 00:19:17,350
‫is gonna do is that it will add this sort property here

424
00:19:17,350 --> 00:19:18,860
‫to these options, all right?

425
00:19:18,860 --> 00:19:22,110
‫And then we also have limit and skip which of course

426
00:19:22,110 --> 00:19:23,763
‫come here from page eight.

427
00:19:25,690 --> 00:19:26,523
‫Okay?

428
00:19:26,523 --> 00:19:29,160
‫So I thought that this also kind of interesting

429
00:19:29,160 --> 00:19:33,880
‫and yeah, so our code is now actually fixed and let's keep

430
00:19:33,880 --> 00:19:34,713
‫running this.

431
00:19:35,550 --> 00:19:38,630
‫And so we now should have our correct result.

432
00:19:38,630 --> 00:19:41,510
‫Now here it says we could not get any response,

433
00:19:41,510 --> 00:19:44,593
‫and that's because we took too long fixing our code.

434
00:19:45,490 --> 00:19:47,280
‫So we got an error connecting.

435
00:19:47,280 --> 00:19:48,693
‫But if we now send it again,

436
00:19:49,530 --> 00:19:51,050
‫and now we do it quicker.

437
00:19:51,050 --> 00:19:53,650
‫Or actually we could remove our breakpoint entirely.

438
00:19:55,280 --> 00:19:56,780
‫So let's keep it running,

439
00:19:56,780 --> 00:19:59,570
‫let's go back and now indeed we get the duration

440
00:19:59,570 --> 00:20:01,570
‫and the name as well.

441
00:20:01,570 --> 00:20:04,260
‫So that's because we just fixed our code

442
00:20:04,260 --> 00:20:06,550
‫using the NDB debugger.

443
00:20:06,550 --> 00:20:07,990
‫So great.

444
00:20:07,990 --> 00:20:10,840
‫That's a really amazing and helpful tool

445
00:20:10,840 --> 00:20:13,260
‫that we're gonna keep using throughout the rest

446
00:20:13,260 --> 00:20:14,220
‫of the course.

447
00:20:14,220 --> 00:20:17,530
‫Maybe not always, sometimes it's quicker to just

448
00:20:17,530 --> 00:20:19,540
‫throw in a console out log.

449
00:20:19,540 --> 00:20:22,350
‫But really, in some more complicated cases,

450
00:20:22,350 --> 00:20:24,253
‫I like to use this kind of tool.