Una delle funzionalità indispensabile per lo sviluppo in Visual Studio Code è il debug delle applicazioni Angular. In particolare, la possibilità di effettuare il debug delle applicazioni direttamente all’interno dell’editor.
Installazione del Plugin
Dopo aver installato il debugger per Chrome (disponibile a questo link) direttamente all’interno di Visual Studio Code, è necessario creare almeno un profilo da utilizzare in fase di debugging. Le operazioni da compiere sono:
- creazione della cartella .vscode all’interno della cartella dell’applicazione
- creazione all’interno della cartella .vscode creata al passo precedente del file launch.json con le configurazioni di ogni singolo profilo.
Di seguito un esempio funzionante del file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome with ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Chrome with ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
}
]
}
A questo punto dal terminale di Visual Studio Code è possibile eseguire l’applicazione in angular con il comando
ng serve
ed eseguendo il debug con la configurazione “Launch Chrome with ng serve”.
A questo punto è possibile debuggare i nostri progetti Angular direttamente all’interno di Visual Studio Code.