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.