1
00:00:00,000 --> 00:00:03,758
While the application is running in
debug mode, you can visit any URL, and

2
00:00:03,758 --> 00:00:07,875
the execution of the program doesn't
pause, which doesn't allow you to inspect

3
00:00:07,875 --> 00:00:10,639
the current state of the app and
identify the problem.

4
00:00:10,639 --> 00:00:14,418
That's because I haven't specified a place
in the code where I want to pause debug or

5
00:00:14,418 --> 00:00:15,014
execution.

6
00:00:15,014 --> 00:00:16,712
This is the first step in debugging.

7
00:00:16,712 --> 00:00:19,407
Pause your program at
a specific line of code.

8
00:00:19,407 --> 00:00:22,899
So I'll first identify where in
the code I'd like to pause execution.

9
00:00:22,899 --> 00:00:26,249
This might even be the same line where
you'd place a console dot log statement,

10
00:00:26,249 --> 00:00:26,854
for example.

11
00:00:26,854 --> 00:00:31,186
I'll switch to the VS code file
explorer by clicking the file symbol

12
00:00:31,186 --> 00:00:36,139
in the left side bar, then click on the
file app dot js to open it in the editor.

13
00:00:36,139 --> 00:00:39,823
Again, the issue happens
when you click o milo, for

14
00:00:39,823 --> 00:00:42,766
example, or change the URL to anything.

15
00:00:42,766 --> 00:00:46,256
The app displays blank reverse is eman.

16
00:00:46,256 --> 00:00:50,072
The original string is missing
from the response sent back.

17
00:00:50,072 --> 00:00:54,086
So now, I'll diagnose and
fix the problem using the debugger.

18
00:00:54,086 --> 00:00:58,940
I'll go back into debug view by
clicking the bug symbol in the sidebar.

19
00:00:58,940 --> 00:01:01,055
And thinking about the problem,

20
00:01:01,055 --> 00:01:04,841
the bug happens when you change
the URL to reverse a string.

21
00:01:04,841 --> 00:01:10,170
So on lines 35 through 42,
a get URL handler takes

22
00:01:10,170 --> 00:01:14,917
in the user string from the URL and
reverses it.

23
00:01:14,917 --> 00:01:18,946
So the URL handler seems like an
appropriate place to pause the execution

24
00:01:18,946 --> 00:01:20,144
of the application.

25
00:01:20,144 --> 00:01:23,138
To pause the application,
I'll use a break point.

26
00:01:23,138 --> 00:01:27,195
You can set a break point on
any line of executable code.

27
00:01:27,195 --> 00:01:31,950
To create a break point, click on the
far-left margin next to the line of code

28
00:01:31,950 --> 00:01:34,161
where you want execution to pause.

29
00:01:34,161 --> 00:01:37,985
I'm clicking line 37, or the first
line of the handler function since

30
00:01:37,985 --> 00:01:41,633
that's where the programming around
the string reversal happens.

31
00:01:41,633 --> 00:01:45,367
And the red field circle and the editor
margin indicates that a break point is

32
00:01:45,367 --> 00:01:49,025
set, and where the debugger or
program should pause execution.

33
00:01:49,025 --> 00:01:52,910
So let's revisit the app on
local host port 3000, and

34
00:01:52,910 --> 00:01:54,902
click on one of the examples.

35
00:01:54,902 --> 00:01:58,990
And notice how the page It's
stuck in a loading state.

36
00:01:58,990 --> 00:02:02,910
Well, that's because the debugger
has paused execution of the program.

37
00:02:02,910 --> 00:02:05,600
The request from the express
server is still open, and

38
00:02:05,600 --> 00:02:07,656
the response hasn't been sent back yet.

39
00:02:07,656 --> 00:02:08,864
In the VS code editor,

40
00:02:08,864 --> 00:02:12,437
you'll see the line of code
highlighted where the break point is.

41
00:02:12,437 --> 00:02:15,156
And the highlighted line is how
you know that the debugger has

42
00:02:15,156 --> 00:02:16,335
paused the application.

43
00:02:16,335 --> 00:02:20,231
So now, I can take advantage of
several panels to aid in debugging.

44
00:02:20,231 --> 00:02:25,180
For example, the call stack panel shows
the full list of functions called in order

45
00:02:25,180 --> 00:02:26,766
to get to the break point.

46
00:02:26,766 --> 00:02:30,342
It helps you keep track of what's
currently being executed in the program.

47
00:02:30,342 --> 00:02:35,333
This panel can be quite noisy, and is used
rarely when you don't understand when or

48
00:02:35,333 --> 00:02:37,273
why something is being called.

49
00:02:37,273 --> 00:02:41,032
So I'll keep the call stack details
mostly hidden by closing the panel for

50
00:02:41,032 --> 00:02:43,677
the remainder of this workshop.

51
00:02:43,677 --> 00:02:45,955
You can add multiple
breakpoints while debugging.

52
00:02:45,955 --> 00:02:50,352
For example,
I'll add another breakpoint online 42.

53
00:02:50,352 --> 00:02:54,284
When I click the Continue button
in the debug-actions toolbar,

54
00:02:54,284 --> 00:02:59,014
the debugger moves forward in the program,
and stops at the next breakpoint.

55
00:02:59,014 --> 00:03:02,520
You can also immediately see
where all your breakpoints are,

56
00:03:02,520 --> 00:03:04,350
here in the breakpoints panel.

57
00:03:04,350 --> 00:03:08,693
And you can toggle them on and
off with the checkboxes.

58
00:03:08,693 --> 00:03:13,536
A grey circle in the editor margin
indicates a disabled breakpoint.

59
00:03:13,536 --> 00:03:17,988
To remove a breakpoint from your
source code, just click on it.

60
00:03:17,988 --> 00:03:21,688
So now, I'll click the Continue
button to finish running my program.

61
00:03:23,441 --> 00:03:26,779
Coming up in the next video,
you will learn how to inspect and

62
00:03:26,779 --> 00:03:30,722
debug variables using the variables
panel and debug actions toolbar.