Breakpoint: fermare il codice nei DevTools

Usare il debugger per osservare il codice mentre viene eseguito.

In parole semplici

Un breakpoint ferma il codice in un punto. Così puoi vedere il valore delle variabili senza aggiungere console.log ovunque.

Questa lezione fa parte del modulo Controllare, correggere e migliorare. L’obiettivo del modulo è: Imparare a leggere errori, controllare dati e verificare funzioni senza andare a tentativi.

Parole nuove

breakpoint: punto in cui il browser ferma il codice.
debugger: strumento per osservare il codice in esecuzione.

Cosa impari

Capire il concetto senza partire da definizioni astratte.
Vedere un esempio piccolo che puoi copiare e modificare.
Collegare l’argomento al risultato del modulo: una checklist di controllo per correggere una piccola app JavaScript.

Esempio da copiare

function calcolaTotale(prezzo, sconto) {
  const totale = prezzo - sconto;
  return totale;
}

console.log(calcolaTotale(50, 10));

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

Apri il file nei DevTools.
Metti un breakpoint dentro la funzione.
Ricarica la pagina.
Osserva prezzo, sconto e totale.
Fai ripartire il codice.

Controllo finale

Hai finito quando riesci a fermare il codice e leggere una variabile nei DevTools.