VS Code Chrome Debugger Not Opening Window Until Prelaunch Task Completes in Angular Project

Question

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!

Answer 1

With the help of this question question and documentation, I was able to find the problem.

I've updated the problemMatcher.background.endsPattern value into:

"endsPattern": "Watch mode enabled. Watching for file changes..."

And now the preLaunchTask knows when to open the chrome debugger window. I believe it has something to do with Angular watch mode message, hence it has to be updated.