Debugging Typescript con Visual Studio Code
Il Debugging di un’applicazione è una fase importante per individuare e risolvere problemi e bug altrimenti impossibili da individuare e correggere.
Il debugging di un’applicazione è una fase importante per individuare e risolvere problemi e bug altrimenti difficili da individuare e correggere.
In questo articolo del nostro blog, parleremo di come questa fase viene gestita all’interno di un IDE di sviluppo di nuova generazione, Visual Studio Code.
Questo IDE è ampiamente utilizzato dagli sviluppatori per la sua versatilità e configurabilità, grazie anche alla disponibilità di numerosi plugin di terze parti che lo rendono flessibile e completo.
Per iniziare, una volta installato il prodotto sulla vostra macchina (è liberamente scaricabile dal sito apposito), apriamo il nostro progetto.
La prima cosa che noteremo è la presenza di un numero di riga a sinistra nell’area del codice. Qui possiamo decidere di posizionare un breakpoint, rappresentato da un pallino rosso pieno.
Il breakpoint indica il punto in cui desideriamo interrompere l’esecuzione del programma per esaminare step-by-step ciò che accade.
Se desideriamo eliminarlo, possiamo farlo selezionandolo nella finestra di debug e disabilitandolo oppure facendo clic direttamente sul pallino rosso relativo. Una volta eliminato, scomparirà. Puoi vedere un’immagine di esempio nella successiva illustrazione.
Chi utilizza già questo strumento per scrivere il proprio codice sa che una delle migliori potenzialità di Visual Studio Code è la possibilità di configurarlo in base alle proprie esigenze con numerose estensioni disponibili.
Pertanto, la prima cosa che faremo è posizionarci sulla sidebar, dove troveremo l’icona delle estensioni.
Cerchiamo l’estensione di debugging per Chrome e la installiamo. Successivamente, ricarichiamo in modo da aggiungerla alle estensioni presenti in Visual Studio Code.
Una volta completate queste operazioni con successo, avremo la possibilità di gestire il debugging verso il browser Chrome direttamente in Visual Studio Code.
Per fare ciò, spostiamoci sull’icona del debug presente nella stessa sidebar e selezioniamo, dal pannello di configurazione, l’opzione “esecuzione in Chrome da localhost”. Nel file di configurazione launch.json appariranno i seguenti settaggi di default:
{
"version": "0.2.0" "configurations": [ { "type": "chrome", "request": "launch", "name": "Esecuzione di Chrome su localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] }Come puoi vedere, la maggior parte delle informazioni di questa configurazione sono descrittive. Di default, è impostato localhost sulla porta 8080. Se il tuo progetto è in ascolto su una porta diversa, basta aggiornare l’URL e salvare.
Quando si lancerà il debug, Chrome si aprirà automaticamente con l’URL indicato e verrà avviata una mini console per il controllo degli step in Visual Studio Code.
Una volta agganciato il breakpoint e navigando nella tua applicazione, questa si bloccherà quando entrerà nel blocco di codice relativo al metodo richiamato nel punto del breakpoint.
Il controllo passerà automaticamente dal browser a Visual Studio Code, evidenziando la riga di codice con il breakpoint con una freccia gialla, come mostrato nell’immagine di seguito.
Ciò indica che il debug è attivo e i pannelli di debug si riempiranno di valori relativi allo stato dello step in cui ci si posiziona e alle variabili indicate.
A questo punto, utilizzando la pulsantiera e passando con il mouse sul codice e sui pannelli precedentemente menzionati, è possibile monitorare il flusso del codice e i valori ottenuti, consentendo di identificare con precisione eventuali bug riscontrati.
Questo conclude l’articolo di oggi. Spero che sia stato utile e che ti abbia aiutato a risolvere i problemi relativi al debugging. Ci sentiremo presto con nuovi e interessanti argomento.
