> For the complete documentation index, see [llms.txt](https://burkeholland.gitbook.io/vs-code-can-do-that/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://burkeholland.gitbook.io/vs-code-can-do-that/exercise-4-debugging/compound-debug-configurations.md).

# 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.

{% tabs %}
{% tab title="Exercise" %}

* 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
  {% endtab %}

{% tab title="Answer" %}

* 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`

![](/files/-Lm5UCk8u8vxPZLta3N0)

* Open the Debug Explorer (**Cmd/Ctrl + Shift + D**)
* Open the dropdown list and select "Add Config (4-compound-launch-config)

![](/files/-Lm5QYuWlRoAGetiLLHw)

* Select "Chrome" from the prompt

![](/files/-Lm5R-Lvt7gM2VO-2QwK)

* Modify the launch config so that it looks like this...

```
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}
```

![](/files/-Lm5RJPxM3P9biw9mBZP)

* Click the "Add Configuration" button

![](/files/-Lm5RsEV98UJiRPcyeYW)

* Select "Node.js Launch Program" from the list

![](/files/-Lm5SJIaPjklsr0dpvLa)

* Change the "program" value in the "Launch Program" config to be "${workspaceFolder}/server/server.js"

```
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/server/server.js"
},
```

* 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...

```
"compounds": [
  {
    "name": "Launch Project 4",
    "configurations": ["Launch Program", "Launch Chrome"]
  }
]
```

* Select "Launch Project 4" from the dropdown list in the Debug Explorer

![](/files/-Lm5TbZRQ8TAGjoBBCXQ)

* 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
  {% endtab %}
  {% endtabs %}