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.