1 00:00:00,119 --> 00:00:03,422 Now let's have a look at how to inspect and evaluate variables and 2 00:00:03,422 --> 00:00:05,412 expressions in VS Code's debug view. 3 00:00:05,412 --> 00:00:10,421 I'll start by once again pausing execution at the breakpoint set on line 37, by 4 00:00:10,421 --> 00:00:15,809 refreshing the app in the browser on local host for 3000, and clicking on the name. 5 00:00:15,809 --> 00:00:20,238 The Variables panel shows the variables available in the scope of 6 00:00:20,238 --> 00:00:21,533 the current line. 7 00:00:21,533 --> 00:00:25,230 As you can see, under Local, we have access to the request and 8 00:00:25,230 --> 00:00:29,073 response variables that are passed into the route handler, and 9 00:00:29,073 --> 00:00:32,364 the two constant variables, original and reversed. 10 00:00:32,364 --> 00:00:33,551 Currently, they're undefined. 11 00:00:33,551 --> 00:00:37,581 You can also see the current value of a variable by hovering 12 00:00:37,581 --> 00:00:39,892 over their source in the editor. 13 00:00:39,892 --> 00:00:42,332 You may be asking, why is original undefined, 14 00:00:42,332 --> 00:00:45,817 when we're breaking on the line where original is being declared? 15 00:00:45,817 --> 00:00:51,212 Well, its because the breakpoint pauses before the evaluation of the line. 16 00:00:51,212 --> 00:00:55,889 Pausing before the evaluation of the statement allows you to see the state of 17 00:00:55,889 --> 00:01:00,069 the application before and after the execution of the line of code. 18 00:01:00,069 --> 00:01:03,727 Now as the number of variables in the Variables panel increase, 19 00:01:03,727 --> 00:01:07,740 it may be difficult to keep track of the variables you want to inspect. 20 00:01:07,740 --> 00:01:12,849 So a handy way to observe the evolution of a variable is to use the Watch panel. 21 00:01:12,849 --> 00:01:14,119 In the Watch panel, 22 00:01:14,119 --> 00:01:18,245 I'll click the Add Expression button to add a variable to watch. 23 00:01:18,245 --> 00:01:19,959 I'll add the variable original, 24 00:01:19,959 --> 00:01:22,510 which holds the original string value to reverse. 25 00:01:22,510 --> 00:01:27,122 The Watch panel isn't limited to variables either, as it can be used for 26 00:01:27,122 --> 00:01:29,018 any JavaScript expression. 27 00:01:29,018 --> 00:01:32,367 For example, you can check an array's length over time. 28 00:01:32,367 --> 00:01:38,196 Or a deeply nested value, like the value of requests.params.userString, 29 00:01:38,196 --> 00:01:40,679 which is the URL path as a string. 30 00:01:42,813 --> 00:01:45,712 Although you can watch for any JavaScript expression, 31 00:01:45,712 --> 00:01:48,371 I'll monitor just the variable original for now. 32 00:01:48,371 --> 00:01:52,739 To remove an expression from the Watch panel, right-click on it and 33 00:01:52,739 --> 00:01:54,480 click Remove Expression. 34 00:01:54,480 --> 00:01:59,831 Next, to execute the line of code you're currently on or move forward 35 00:01:59,831 --> 00:02:05,560 through the program click the Step Over button in the Debug Actions panel. 36 00:02:05,560 --> 00:02:09,565 That's the button to the right of the Continue button, with a blue dot and 37 00:02:09,565 --> 00:02:10,995 an arrow going around it. 38 00:02:10,995 --> 00:02:14,113 By pressing the Step Over button, you can see your code executed and 39 00:02:14,113 --> 00:02:15,377 highlighted line by line. 40 00:02:15,377 --> 00:02:18,695 This works in much the same way as stepping over code when debugging 41 00:02:18,695 --> 00:02:21,906 JavaScript in the browser with Chrome Dev Tools, for example. 42 00:02:21,906 --> 00:02:27,117 Click Step Over once, and you can see that the original value has been updated 43 00:02:27,117 --> 00:02:31,865 in the Watch panel, and in the Variables panel under the Local scope. 44 00:02:31,865 --> 00:02:37,672 Another way to interact with variables is by using the Debug Console and 45 00:02:37,672 --> 00:02:40,302 typing JavaScript code there. 46 00:02:40,302 --> 00:02:44,670 For example, original is equal to the string milo. 47 00:02:44,670 --> 00:02:48,091 You can even override the value too. 48 00:02:48,091 --> 00:02:53,356 For example, I'll set original to the string guil, 49 00:02:53,356 --> 00:02:57,688 and see the value change in the Watch panel. 50 00:02:57,688 --> 00:03:02,627 Once you're done testing values, click the Continue button. 51 00:03:02,627 --> 00:03:04,661 Now the response has finished. 52 00:03:04,661 --> 00:03:10,633 And liug, which is a guil backwards, displays in the application.