2018-11-16

How to debug Angular with VSCode

Here is a quick procedure to configure your Angular project to allow debugging in VSCode via breakpoints, …

  • Install the Chrome Debugger Extension
  • Create the launch.json (inside .vscode folder)
  • Use my launch.json (see bellow)
  • Create the tasks.json (inside .vscode folder)
  • Use my tasks.json (see bellow)
  • Press CTRL+SHIFT+B
  • Press F5

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      }
    ]
}

Leave a Reply

Your email address will not be published. Required fields are marked *