Multiple projects running at the same time with VSCode extension Debugger for Chrome

Question

I have 2 projects (React projects) that I would like to be able to debug at the same time when using VS Code. The launch configurations for the projects are like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project A",
      "url": "http://localhost:3003",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

And

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project B",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

If I launch any of the projects individually it all works fine. But if I try to launch one while the other is already running I get this:

So the question is, how should I make the setup so I can debug multiple projects in VS Code that use the Debugger for Chrome extension?

Answer 1

I have had the same issue because it worked with an older version of vscode-debgger. I open the folder which contains both project and run it with a config like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Project A and B",
      "url": "http://localhost:3001",
      "urlFilter": "http://localhost:*",
      "pathMapping": {
           "http://localhost:3001": "${workspaceFolder}/projectA",
           "http://localhost:3003": "${workspaceFolder}/projectB"
      }
    }
  ]
}

When Chrome starts you still have to manually open the second tab with http://localhost:3003.