CODEWITHSUNDEEP
angulardebuggingionic-frameworkvisual-studio-code
Jakkob
Jakkob

Reputation: 59

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!

Upvotes: 5

Views: 8118

Answers (5)

Basil Abbas
Basil Abbas

Reputation: 1802

You should open your main Angular project folder, and the project shouldn't be contained in a subfolder. The .vscode/.launch.json should be present in your project folder. If not, you will end up with duplicates of the .launch.json

Alternatively, you can also specify the correct project root path in the launch.json file under webRoot. However, I found opening the correct project folder to be an easier approach.

Upvotes: 0

Triumph1360
Triumph1360

Reputation: 11

This works for me if the error in the debug console is something like ECONNREFUSED 127.0.0.1

Change the start script in package.json to

ng serve --host 127.0.0.1

The vs code js debugger seems to look for the web app specifically on the host address 127.0.0.1 and angular serves it on localhost by default. I guess there is a difference between them.

For launch.json I've also found the "launch" request type to be unreliable. Try using the "attach" chrome launch configuration instead and remove preLaunchTask. You'll need to look up how to start chrome with remote debugging enabled.

Upvotes: 0

Wolf
Wolf

Reputation: 6499

My issue:

  • My Angular: 14.x
  • Node.js => 18.x => not support, can't debug
  • Downgrade to 16.x => work perfect

Upvotes: 0

mazi
mazi

Reputation: 114

Do you have multiple projects in your workSpaceDirectory? If so, you have to add this in your path. E.g.:

"webRoot": "${workspaceFolder}/YOURPROJECT1"

Use slash /if you are on windows.

Upvotes: 0

onivek
onivek

Reputation: 228

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!

Upvotes: 3

Related Questions