Angular Chrome Debug

Visual Studio Code – Angular Chrome Debug

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:

A questo punto dal terminale di Visual Studio Code è possibile eseguire l’applicazione in angular con il comando

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.

Pubblicato da

Andrea Merlin

Laureato in informatica, diversi corsi di specializzazione legati allo Sviluppo Software e alla Computer forensics. Appassionato di nuove tecnologie, amo la programmazione, la Business Intelligence e tematiche legate alla Privacy.Sempre alla ricerca di nuove idee, stimoli … e progetti da seguire!Amo trascorrere il tempo libero in Val Borbera, un piccolo angolo del Piemonte, in provincia di Alessandria.