JavaScript Academy · Lezione

Leggere gli stack trace

Rintracci gli errori fino alla loro origine.

Leggere gli stack trace è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è uno stack trace

Uno stack trace è l'elenco delle chiamate di funzione attive nel momento in cui si è verificato un errore. Mostra il percorso seguito dal programma per arrivare al problema.

Leggere dall'alto verso il basso

Il frame superiore di un trace indica il punto in cui è stato generato l'errore. Ogni riga successiva mostra il chiamante, fino al punto di ingresso originale del programma.

Anatomia di un frame

Ogni frame indica in genere una funzione, poi il file, il numero di riga e la colonna in cui è avvenuta la chiamata. In questo modo è possibile individuare con precisione la posizione.

Il messaggio di errore

Sopra i frame si trovano il nome e il messaggio dell'errore, ad esempio un TypeError che descrive cosa non ha funzionato. Lo legga per primo: spesso spiega la causa.

function getName(user) {
  return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")

Seguire la catena delle chiamate

Leggendo verso il basso si ricostruisce la sequenza: quale funzione ha chiamato quale altra, fino ad arrivare alla riga che ha causato l'errore.

Il proprio codice e quello delle librerie

I trace includono spesso frame delle librerie. Si concentri sul frame più in alto che appartiene ai propri file sorgente, perché di solito è lì che si trova la correzione.

Stack trace asincroni

I DevTools moderni ricompongono le chiamate asincrone, mostrando il contesto di origine di una promise o di un timer, così il trace non si interrompe al confine.

Generare manualmente un trace

console.trace stampa lo stack delle chiamate corrente senza generare un errore, aiutando a capire come è stata raggiunta una funzione.

function inner() {
  console.trace("reached inner")
}
function outer() {
  inner()
}
outer()

La proprietà stack di Error

Un oggetto Error contiene una proprietà stack che include il trace sotto forma di testo; è possibile registrarlo o inviarlo a un servizio di segnalazione degli errori.

const err = new Error("Something failed")
console.log(typeof err.stack)

Codice minificato e source map

Il codice di produzione è spesso minificato, rendendo i trace criptici. Le source map riconducono le posizioni del codice minificato ai file originali, producendo trace leggibili.

Dal trace alla correzione

Combini il messaggio, il frame utente più in alto e il numero di riga per individuare il bug. Quindi ispezioni le variabili in quel punto per confermarne la causa.

Verifica rapida

Verifichi le sue conoscenze sugli stack trace.

Riepilogo

Riepilogo: Gli stack trace rivelano il percorso che conduce a un errore.

Il frame superiore indica il punto in cui è stato generato l'errore
I frame inferiori sono i chiamanti
Si concentri sul frame più in alto appartenente al proprio codice
Le source map rendono leggibili i trace del codice minificato

const err = new Error("fail")
console.log(typeof err.stack)

Domande Frequenti

La lezione «Leggere gli stack trace» è gratuita?

Sì — il testo completo di «Leggere gli stack trace» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Leggere gli stack trace»?

Rintracci gli errori fino alla loro origine. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Leggere gli stack trace»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy