Log utili, log rumorosi

In parole semplici

Il log è lo strumento più antico e più frainteso del debug. Un buon log risponde a una domanda precisa. Un log rumoroso riempie la console di dati che non servono e seppellisce quelli che servirebbero davvero.

Questa lezione introduce log strutturati, usando le funzioni avanzate di console per dare forma all’osservazione.

Parole nuove

• log a checkpoint: un log che marca un passaggio chiave del flusso.
• log strutturato: log con oggetti, tabelle e gruppi anziché stringhe casuali.
• livello di log: classificazione (debug, info, warn, error).
• log temporaneo: log inserito per indagine, da rimuovere a fine sessione.

Cosa impari

• Scegliere cosa loggare e cosa non loggare.
• Usare console.group, console.table, console.time, console.assert, console.dir.
• Distinguere log di indagine (temporanei) da log “permanenti” (modulo 9).

Anti-pattern: il log “spruzzato”

function processaCarrello(carrello) {
  console.log("qui");
  console.log(carrello);
  for (const item of carrello) {
    console.log("ciclo");
    console.log(item);
    if (item.quantita > 0) {
      console.log("ok");
    }
  }
  console.log("fine");
}

Otto log per nulla. Nessuna risposta a una domanda specifica. Provare su un carrello da 50 prodotti per vedere il risultato.

Pattern: log a checkpoint

function processaCarrello(carrello) {
  console.log("[carrello] in ingresso:", { length: carrello.length, totale: somma(carrello) });

  const validati = carrello.filter(item => item.quantita > 0);
  console.log("[carrello] dopo filtro:", { length: validati.length });

  const risultato = validati.map(applicaSconto);
  console.log("[carrello] in uscita:", { length: risultato.length, totale: somma(risultato) });

  return risultato;
}

Tre log, tre informazioni esatte, una scia chiara. Ogni log:

• ha un prefisso ([carrello]) per filtrare.
• mostra dati strutturati anziché concatenazioni.
• riassume (length, totale) anziché dumpare tutto.

Funzioni avanzate di console

console.group e console.groupEnd

Raggruppa log correlati:

console.group("Validazione utente");
console.log("email:", utente.email);
console.log("ruolo:", utente.ruolo);
console.log("attivo:", utente.attivo);
console.groupEnd();

DevTools mostra un gruppo collassabile.

console.table

Formatta array di oggetti in tabella:

console.table([
  { id: 1, nome: "Carlo", prezzo: 9.9 },
  { id: 2, nome: "Anna",  prezzo: 14.5 },
]);

Risultato leggibile a colpo d’occhio.

console.time e console.timeEnd

Misura il tempo di un blocco:

console.time("calcolaTotale");
const totale = calcolaTotale(carrello);
console.timeEnd("calcolaTotale");
// calcolaTotale: 12.34ms

console.assert

Logga solo se la condizione è falsa:

console.assert(carrello.length > 0, "carrello vuoto inatteso", { carrello });

console.dir e console.log per oggetti

console.log di un oggetto a volte mostra la rappresentazione “live” (cambia nel tempo). console.dir(oggetto) mostra una istantanea del momento.

Livelli: console.debug, info, warn, error

console.debug("dettaglio interno");
console.info("flusso normale");
console.warn("situazione strana ma non rotta");
console.error("rotto");

In DevTools puoi filtrare per livello.

Regole d’oro

1. Una domanda per log. “Che cos’è X qui?” non “vediamo un po’”.
2. Prefisso costante per filtrare ([carrello], [auth]).
3. Dati strutturati, non concatenazioni di stringhe.
4. Riassumi ciò che è grande (length, primi 3 elementi, somma).
5. Rimuovi i log a fine sessione, oppure trasformali in log permanenti (modulo 9).

Quando il log non basta

Se devi loggare in 8 punti, probabilmente serve un breakpoint (prossima lezione) o uno strumento di trace (modulo 9).

Esercizio guidato

Prendi una funzione che hai scritto che fa più passaggi (filtro, mappa, riduzione). Inseriscile log usando:

• console.group per delimitare la funzione;
• un log strutturato all’ingresso;
• console.table per un array intermedio;
• console.time per misurare;
• un log strutturato in uscita;
• console.groupEnd.

Confronta la console con quella ottenuta usando solo console.log “spruzzati”. Misura quale ti permette di rispondere a una domanda in meno tempo.

Errori frequenti del principiante

• Pensare che “più log = più info”. È il contrario: più rumore = meno segnale.
• Concatenare stringhe e numeri: console.log("x=" + x). Meglio console.log("x:", x) — preserva il tipo.
• Dimenticare di rimuovere log temporanei. Vanno in produzione e fanno trapelare dati.
• Trasformare ogni console.log in console.error. Perdi la capacità di filtrare per livello.