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.

Oggi in questo articolo del nostro blog vorremmo affrontare come questo aspetto, viene gestito all’interno di un IDE di sviluppo di nuova generazione, Visual Studio Code utilizzato da molti sviluppatori proprio per la sua versatilità e configurabilità avendo a disposizione numerosi plugin di terze parti che lo rendono flessibile e completo.

In particolare una volta installato sulla vostra macchina il prodotto, liberamente scaricabile dall’ apposito sito, per cominciare  apriamo subito il nostro progetto e per prima cosa notiamo che posizionandosi  al lato sinistro del numero di riga presente nell’area del codice è possibile decidere dove posizionare il nostro breakpoint che sarà rappresentato da un pallino rosso pieno, quello sarà appunto il nostro punto dove vogliamo bloccare l’esecuzione del programa ed entrare a runtime per capire quel che succede step-by-step.

Se decidiamo di eliminarlo o ci si posiziona nella finestra di debug e lo si elimina o disabilità deselezionandolo oppure direttamente sul pallino rosso relativo e scompare, vediamolo nell’immagine successiva.

Chi utilizza già questo strumento per scrivere il proprio codice sà che una delle migliori potenzialità di Visual Studio Code è quella di poterlo configurare in base alle proprie esigenze porgettuali con le numerose estensioni disponibili.

Pertanto la prima cosa che faremo, ci posizioneremo sulla sidebar in cui è presente l’icona delle estensioni e cercheremo l’estensione di debugging per chrome, la installiamo e ricarichiamo in modo da aggiungerla alle estenzioni presenti sul nostro Visual Studio Code.

Una volta terminata questa operazione con successo, avremo a disposizione la possibilità di gestire direttamente in Visual Studio Code, il debugging verso il browser Chrome scaricabile al link precedente.

Ci spostiamo a questo punto sull’icona del debug presente nella stessa sidebar nel pannello di configurazione, una volta posizionati su questo pannello, bisognerà  selezionare dalla combobox, la seguente opzione: esecuzione in Chrome da localhost, nel relativo filedi 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 potete notare da soli, la maggior parte delle informazioni di questa configurazione sono descrittive, di default è settato il localhost su porta 8080, se il vostro progetto resta in ascolto su una porta diversa basta aggiornare la url e salvare e quando si lancerà il debug verrà aperto in automatico chrome con l’url indicata e verrà avviata la mini console per il controllo degli step su Visual studio code.

A questo punto una volta agganciato il breakpoint navigando la vostra applicazione si dovrebbe bloccare quando entrerà nel blocco di codice relative al metodo richiamato nel punto del breakpointe il controllo dovrebbe passare in automatico dal browser a Visual Studio code evidenziando la riga di codice con il breakpoint con una freccia gialla come in figura di seguito, ciò vorrà dire che il debug è entrato in funzione e i pannelli di debug si riempiranno di valori relativi allo stato dello step in cui ci si posiziona e le variabili indicate.

A questo punto attraverso la pulsantiera e passando col mouse sul codice e i pannelli prima indicati, si può monitorare il flusso del codice e i valori ottenuti riuscendo a stabilire con esattezza eventuali bu riscontrati.

Anche per oggi abbiamo terminato, spero che questo articolo sia stato utile e vi sia servito a risolvere i vostri problemi relativi al debugging, ci sentiamo prossimamente con nuovi e interessanti argomenti.

Giovanni Masucci

Digital Media Specialist

Be Sociable, Share!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *