modulo 00 / lezione 04

Fondamenta del debug

Glossario operativo del debugger

Costruire il vocabolario minimo: runtime, stack, heap, payload, fixture, regressione, throttling, source map, snapshot, postmortem.

40 minDebugging

In parole semplici

Il debug ha un suo dialetto. Le parole non sono difficili, ma se non le possiedi finisci per leggere un messaggio di errore senza capire metà delle parole. Questa lezione ti consegna un glossario operativo: dieci termini che torneranno in ogni modulo.

L’obiettivo non è memorizzare. È riconoscere il termine quando appare e sapere dove andarlo a riguardare.

Il glossario

Runtime

Ambiente che esegue il codice. Il browser è il runtime di una pagina web. Node.js è un altro runtime per JavaScript. Python ha il suo runtime. Lo stesso codice in due runtime diversi può comportarsi in modo diverso: è la causa di una fetta enorme di bug “funziona sul mio computer”.

Stack

Pila delle chiamate in corso. Quando la funzione A chiama B che chiama C, lo stack è [A, B, C]. Quando C ritorna, scompare. Lo stack trace che leggiamo negli errori è una fotografia di questa pila al momento dell’incidente.

Heap

Zona di memoria dove vivono gli oggetti più grandi e duraturi. Lo stack è veloce e ordinato; l’heap è capiente e disordinato. Una heap snapshot è la fotografia dell’heap a un certo istante — utile per scoprire chi consuma memoria.

Payload

Contenuto di un messaggio. In una richiesta HTTP POST, il payload è il corpo della richiesta; nella risposta è il corpo della risposta. Quando diciamo “controlla il payload” intendiamo “guarda cosa contiene davvero il messaggio, non cosa pensavi di mandare”.

Fixture

Dato di prova fissato, riproducibile, usato per far emergere un comportamento sempre uguale. Una fixture è ciò che permette di dire “se ti passo X, devi rispondere Y”. Senza fixture, ogni esecuzione è leggermente diversa e niente è verificabile.

Regressione

Comportamento che funzionava e adesso non funziona più. Un test di regressione è una verifica scritta per impedire al bug di tornare. Quando aggiungiamo una nuova funzione e per sbaglio rompiamo una vecchia, abbiamo introdotto una regressione.

Throttling

Rallentamento volontario di qualcosa per osservarlo meglio o per simulare condizioni reali. In DevTools puoi throttling della rete per vedere come si comporta la pagina con connessione lenta. È uno strumento di osservazione, non un fix.

Source map

File che spiega “questo bundle minificato corrisponde a queste righe del sorgente originale”. Senza source map, gli errori di un sito in produzione sembrano scritti in geroglifico. Con source map, DevTools ti porta alla riga vera del tuo codice TypeScript o JSX.

Snapshot

Fotografia di uno stato a un certo istante. Si parla di heap snapshot (memoria), DOM snapshot (struttura della pagina), snapshot test (l’output di un componente in un certo momento). Confrontare due snapshot è un modo potente per capire cosa è cambiato.

Postmortem

Documento scritto dopo un incidente serio. Risponde a: cosa è successo, quando, perché, cosa abbiamo imparato, cosa cambia adesso. Un buon postmortem è blameless: si concentra sul sistema e sul processo, non sulla persona.

Tabella di riferimento rapido

Termine Quando lo incontri Domanda chiave
runtime “funziona su Node ma non sul browser” qual è il runtime?
stack leggi uno stack trace da dove parte la catena di chiamate?
heap sospetto memory leak chi resta in memoria troppo a lungo?
payload risposta API “strana” cosa contiene esattamente il corpo?
fixture scrivi un test quale dato lo fa fallire sempre?
regressione bug nuovo dopo merge quale commit lo ha introdotto?
throttling pagina lenta solo “fuori” come si comporta con rete a 3G?
source map errore in produzione illeggibile la source map è caricata?
snapshot sospetto leak o cambio inatteso confronto prima/dopo?
postmortem incidente chiuso abbiamo scritto cosa abbiamo imparato?

Esercizio guidato

Apri un quaderno, fisico o digitale. Per ciascuno dei dieci termini scrivi:

  1. Definizione con parole tue (massimo due righe).
  2. Un esempio che hai incontrato di persona o che hai visto online. Se non ne hai uno, cercalo: leggi una issue di un progetto open source o una domanda su Stack Overflow.
  3. Una domanda aperta che hai sul termine.

Questo glossario sarà la tua “Wikipedia personale” del corso. Aggiungi voci ogni volta che incontri una parola nuova nei moduli successivi.

Errori frequenti del principiante

  • Memorizzare definizioni senza esempi. I termini astratti evaporano in fretta; gli esempi restano.
  • Confondere stack e heap. Sono due zone di memoria diverse con scopi diversi. Quando in dubbio: “lo stack è ordinato, l’heap è capiente”.
  • Trattare il glossario come definitivo. Aggiungi, correggi, espandi. È vivo.
  • Saltare il termine “postmortem”. Sembra avanzato, ma scrivere postmortem brevi anche per bug piccoli accelera la crescita molto più degli esercizi tecnici.