Debugger Angular via VSCode
Posted on 2018-08-22
Voici une rapide procédure de configuration de votre projet Angular pour débugger dans VSCode (points d’arrêt, évaluation des variables, …)
- Installer l'extension Chrome Debugger
- Créer le fichier launch.json (dans le dossier .vscode)
- Utiliser le contenu de launch.json décrit ci-dessous
- Créer le fichier tasks.json (dans le dossier .vscode)
- Utiliser le contenu de tasks.json décrit ci-dessous
- Compiler votre code via CTRL+SHIFT+B
- Démarrer via 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
}
}
]
}