Launch server and client simultaneously with ability to use breakpoints - using VS Code Debugger

Question

I'm working on a Create-React-App where I have configured the .launch.json file to have 2 configurations

1. Launch via NPM - to launch server via npm start
2. Launch Chrome - to open the client and debug my web-app with breakpoints

Right now I can only choose one option from the drop-down. So i'm manually running npm start in the terminal and then using the debugger to Launch Chrome which enables breakpoints

But I would like to know how to launch these 2 configs simultaneously using the VS Code debugger. Is it possible?

Below is the config that I have in launch.json:

  "version": "0.2.0",
  "configurations": [
    {
      // This doesn't stop at breakpoints
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    },

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Answer 1

You can use compounds in launch.json file to run 2 configs simultaneously.

so you need to add another array called compounds in launch.json after configurations like below

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    },

    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ],

  "compounds": [
    {
      "name": "Server + Browser",
      "configurations": ["Launch via NPM", "Launch Edge"]
    }
  ]
}

The compound - Server + Browser will be visible in the Run and Debug dropdown in VS Code

TIP

You can also set a delay for one of the configs by using tasks.json