1
00:00:00,360 --> 00:00:04,752
Launch configurations lets you specify precisely how your program

2
00:00:04,752 --> 00:00:06,605
should run in the debugger.

3
00:00:06,605 --> 00:00:10,262
They support efficient development by helping you quickly and

4
00:00:10,262 --> 00:00:13,980
repeatedly debug your code with the configuration you require.

5
00:00:13,980 --> 00:00:18,725
Launch configurations are stored in JSON format in a file

6
00:00:18,725 --> 00:00:20,250
named launch.json.

7
00:00:20,250 --> 00:00:24,786
By default, the file is created inside the .vscode folder

8
00:00:24,786 --> 00:00:25,996
in your project.

9
00:00:25,996 --> 00:00:29,792
I'm going to create one to debug this server.js file

10
00:00:29,792 --> 00:00:31,132
I created earlier.

11
00:00:31,132 --> 00:00:33,900
I'm already on the run and debug panel,

12
00:00:33,900 --> 00:00:37,798
and there's a link near the top of it to create a new

13
00:00:37,798 --> 00:00:39,72
launch.json file.

14
00:00:39,72 --> 00:00:43,279
I'll click it and I'm prompted at the top to select a debugger.

15
00:00:43,279 --> 00:00:47,247
I'll choose Node.js.

16
00:00:47,247 --> 00:00:52,738
The file is then created and opened in the editor.

17
00:00:52,738 --> 00:00:56,707
Like the other configuration files we've looked at in the course,

18
00:00:56,707 --> 00:00:59,380
this one is also in the JSON format.

19
00:00:59,380 --> 00:01:03,371
You can store multiple configurations as objects in the

20
00:01:03,371 --> 00:01:06,623
configurations array that starts on Line 6.

21
00:01:06,623 --> 00:01:11,624
The first three properties on this default configuration are required

22
00:01:11,624 --> 00:01:13,315
for all configurations.

23
00:01:13,315 --> 00:01:16,764
The type is node on this one because that's the debugger I

24
00:01:16,764 --> 00:01:18,760
selected when I created the file.

25
00:01:18,760 --> 00:01:21,198
I'll show you another type shortly.

26
00:01:21,198 --> 00:01:25,531
The request property can either be launch or attach.

27
00:01:25,531 --> 00:01:29,374
Launch is used when the configuration will execute and

28
00:01:29,374 --> 00:01:31,840
attach to the process you'll debug.

29
00:01:31,840 --> 00:01:36,596
Attach is used if the process you want to debug is already running

30
00:01:36,596 --> 00:01:39,494
and you just need to attach the debugger to it.

31
00:01:39,494 --> 00:01:44,309
Name is how you'll identify this particular launch configuration.

32
00:01:44,309 --> 00:01:49,674
I'm going to change this one to Launch Web Server.

33
00:01:49,674 --> 00:01:53,658
There are lots of properties available on launch

34
00:01:53,658 --> 00:01:54,930
configurations,

35
00:01:54,930 --> 00:01:58,414
but the properties are different depending on the type of

36
00:01:58,414 --> 00:01:59,534
the configuration.

37
00:01:59,534 --> 00:02:02,479
The type of this configuration is node,

38
00:02:02,479 --> 00:02:06,664
so its properties won't exactly match those of a Python

39
00:02:06,664 --> 00:02:08,214
or Go configuration.

40
00:02:08,214 --> 00:02:10,573
I can't cover all of the available properties,

41
00:02:10,573 --> 00:02:14,08
but I'll show you a couple more and how to browse what's

42
00:02:14,08 --> 00:02:14,633
available.

43
00:02:14,633 --> 00:02:18,877
The program property at the end of this configuration specifies the

44
00:02:18,877 --> 00:02:20,871
program to run in the debugger.

45
00:02:20,871 --> 00:02:24,721
Because I created this file with the server.js file

46
00:02:24,721 --> 00:02:29,326
open, the template automatically filled in server.js inside the

47
00:02:29,326 --> 00:02:31,515
workspace root folder for me,

48
00:02:31,515 --> 00:02:33,789
but I could change that if I needed to.

49
00:02:33,789 --> 00:02:38,141
I'll add a comma at the end of that line.

50
00:02:38,141 --> 00:02:41,465
On the next line, I'll press "Ctrl space" to bring up

51
00:02:41,465 --> 00:02:45,320
the code completion list of available properties I can add.

52
00:02:45,320 --> 00:02:48,497
This list is long, but I encourage you to review

53
00:02:48,497 --> 00:02:51,404
what's available for the configuration types

54
00:02:51,404 --> 00:02:52,486
you plan to use.

55
00:02:52,486 --> 00:02:56,547
I'm going to add the console property.

56
00:02:56,547 --> 00:03:00,805
This property declares where to launch the debug target.

57
00:03:00,805 --> 00:03:05,495
I'll select the integrated terminal.

58
00:03:05,495 --> 00:03:09,892
A couple of options you might find particularly useful are related

59
00:03:09,892 --> 00:03:11,109
to task execution.

60
00:03:11,109 --> 00:03:14,475
I'll search the list for task.

61
00:03:14,475 --> 00:03:21,289
There are properties named postDebugTask and preLaunchTask.

62
00:03:21,289 --> 00:03:26,357
You can use these to configure tasks to run just before or just

63
00:03:26,357 --> 00:03:28,727
after your debugging session.

64
00:03:28,727 --> 00:03:31,784
I showed you how to create task earlier in the course.

65
00:03:31,784 --> 00:03:34,69
They could be used here to compile your code,

66
00:03:34,69 --> 00:03:38,706
for instance, before you start the debugger or perform any necessary

67
00:03:38,706 --> 00:03:40,920
cleanup when the debugger exits.

68
00:03:40,920 --> 00:03:48,490
You can define a task in line or just pass it the name of a task

69
00:03:48,490 --> 00:03:52,575
you created in your tasks.json file.

70
00:03:52,575 --> 00:03:56,606
I don't actually have a task named myBuildTask,

71
00:03:56,606 --> 00:04:01,648
so I'm going to remove that.

72
00:04:01,648 --> 00:04:05,604
I can run this launch configuration from the dropdown

73
00:04:05,604 --> 00:04:08,800
list at the top of the run and debug panel.

74
00:04:08,800 --> 00:04:13,11
Notice that Launch Web Server is already selected in the list.

75
00:04:13,11 --> 00:04:16,775
That's the name I gave the new configuration in the file.

76
00:04:16,775 --> 00:04:20,679
Before I run it, I'll go back to server.js

77
00:04:20,679 --> 00:04:22,678
and add a breakpoint.

78
00:04:22,678 --> 00:04:25,435
I'll add it on Line 4.

79
00:04:25,435 --> 00:04:30,499
I can now debug the program with my new launch configuration by

80
00:04:30,499 --> 00:04:35,401
clicking the little green arrow beside the configuration name

81
00:04:35,401 --> 00:04:37,116
in the dropdown box.

82
00:04:37,116 --> 00:04:41,882
The program is run in a new terminal,

83
00:04:41,882 --> 00:04:45,479
the debugger is attached, and execution pauses on the

84
00:04:45,479 --> 00:04:46,678
breakpoint I set.

85
00:04:46,678 --> 00:04:50,527
I can now debug the program using any of the tools available here

86
00:04:50,527 --> 00:04:52,90
that I showed you earlier.

87
00:04:52,90 --> 00:04:56,995
For now, I'm just going to click the red square on the debugging

88
00:04:56,995 --> 00:05:00,499
toolbar at the top to disconnect the debugger.

89
00:05:00,499 --> 00:05:04,913
Let's quickly add another configuration for debugging

90
00:05:04,913 --> 00:05:06,17
browser code.

91
00:05:06,17 --> 00:05:10,820
I'll first go back to my launch.json file.

92
00:05:10,820 --> 00:05:13,473
In the bottom right corner of the file,

93
00:05:13,473 --> 00:05:16,825
I'll click the "Add Configuration" button.

94
00:05:16,825 --> 00:05:20,120
That prompts me to select a configuration type.

95
00:05:20,120 --> 00:05:26,617
I'll select "Edge: Launch" to debug with Microsoft Edge.

96
00:05:26,617 --> 00:05:31,332
That inserts a new configuration at the beginning of the

97
00:05:31,332 --> 00:05:33,132
configurations array.

98
00:05:33,132 --> 00:05:37,299
I'll use it to debug the client-side JavaScript used by the

99
00:05:37,299 --> 00:05:38,880
website in my project.

100
00:05:38,880 --> 00:05:41,51
I'll now make a few changes to it.

101
00:05:41,51 --> 00:05:46,443
First, I'll change the name to Launch Client Site.

102
00:05:46,443 --> 00:05:49,648
Notice that for this configuration,

103
00:05:49,648 --> 00:05:55,305
the type property is set to msedge. That's going to determine

104
00:05:55,305 --> 00:05:57,662
the properties available.

105
00:05:57,662 --> 00:06:01,328
The URL property assumes there will be a web server running

106
00:06:01,328 --> 00:06:04,425
to serve the site, but I don't have that in place,

107
00:06:04,425 --> 00:06:10,88
so I'm going to delete that property.

108
00:06:10,88 --> 00:06:17,830
I'm instead going to use a property named file.

109
00:06:17,830 --> 00:06:25,75
You use it to specify a local HTML file to open in the browser.

110
00:06:25,75 --> 00:06:30,282
Pressing tab inserts a reference to index.html inside the

111
00:06:30,282 --> 00:06:32,328
root workspace folder.

112
00:06:32,328 --> 00:06:36,300
That file in my project just has an HTM extension,

113
00:06:36,300 --> 00:06:40,820
so I'm going to remove the last l at the end.

114
00:06:40,820 --> 00:06:43,263
To debug the client site

115
00:06:43,263 --> 00:06:48,130
with this configuration, I can select the name I gave it

116
00:06:48,130 --> 00:06:52,996
from the dropdown at the top of the run and debug panel.

117
00:06:52,996 --> 00:07:00,387
I'll then click the green arrow to start the debugger.

118
00:07:00,387 --> 00:07:05,676
The debugger almost immediately paused inside the menus.js file on

119
00:07:05,676 --> 00:07:08,930
a breakpoint I set earlier on Line 8.

120
00:07:08,930 --> 00:07:13,869
You can't see it here, but the configuration did start a

121
00:07:13,869 --> 00:07:17,550
new Microsoft Edge instance on my machine.

122
00:07:17,550 --> 00:07:21,583
I'll switch over to it, and you can see the page load is a little

123
00:07:21,583 --> 00:07:24,80
incomplete while the JavaScript code is

124
00:07:24,80 --> 00:07:24,900
paused.

125
00:07:24,900 --> 00:07:29,160
Because Edge was opened as part of the launch configuration,

126
00:07:29,160 --> 00:07:33,575
closing it now will disconnect the debugger and just return

127
00:07:33,575 --> 00:07:34,641
me to VS Code.

128
00:07:34,641 --> 00:07:38,675
The last thing I want to show you about launch configurations is

129
00:07:38,675 --> 00:07:42,581
that you can also start them from the status bar. Near the left

130
00:07:42,581 --> 00:07:43,990
side of my status bar

131
00:07:43,990 --> 00:07:46,80
at the bottom of the VS Code window,

132
00:07:46,80 --> 00:07:49,184
you can see the name of the currently selected launch

133
00:07:49,184 --> 00:07:50,20
configuration.

134
00:07:50,20 --> 00:07:51,687
I'll click on it.

135
00:07:51,687 --> 00:07:55,854
That opens a dropdown at the top where I can select which

136
00:07:55,854 --> 00:07:57,417
configuration I want.

137
00:07:57,417 --> 00:08:01,162
I'll select Launch Web Server.

138
00:08:01,162 --> 00:08:05,854
That again runs the server in a terminal and pauses my code on

139
00:08:05,854 --> 00:08:08,85
the breakpoint I set earlier.

140
00:08:08,85 --> 00:08:11,908
Using the status bar is just another way to run a launch

141
00:08:11,908 --> 00:08:15,662
configuration without going to the build and run panel.

142
00:08:15,662 --> 00:08:20,749
Okay. We all have bugs in our code and need a repeatable process for

143
00:08:20,749 --> 00:08:23,862
launching a debugger to find and fix them.

144
00:08:23,862 --> 00:08:28,381
Launch configurations are the tool in VS Code that helps you do that.

145
00:08:28,381 --> 00:08:32,00
You should definitely use them in your own projects.