Angular Chrome Debug

in Informatica, Programmazione

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:

{
    "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.