I’m experiencing an issue with debugging my Angular application using Visual Studio Code and the Chrome debugger. When I start the debugging session, the Chrome browser window doesn’t open until I manually exit the prelaunch task. This behaviour is preventing me from seamlessly starting my debugging process. Here are the details:

Environment:

• Visual Studio Code: 1.89.1
• Angular: 18.0.0
• Chrome: 124.0.6367.119
• OS: Mac Sonoma 14.2.1

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "preLaunchTask": "npm: start",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/*": "${webRoot}/*",
                "/./*": "${webRoot}/*",
                "/src/*": "${webRoot}/*",
                "/*": "*",
                "/./~/*": "${webRoot}/node_modules/*"
            }
        }
    ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }
  ]
}

Steps to Reproduce:

1. Open the Angular project in VS Code.
2. Press F5 to start the debugging
   session.
3. Observe that the Chrome window does not open until the
   prelaunch task (ng serve) is manually exited.

Expected Behavior:

The Chrome browser window should open automatically once ng serve completes its initial compilation and starts watching for changes.

Actual Behavior:

The Chrome browser window does not open until I manually exit the ng serve prelaunch task.

What I’ve Tried:

• Ensuring the isBackground flag is set to true in tasks.json.
• Checking the problem matcher patterns to ensure they are correct.
• Verifying that ng serve runs successfully from the terminal

How can I configure VS Code and the Chrome debugger to automatically open the Chrome window as soon as ng serve completes its initial compilation and enters watch mode, without requiring manual intervention? It is kind of weird since I copied and pasted the exact launch and tasks from an Angular app where the debugging works.

Any help or suggestions would be greatly appreciated!