# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://burkeholland.gitbook.io/vs-code-can-do-that/exercise-4-debugging/compound-debug-configurations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.