I need a compound debug profile in VS Code which allows debugging of two React (via CRA) apps, simultaneously. In fact, there will be multiple, smaller front-ends in this overall platform and I'll need to add more in the future.

I'm having no issues debugging multiple APIs with a single React front-end, in VS Code. My compounds work great...until adding a second React app.

Compound looks like this:

{
    "name": "ALL",
    "stopAll": true,
    "configurations": [
        //API
        "Auth API",
        "Log API",
        "Message API",
        "File API",
        "Search API",
        "Order API",
        //Web
        "Web 1",
        "Web 2"
    ]
}

The two React entries look like this:

{
    "name": "Web 1",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5500",
    "webRoot": "${workspaceRoot}/web1/src"
},
{
    "name": "Web 2",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5501",
    "webRoot": "${workspaceRoot}/web2/src"
}

Both work fine when doing the initial npm start in their respective terminals:

However, only one opens in the browser (second tab is about:blank) and I see this when I flip back over to VS Code:

It's also not listed w/ the others in the debug dropdown, so it truly never attaches. Seems pretty straightforward - am I doing something wrong?