Debugging con breakpoint e debugger del browser in JavaScript

Introduzione

Quando un’applicazione JavaScript non si comporta come previsto, il modo più rapido per capire cosa sta succedendo non è sempre aggiungere altri console.log(). Spesso la soluzione migliore è usare gli strumenti di debug del browser, in particolare i breakpoint e la parola chiave debugger.

Questo approccio ti permette di fermare l’esecuzione del codice in un punto preciso, ispezionare le variabili, controllare lo stack delle chiamate e capire il flusso reale del programma. È un sotto-argomento molto utile perché ti aiuta a passare da un debug “a tentativi” a un debug preciso e ripetibile.

In questo tutorial vedremo come usare i breakpoint nel browser e come inserire debugger nel codice per analizzare un problema tipico: la validazione di un carrello acquisti con sconto applicato in modo errato.

Codice completo

// Esempio: calcolo totale carrello con sconto e spedizione
// Obiettivo: trovare un bug nel calcolo finale usando debugger e breakpoint

const cart = [
  { name: "Keyboard", price: 79.9, quantity: 1 },
  { name: "Mouse", price: 29.9, quantity: 2 },
  { name: "Monitor", price: 249.0, quantity: 1 }
];

const discountCode = "SAVE10";
const shippingThreshold = 100;
const shippingCost = 9.99;

function calculateSubtotal(items) {
  let subtotal = 0;

  for (const item of items) {
    subtotal += item.price * item.quantity;
  }

  return subtotal;
}

function applyDiscount(subtotal, code) {
  // Sconto del 10% solo se il codice è valido
  if (code === "SAVE10") {
    return subtotal * 0.9;
  }

  return subtotal;
}

function calculateShipping(subtotal) {
  // Spedizione gratuita sopra la soglia
  if (subtotal > shippingThreshold) {
    return 0;
  }

  return shippingCost;
}

function calculateTotal(items, code) {
  const subtotal = calculateSubtotal(items);

  // Punto utile per il debug:
  // il debugger ferma qui l´esecuzione e permette di ispezionare subtotal
  debugger;

  const discountedTotal = applyDiscount(subtotal, code);
  const shipping = calculateShipping(discountedTotal);

  return discountedTotal + shipping;
}

// Simulazione del problema
const total = calculateTotal(cart, discountCode);
console.log("Totale finale:", total.toFixed(2));

Spiegazione

Il codice calcola il totale di un carrello in tre passaggi:

• somma dei prodotti con calculateSubtotal();
• applicazione dello sconto con applyDiscount();
• calcolo della spedizione con calculateShipping().

Il punto chiave è la riga con debugger;. Quando il browser esegue quel punto, se gli strumenti di sviluppo sono aperti, l’esecuzione si blocca automaticamente. A quel punto puoi:

• leggere i valori correnti delle variabili;
• eseguire il codice passo dopo passo;
• verificare se il flusso entra davvero nei rami if attesi;
• controllare il valore restituito da ogni funzione.

Nel nostro esempio, il debug serve a verificare un possibile errore logico: la spedizione viene calcolata sul totale scontato, non sul subtotale. Questo potrebbe essere corretto oppure no, a seconda delle regole di business. Grazie al breakpoint puoi capire subito se il comportamento è quello desiderato.

Per usare i breakpoint dal browser:

• apri la pagina nel browser;
• apri gli strumenti di sviluppo con F12 o Ctrl+Shift+I / Cmd+Option+I;
• vai nella scheda Sources o Debugger;
• trova il file JavaScript;
• clicca sul numero di riga per aggiungere un breakpoint.

Il vantaggio del breakpoint rispetto a console.log() è che non devi modificare continuamente il codice per osservare i valori. Puoi fermarti esattamente nel punto giusto, esplorare l’ambiente e riprendere l’esecuzione quando vuoi.

Un altro strumento fondamentale è la possibilità di step over, step into e step out:

• Step over: esegue la riga corrente senza entrare nelle funzioni chiamate;
• Step into: entra dentro la funzione chiamata;
• Step out: termina la funzione corrente e torna al chiamante.

Questi comandi sono utilissimi quando vuoi capire dove nasce un valore sbagliato o perché una funzione restituisce un risultato inatteso.

Best practice

Usare bene i breakpoint e debugger richiede metodo. Ecco alcune pratiche consigliate:

• Inserisci debugger solo temporaneamente: è perfetto in fase di sviluppo, ma va rimosso prima del rilascio.
• Fermati nei punti strategici: scegli funzioni di calcolo, handler di eventi o punti in cui i dati cambiano forma.
• Controlla gli input: verifica sempre i dati in ingresso prima di cercare il bug nel calcolo finale.
• Osserva lo stack delle chiamate: spesso il problema non è nel punto in cui si manifesta, ma in una funzione precedente.
• Usa breakpoint condizionali: se un ciclo è molto lungo, ferma l’esecuzione solo quando una variabile soddisfa una condizione precisa.
• Non affidarti solo al log: i log sono utili, ma il debugger ti dà una visione più chiara del flusso.

Un consiglio importante: quando lavori su codice asincrono, come fetch o Promise, usa i breakpoint anche dentro le callback e le funzioni async. Molti bug moderni dipendono proprio dal timing e dall’ordine di esecuzione, quindi fermare il codice nel punto corretto è spesso decisivo.

Infine, prova a riprodurre il problema con dati realistici. Debuggare con input troppo semplici può nascondere errori che emergono solo con valori più complessi, array vuoti, oggetti incompleti o casi limite.

Riepilogo

Il debugging con breakpoint e debugger è uno dei metodi più efficaci per analizzare problemi reali in JavaScript. Ti consente di interrompere l’esecuzione, ispezionare le variabili, seguire il flusso del programma e capire con precisione dove nasce un errore.

• debugger; ferma il codice nel punto inserito;
• i breakpoint del browser permettono di controllare il codice senza modificarlo continuamente;
• gli strumenti di stepping aiutano a seguire il flusso riga per riga;
• lo stack delle chiamate è fondamentale per risalire alla causa del bug;
• questa tecnica è particolarmente utile con funzioni, eventi e codice asincrono.

Se vuoi fare debugging in modo professionale, non limitarti a osservare il risultato finale: ferma il codice nel momento giusto e analizza il percorso che porta al problema.

Approfondisci con risorse ufficiali

• MDN Web Docs - Debugger statement: documentazione ufficiale sulla parola chiave debugger.
• MDN Web Docs - Chrome DevTools: guida generale agli strumenti del browser.
• Chrome DevTools Documentation: documentazione ufficiale per breakpoint, stepping e ispezione variabili.
• Firefox Developer Tools: documentazione degli strumenti di debug di Firefox.
• MDN Web Docs - JavaScript: riferimento completo per il linguaggio e i concetti collegati al debugging.