'Angular debug in VS Code - Breakpoints unbound

I'm trying to debug my Ionic/Angular project in VS Code, but once I start the debuging mode, all my breakpoints turn grey and become unbound.

This is my launch.json:

{
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8100",
            "webRoot": "${workspaceFolder}"
}

My Angular version is 13.2.3 and my Node version is 16.14.2.

I have set souceMap to true in the angular.json file and tried tweaking the setting, but nothing really worked.

Thanks for your help!

angulardebuggingionic-frameworkvisual-studio-code


Solution 1:[1]

VS code team provides a set of instructions here

basically, you can configure/create your launch.json similar to this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

and tasks.json to this:

{
  "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."
          }
        }
      }
    },
  ]
}

And you can just press F5!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 onivek

Related Questions