Compound debug configurations
Often you need to run multiple processes at once, but debug them as if they were the same project. A common scenario for this is running a React, Angular or Vue app, along with some sort of API service using Express or Hapi. VS Code has a feature called "Compound Launch Configurations" that allow you to launch multiple debug processes at one.
Exercise
Answer
    Open "4-compound-launch-config"
    Start the frontend application
    Create two launch configs..
      One for the Node process that runs in the "/server" folder
      One of the Chrome process that runs from the root
    Create a compound launch config that includes both of the above configs
    Run the compound launch config
    Add a breakpoint to "src/App.js"
    Add a breakpoint to "server/routes/index.js"
    Hit both the breakpoints
    Open a new integrated terminal instance (Cmd/Ctrl + `)
    Make sure that you are in the "4-compound-launch-config" folder
    Run the frontend application with npm start
    Open the Debug Explorer (Cmd/Ctrl + Shift + D)
    Open the dropdown list and select "Add Config (4-compound-launch-config)
    Select "Chrome" from the prompt
    Modify the launch config so that it looks like this...
1
{
2
// Use IntelliSense to learn about possible attributes.
3
// Hover to view descriptions of existing attributes.
4
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5
"version": "0.2.0",
6
"configurations": [
7
{
8
"type": "chrome",
9
"request": "launch",
10
"name": "Launch Chrome",
11
"url": "http://localhost:3000",
12
"webRoot": "${workspaceFolder}/src"
13
}
14
]
15
}
Copied!
    Click the "Add Configuration" button
    Select "Node.js Launch Program" from the list
    Change the "program" value in the "Launch Program" config to be "${workspaceFolder}/server/server.js"
1
"type": "node",
2
"request": "launch",
3
"name": "Launch Program",
4
"program": "${workspaceFolder}/server/server.js"
5
},
Copied!
    Right above the "configurations" attribute, add a "compound" attribute. Start typing and then select "compound" from the auto-complete.
    Name it "Launch Project 4"
    Set the "configurations" attribute to...
1
"compounds": [
2
{
3
"name": "Launch Project 4",
4
"configurations": ["Launch Program", "Launch Chrome"]
5
}
6
]
Copied!
    Select "Launch Project 4" from the dropdown list in the Debug Explorer
    Press the green button next to the dropdown list
    VS Code will launch a new instance of Chrome and start the Express server project.
    Add a breakpoint to line 12 in the "server/routes/index.js" file
    Add a breakpoint to line 39 in the "src/App.js" file
    Change the color in the app and press the button
    Hit the breakpoints
Last modified 2yr ago
Copy link