Debug con Console.log
Lo strumento di debug più semplice ed efficace
⏱ Stima ~5 min
01 · Leggi
Esistono strumenti di debug sofisticati con breakpoint, watch expression e step-through dell'esecuzione. Li imparerai. Ma lo strumento che usi più spesso, anche da ingegnere senior, è il semplice console.log().
L'idea è semplicissima: stampa le cose per vedere cosa sta succedendo davvero. Quando il tuo programma non si comporta come ti aspetti, il modo più rapido per capire perché è loggare il valore ad ogni passo e confrontare quello che ti aspettavi con quello che è successo davvero.
Non è elegante. Non è raffinato. Ma funziona, e funziona in fretta.
💡 Immagina cosìIl debug con console.log è come piazzare delle fototrappole in una foresta. Non puoi guardare ogni albero in continuazione, ma puoi mettere delle telecamere nei punti chiave per vedere cosa ci passa davanti. Quando appare qualcosa di strano, sai esattamente dove guardare.
02 · Leggi
Hai un'app negozio con un bug. La funzione getAffordableElectronics dovrebbe restituire elettronica entro un certo prezzo e disponibile in magazzino. Ma restituisce articoli costosi e non disponibili. Andiamo a indagare.
03 · Pratica nel terminale
Prima leggi il log di output per vedere cosa produce effettivamente la funzione rispetto a quello che ti aspettavi.
(Questa sezione è interattiva — attiva JavaScript per usarla.)
04 · Pratica nel terminale
Ora leggi il codice per seguire la logica. Osserva i passi del filtro — uno di essi ha un bug sottile nell'operatore.
(Questa sezione è interattiva — attiva JavaScript per usarla.)
05 · Esempio di codice
Ecco come apparirebbe il codice se aggiungessi log di debug ad ogni passo. Confronta i risultati intermedi per rintracciare dove va storto.
Aggiunta dei log di debug
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
Con un log ad ogni passo, il bug salta fuori: dopo il filtro del prezzo, vedresti sopravvivere gli articoli costosi invece di quelli economici. > doveva essere <. Senza log potresti impiegarci molto a intuirlo — con i log lo trovi in pochi secondi.
06 · Leggi
I log strategici sono un'arte. Non riversare log ovunque — mettili nei punti di trasformazione dei dati o dove potrebbe esserci un problema.
Punti chiave
- Logga all'inizio della funzione (è stata chiamata? Con cosa?)
- Logga prima e dopo le trasformazioni (cosa è cambiato?)
- Aggiungi un'etichetta ad ogni log: console.log('step 3 - data:', data)
- Rimuovi i log di debug prima di fare commit
07 · Completa
Quando fai debug con console.log, aggiungi sempre una _____ per sapere quale log è quale.
08 · Quiz
Perché ogni console.log dovrebbe avere un'etichetta?
- Per far girare il programma più veloce
- Per distinguere quale log ha prodotto quale output
- Perché JavaScript richiede un'etichetta per console.log
- Solo il codice in produzione ha bisogno di etichette
Altre lezioni di questo capitolo
⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.
※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.