1 00:00:00,221 --> 00:00:04,574 So far you've learned how to set break points and use debugging tools for 2 00:00:04,574 --> 00:00:08,584 inspecting and modifying variables in JavaScript expressions. 3 00:00:08,584 --> 00:00:13,548 Now, we'll take a look at how to inspect the flow of your application by stepping 4 00:00:13,548 --> 00:00:15,230 into and out of functions. 5 00:00:15,230 --> 00:00:16,182 In the browser, 6 00:00:16,182 --> 00:00:20,740 I'll once again trigger the break points set on line 37 by clicking on a name. 7 00:00:20,740 --> 00:00:25,330 Earlier, you used the step over feature to inspect how your code 8 00:00:25,330 --> 00:00:27,204 is executed line by line. 9 00:00:27,204 --> 00:00:30,925 Step over doesn't go into functions, it's steps over them, 10 00:00:30,925 --> 00:00:32,827 which is where it gets its name. 11 00:00:32,827 --> 00:00:38,529 For example, clicking the step over button moves the debugger forward to line 39. 12 00:00:38,529 --> 00:00:43,008 On line 39, there's a call to the function reverse string. 13 00:00:43,008 --> 00:00:47,447 I can see what's going inside this function by using the step into button. 14 00:00:47,447 --> 00:00:51,793 Click step into, and I jump inside the reverse string function and 15 00:00:51,793 --> 00:00:54,908 pause on the first line of the function, 28. 16 00:00:54,908 --> 00:00:59,357 Now I can step over each line inside this function to see the state of 17 00:00:59,357 --> 00:01:01,113 the application change. 18 00:01:01,113 --> 00:01:05,511 I know that the reverse string function works correctly because the app does 19 00:01:05,511 --> 00:01:07,239 display the reverse string. 20 00:01:07,239 --> 00:01:11,381 So I can opt to step out of this function by clicking the step out button. 21 00:01:11,381 --> 00:01:14,539 Step out lets you complete the current function and 22 00:01:14,539 --> 00:01:17,117 jump back to the function that called it. 23 00:01:17,117 --> 00:01:22,170 So clicking step out moves the debugger out of the reverse string function and 24 00:01:22,170 --> 00:01:25,138 back inside the route handler that calls it. 25 00:01:25,138 --> 00:01:28,864 Now I'm on the line of code that runs after reverse string is called and 26 00:01:28,864 --> 00:01:32,541 executed, where the handler responds with the template to render. 27 00:01:32,541 --> 00:01:35,541 Notice it's a render method from express. 28 00:01:35,541 --> 00:01:38,397 You can even step in functions you didn't write. 29 00:01:38,397 --> 00:01:39,414 For example, 30 00:01:39,414 --> 00:01:45,104 I can jump inside the express render function by clicking the step into button. 31 00:01:45,104 --> 00:01:49,272 This code brings up the source file where the function is written. 32 00:01:49,272 --> 00:01:53,687 When inside the render function, I see that it takes in the view, 33 00:01:53,687 --> 00:01:56,579 which is the reverse template to display, 34 00:01:56,579 --> 00:02:01,096 and options which is the local variables that display in the view. 35 00:02:01,096 --> 00:02:04,908 If I go into the debug console and type options, 36 00:02:04,908 --> 00:02:10,070 I see that there's a reversed key but there's no original key. 37 00:02:10,070 --> 00:02:12,886 I think that might just be the bug I'm trying to fix. 38 00:02:12,886 --> 00:02:16,918 So here in the debug console, 39 00:02:16,918 --> 00:02:22,724 I'll test it by typing options = an object 40 00:02:22,724 --> 00:02:27,401 with an original key set to mali and 41 00:02:27,401 --> 00:02:34,685 a reversed key set to ilam, which is mali backwards. 42 00:02:34,685 --> 00:02:36,571 Then press Enter. 43 00:02:36,571 --> 00:02:40,299 I'll then resume the application by clicking the continue button. 44 00:02:44,015 --> 00:02:48,828 Then view the app and the browser and great that indeed is the issue. 45 00:02:48,828 --> 00:02:52,990 The options object is missing the original key. 46 00:02:52,990 --> 00:02:57,902 I found the problem, so now I can stop running the debugger by 47 00:02:57,902 --> 00:03:03,312 clicking the Stop button, then edit the code in the app.js file. 48 00:03:03,312 --> 00:03:08,042 In the route handler on line 41, the reversed variable is being 49 00:03:08,042 --> 00:03:12,950 passed into the local variables that are accessed by the template. 50 00:03:12,950 --> 00:03:18,272 So this is where I should also pass the original variable. 51 00:03:19,488 --> 00:03:24,984 Now, I'll run the app in the terminal with npm start. 52 00:03:27,556 --> 00:03:28,193 Click on a name. 53 00:03:28,193 --> 00:03:31,018 And see that it works. 54 00:03:31,018 --> 00:03:37,711 I'll test a few other routes, for example, Carlos and Emily. 55 00:03:40,382 --> 00:03:43,417 And everything works great. 56 00:03:43,417 --> 00:03:47,252 So I hope that you've enjoyed learning some of the debugging features 57 00:03:47,252 --> 00:03:50,307 available to you in VS code, and how they can improve and 58 00:03:50,307 --> 00:03:52,648 accelerate your node development cycle. 59 00:03:52,648 --> 00:03:56,708 Be sure to review the teacher's notes with this video to explore other features that 60 00:03:56,708 --> 00:03:58,488 weren't covered in this workshop. 61 00:03:58,488 --> 00:04:01,867 The next time you need insight into what's happening in your Node app, 62 00:04:01,867 --> 00:04:05,924 save yourself from the time and maybe the frustration of dealing with console.log by 63 00:04:05,924 --> 00:04:08,880 taking advantage of the features of VS code you just learned. 64 00:04:08,880 --> 00:04:13,850 Debugging in VS code might feel a little awkward or uncomfortable at first. 65 00:04:13,850 --> 00:04:16,529 And it might take a few tries to find a Node debugging cycle that works 66 00:04:16,529 --> 00:04:17,093 best for you. 67 00:04:17,093 --> 00:04:21,390 Like anything else, it gets easier and more familiar with time, practice, and 68 00:04:21,390 --> 00:04:22,157 experience. 69 00:04:22,157 --> 00:04:25,274 If you have questions about anything covered in this workshop, 70 00:04:25,274 --> 00:04:29,214 feel free to reach out to other students in the community or the Treehouse staff. 71 00:04:29,214 --> 00:04:31,209 Thanks everyone and happy debugging.