How to debug Angular with VSCode
Posted on 2018-08-22
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
}
}
]
}