Debugging

Il debugger ed in generale gli strumenti di sviluppo sono fondamentali per analizzare bug, vedere lo stato delle variabili e comprendere perché l’applicazione non funziona come vorremmo.

Al debugger si accede dal browser (es. Chrome) premendo tasto destro e accedendo alla voce “ispeziona”. Da li si apre una sezione della finestra dove è possibile vedere tra gli altri i seguenti tab:

• Elements: contiene gli elementi di pagina e il loro stile CSS, utile per vedere la struttura della pagina effettivamente renderizzata;
• Console: si accedere alla console, e si possono interrogare gli oggetti in base al contesto;
• Sources: da qui si accede alle risorse compresi gli script JS, lo approfondiremo tra poco;
• Network: da qui si vede il risultato delle chiamate anche AJAX;
• Application: da qui si può accedere a Local storage, Session storage e Cookies (oltre ad altri strumenti).

In questa sede approfondiamo il debugger, ovvero la sezione sources. Se eseguiamo l’applicazione sopra indicata compariirà questo codice. Se clicchiamo appena a sinistra del numero di riga possiamo aggiungere dei breakpoint ovvero dei punti dove l’esecuzione si interrompe se la finestra di debug è aperta: qui ad esempio c’è un breakpoint alla riga 22.

Quando il runtime passa da questa riga, l’esecuzione si ferma e possiamo ispezionare il valore delle variabili, verificando eventuali problematiche, ad esempio un binding non funzionante, un JSON non correttamente formattato, ecc.

Diventa fondamentale acquisire l’utilizzo di questo strumento per poter eseguire il debugging.

Try Catch

Il costrutto try catch serve a verificare un evento eccezionale, che avviene al di fuori del controllo del programmatore. La struttura di codice è la seguente:

try {
  // istruzioni
} catch (error) {
  // istruzioni in caso di errore
}

In questo modo se c’è un errore non previsto dal programmatore (ad esempio un errore di calcolo, una elaborazione su dati mancanti, una connessione ad Internet che si interrompe, ecc.) la try catch permette di gestire l’errore, anche bloccante e per esempio stamparne un log o avvertire l’utente.

Qui un esempio su un calcolo matematico:

const a = parseInt(inputA.value);
const b = parseInt(inputB.value);
try {
  const c = a/b;
  divC.innerText = c;
} catch (error) {
  console.log(error);
  divC.innerText = "errore di calcolo: " + error;
}

Ad esempio se a e b non sono numeri, oppure se b vale 0, si può incorrere in errori.

Per quanto riguarda la fetch, la try catch non funziona, per la natura asincrona della fetch. Vedremo nelle prossime lezioni come gestire errori anche nella programmazione asincrona.