Eseguire il debug con Visual Studio Code

• 8 minuti

Nell'esercizio precedente si è appresa l'importanza di poter eseguire il codice passo dopo passo con il debugger fornito in Node.js. Per il lavoro sull'applicazione Tailwind Traders, è necessario un ambiente di debug più completo all'interno dell'IDE (Integrated Development Environment).

Si vedrà ora come configurare il debugger di Visual Studio Code per l'uso con Node.js.

Come usare Il debug di Visual Studio Code per Node.js

In Visual Studio Code si accede al debugger dalla scheda Esegui .

• Se nella finestra dell'editor è aperto un .js file, è possibile selezionare Esegui e debug e quindi selezionare Node.js per eseguire direttamente il debug del file JavaScript aperto.

  

Esistono diversi altri modi per avviare il debug in Visual Studio Code. Per l'esercizio successivo si userà un file launch.json. I team di sviluppo usano spesso un file launch.json per personalizzare la configurazione di esecuzione. Con la configurazione specificata in un file con estensione json, è possibile archiviarla nel controllo del codice sorgente. Dal controllo del codice sorgente è possibile condividere la configurazione nel team.

Controllare il flusso aggiungendo punti di interruzione

A differenza del debugger predefinito della riga di comando di Node.js, il debugger di Visual Studio Code avvia immediatamente l'esecuzione del codice. Se il programma termina rapidamente, è possibile che non si abbia la possibilità di interagire con il debugger. Per questo motivo, è consigliabile aggiungere dei punti di interruzione prima di eseguire il codice. Verranno aggiunti e rimossi alcuni punti di interruzione nell'esercizio successivo.

Per aggiungere un punto di interruzione nel codice, trovare la riga di codice nel file JavaScript (.js) in cui si vuole aggiungere un'interruzione. Accanto al numero di riga per l'istruzione del codice, selezionare nel margine sinistro. Quando viene aggiunto il punto di interruzione, accanto al numero di riga verrà visualizzato un cerchio rosso. Per rimuovere il punto di interruzione, selezionare il cerchio rosso.

È anche possibile usare il menu di scelta rapida del clic con il pulsante destro del mouse per aggiungere un punto di interruzione. Il menu di scelta rapida include l'opzione Aggiungi punto di interruzione condizionale, in cui si immette una condizione per interrompere l'esecuzione del codice. Un punto di interruzione condizionale è attivo solo quando viene soddisfatta la condizione specificata.

Questo punto di interruzione arresta l'esecuzione solo quando il valore di convertedValue non è definito.

Panoramica del debugger di Visual Studio Code

Dopo aver configurato i punti di interruzione e avviato l'app, sullo schermo vengono visualizzati nuovi controlli e pannelli informazioni.

Numero	Nome	Descrizione
1.	Controlli di avvio del debugger	Nella parte superiore della barra laterale è possibile trovare i controlli di avvio.
2.	Stato delle variabili	Il pannello Variabili mostra lo stato corrente delle variabili.
3.	Stato delle variabili controllate	Il pannello Espressioni di controllo mostra lo stato corrente delle variabili watched.
4.	Stack di chiamate corrente	Il pannello Stack di chiamate mostra lo stack di chiamate corrente.
5.	File di script caricati	Il pannello File di script caricati mostra i file JavaScript caricati finora.
6.	Punti di interruzione	Il pannello Punti di interruzione mostra tutti i punti di interruzione inseriti nel codice.
7.	Controlli di esecuzione	È possibile controllare il flusso di esecuzione del programma usando questi controlli.
8.	Passaggio di esecuzione corrente	Il passaggio di esecuzione corrente è evidenziato nella finestra dell'editor.
9.	Console di debug	La console di debug può essere usata per visualizzare i log della console dell'applicazione e per valutare le espressioni o eseguire il codice nel contesto di esecuzione corrente.

Controlli di avvio del debugger

Nella parte superiore della barra laterale sono disponibili i controlli di avvio:

Numero	Nome	Descrizione
1.	Consente di iniziare il debug	Avviare il debug dell'applicazione.
2.	Selezionare la configurazione di avvio attiva	Selezionare la configurazione di avvio attiva.
3.	Modificare il launch.json file	Modificare il file launch.json. Se necessario, creare il file JSON.
4.	Aprire la console di debug	Aprire la console di debug e attivare o disattivare la visibilità dei pannelli Variabili, Espressione di controllo, Stack di chiamate e Punti di interruzione.

Visualizzare e modificare lo stato delle variabili

Quando si analizza la causa di un difetto del programma, esaminare lo stato delle variabili alla ricerca di modifiche impreviste. A tale scopo, è possibile usare il pannello Variabili.

Le variabili vengono visualizzate organizzate per ambito:

Ambito	Descrizione
Locale	Le variabili locali sono accessibili nell'ambito corrente, in genere la funzione corrente.
Generale	Le variabili globali sono accessibili da qualsiasi punto del programma. Sono inclusi anche gli oggetti di sistema del runtime JavaScript, quindi non bisogna sorprendersi se sono presenti parecchi elementi.
Chiusura	Le variabili di chiusura sono accessibili dalla chiusura corrente, se presente. Una chiusura combina l'ambito locale di una funzione con quello della funzione esterna a cui appartiene.

Le azioni possibili includono:

• Espandere gli ambiti: è possibile espandere ambiti e variabili selezionando la freccia. Quando si espandono gli oggetti, vengono visualizzate tutte le proprietà definite al loro interno.

• Modificare il valore della variabile: è possibile modificare il valore di una variabile in tempo reale facendo doppio clic sulla variabile.

• Visualizzare una variabile: passando il puntatore del mouse su un parametro di funzione o una variabile direttamente nella finestra dell'editor, è anche possibile visualizzarne il valore.

  

Controllare le variabili

Se si vuole tenere traccia dello stato di una variabile nel tempo o in funzioni diverse, può essere noioso eseguire la ricerca ogni volta. A tale scopo, è utile usare il pannello Espressione di controllo.

È possibile selezionare il pulsante più per immettere il nome di una variabile o un'espressione da controllare. In alternativa, è possibile fare clic con il pulsante destro del mouse su una variabile nel pannello Variabili e selezionare Aggiungi a espressione di controllo.

Tutte le espressioni all'interno del pannello Espressioni di controllo verranno aggiornate automaticamente durante l'esecuzione del codice.

Stack di chiamate

Ogni volta che il programma immette una funzione, viene aggiunta una voce allo stack di chiamate. Quando l'applicazione diventa complessa e sono presenti funzioni chiamate all'interno di altre funzioni molte volte, lo stack di chiamate rappresenta il tracciato delle chiamate di funzione.

È utile per trovare l'origine di un'eccezione. Se si verifica un arresto anomalo imprevisto del programma, nella console viene spesso visualizzato un errore simile al seguente:

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Il gruppo di righe at [...] sotto il messaggio di errore è detto analisi dello stack. L'analisi dello stack specifica il nome e l'origine di ogni funzione che è stata chiamata prima di terminare con l'eccezione. Può tuttavia risultare difficile da decifrare, perché include anche funzioni interne del runtime Node.js.

In questo caso, è utile usare il pannello Stack di chiamate di Visual Studio Code. Filtra le informazioni indesiderate per visualizzare solo le funzioni rilevanti dal codice per impostazione predefinita. È quindi possibile rimuovere questo stack di chiamate per individuare da dove è stata originata l'eccezione.

Per maggiore comodità, è possibile selezionare il pulsante Riavvia frame visualizzato quando si passa il puntatore sul nome di una funzione nello stack. L'esecuzione verrà riavvolta fino all'inizio della funzione, riavviando il programma fino a quel punto.

Visualizzare i file di script caricati

Questo pannello visualizza tutti i file JavaScript caricati fino a questo momento. Nei progetti di grandi dimensioni a volte può essere utile controllare il file da cui è in esecuzione il codice corrente.

Punti di interruzione

Nel pannello Punti di interruzione è possibile visualizzare e attivare/disattivare tutti i punti di interruzione inseriti nel codice. È anche possibile attivare/disattivare le opzioni per l'interruzione in corrispondenza di eccezioni rilevate o non rilevate. È possibile usare il pannello Punti di interruzione per esaminare lo stato del programma e risalire all'origine di un'eccezione usando lo stack di chiamate quando se ne verifica una.

Controllare l'esecuzione

È possibile controllare il flusso di esecuzione del programma usando questi controlli.

Da sinistra a destra, i controlli sono i seguenti:

• Continua o Sospendi esecuzione. Se l'esecuzione è sospesa, continuerà finché non viene raggiunto il punto di interruzione successivo. Se il programma è in esecuzione, il pulsante cambia in Sospendi esecuzione, utilizzabile per sospendere l'esecuzione.
• Esegui istruzione/routine. Esegue l'istruzione del codice successiva nel contesto corrente (analogamente al comando next nel debugger predefinito).
• Esegui istruzione. Simile a Esegui istruzione/routine, ma se l'istruzione successiva è una chiamata di funzione, passa alla prima istruzione del codice di questa funzione (analogamente al comando step).
• Esci. Se ci si trova all'interno di una funzione, eseguire il codice rimanente di questa funzione e tornare all'istruzione dopo la chiamata di funzione iniziale (uguale al out comando).
• Riavvia. Riavvia il programma dall'inizio.
• Arresta. Termina l'esecuzione e chiude il debugger.

Usare la console di debug

La console di debug può essere visualizzata o nascosta premendo CTRL+MAIUSC+Y (Windows, Linux) o CMD+MAIUSC+Y (Mac). Può essere usata per visualizzare i log della console dell'applicazione e per valutare le espressioni o eseguire il codice nel contesto di esecuzione corrente, analogamente al comando exec nel debugger predefinito di Node.js.

È possibile immettere un'espressione JavaScript nel campo di input nella parte inferiore della console di debug. Premere quindi INVIO per valutarla. Il risultato verrà visualizzato direttamente nella console.

In questo modo, è possibile controllare rapidamente il valore di una variabile, testare una funzione con valori diversi o modificare lo stato corrente.

Aggiungere punti di log anziché console.log

Linters contrassegnerà console.log le istruzioni come errori. Per ottenere lo stesso effetto delle console.log istruzioni, usare invece i punti di log di Visual Studio Code, che vengono stampati nella console di debug.

Aggiungere un punto di log facendo clic con il pulsante destro del mouse nella stessa area usata per aggiungere un punto di interruzione, quindi selezionare Aggiungi punto di log. Immettere un messaggio da visualizzare in corrispondenza di tale punto nel codice.

Analogamente ai punti di interruzione, i punti di inserimento istruzione di registrazione non modificano in alcun modo il codice e vengono usati solo durante il debug. Non ci sono quindi più scuse per lasciare che console.log('here') finisca per sbaglio nell'ambiente di produzione.