Necesito un perfil de depuración compuesto en VS Code que permita la depuración de dos aplicaciones React (a través de CRA) simultáneamente. De hecho, habrá varios front-end más pequeños en esta plataforma general y tendré que agregar más en el futuro.

No tengo problemas para depurar varias API con un solo front-end de React, en VS Code. Mis compuestos funcionan muy bien... hasta que agregué una segunda aplicación React.

El compuesto se ve así:

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

Las dos entradas de React se ven así:

 { "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" }

Ambos funcionan bien al hacer el npm start en sus respectivos terminales:

Sin embargo, solo se abre uno en el navegador (la segunda pestaña es about:blank ) y veo esto cuando vuelvo a VS Code:

Tampoco aparece con los demás en el menú desplegable de depuración, por lo que realmente nunca se adjunta. Parece bastante sencillo: ¿estoy haciendo algo mal?