Launch configurations lets you specify precisely how your program
should run in the debugger.
They support efficient development by helping you quickly and
repeatedly debug your code with the configuration you require.
Launch configurations are stored in JSON format in a file
named launch.json.
By default, the file is created inside the .vscode folder
in your project.
I'm going to create one to debug this server.js file
I created earlier.
I'm already on the run and debug panel,
and there's a link near the top of it to create a new
launch.json file.
I'll click it and I'm prompted at the top to select a debugger.
I'll choose Node.js.
The file is then created and opened in the editor.
Like the other configuration files we've looked at in the course,
this one is also in the JSON format.
You can store multiple configurations as objects in the
configurations array that starts on Line 6.
The first three properties on this default configuration are required
for all configurations.
The type is node on this one because that's the debugger I
selected when I created the file.
I'll show you another type shortly.
The request property can either be launch or attach.
Launch is used when the configuration will execute and
attach to the process you'll debug.
Attach is used if the process you want to debug is already running
and you just need to attach the debugger to it.
Name is how you'll identify this particular launch configuration.
I'm going to change this one to Launch Web Server.
There are lots of properties available on launch
configurations,
but the properties are different depending on the type of
the configuration.
The type of this configuration is node,
so its properties won't exactly match those of a Python
or Go configuration.
I can't cover all of the available properties,
but I'll show you a couple more and how to browse what's
available.
The program property at the end of this configuration specifies the
program to run in the debugger.
Because I created this file with the server.js file
open, the template automatically filled in server.js inside the
workspace root folder for me,
but I could change that if I needed to.
I'll add a comma at the end of that line.
On the next line, I'll press "Ctrl space" to bring up
the code completion list of available properties I can add.
This list is long, but I encourage you to review
what's available for the configuration types
you plan to use.
I'm going to add the console property.
This property declares where to launch the debug target.
I'll select the integrated terminal.
A couple of options you might find particularly useful are related
to task execution.
I'll search the list for task.
There are properties named postDebugTask and preLaunchTask.
You can use these to configure tasks to run just before or just
after your debugging session.
I showed you how to create task earlier in the course.
They could be used here to compile your code,
for instance, before you start the debugger or perform any necessary
cleanup when the debugger exits.
You can define a task in line or just pass it the name of a task
you created in your tasks.json file.
I don't actually have a task named myBuildTask,
so I'm going to remove that.
I can run this launch configuration from the dropdown
list at the top of the run and debug panel.
Notice that Launch Web Server is already selected in the list.
That's the name I gave the new configuration in the file.
Before I run it, I'll go back to server.js
and add a breakpoint.
I'll add it on Line 4.
I can now debug the program with my new launch configuration by
clicking the little green arrow beside the configuration name
in the dropdown box.
The program is run in a new terminal,
the debugger is attached, and execution pauses on the
breakpoint I set.
I can now debug the program using any of the tools available here
that I showed you earlier.
For now, I'm just going to click the red square on the debugging
toolbar at the top to disconnect the debugger.
Let's quickly add another configuration for debugging
browser code.
I'll first go back to my launch.json file.
In the bottom right corner of the file,
I'll click the "Add Configuration" button.
That prompts me to select a configuration type.
I'll select "Edge: Launch" to debug with Microsoft Edge.
That inserts a new configuration at the beginning of the
configurations array.
I'll use it to debug the client-side JavaScript used by the
website in my project.
I'll now make a few changes to it.
First, I'll change the name to Launch Client Site.
Notice that for this configuration,
the type property is set to msedge. That's going to determine
the properties available.
The URL property assumes there will be a web server running
to serve the site, but I don't have that in place,
so I'm going to delete that property.
I'm instead going to use a property named file.
You use it to specify a local HTML file to open in the browser.
Pressing tab inserts a reference to index.html inside the
root workspace folder.
That file in my project just has an HTM extension,
so I'm going to remove the last l at the end.
To debug the client site
with this configuration, I can select the name I gave it
from the dropdown at the top of the run and debug panel.
I'll then click the green arrow to start the debugger.
The debugger almost immediately paused inside the menus.js file on
a breakpoint I set earlier on Line 8.
You can't see it here, but the configuration did start a
new Microsoft Edge instance on my machine.
I'll switch over to it, and you can see the page load is a little
incomplete while the JavaScript code is
paused.
Because Edge was opened as part of the launch configuration,
closing it now will disconnect the debugger and just return
me to VS Code.
The last thing I want to show you about launch configurations is
that you can also start them from the status bar. Near the left
side of my status bar
at the bottom of the VS Code window,
you can see the name of the currently selected launch
configuration.
I'll click on it.
That opens a dropdown at the top where I can select which
configuration I want.
I'll select Launch Web Server.
That again runs the server in a terminal and pauses my code on
the breakpoint I set earlier.
Using the status bar is just another way to run a launch
configuration without going to the build and run panel.
Okay. We all have bugs in our code and need a repeatable process for
launching a debugger to find and fix them.
Launch configurations are the tool in VS Code that helps you do that.
You should definitely use them in your own projects.