JavaScript Academy · Lezione

Eseguire il codice passo passo

Esegua le funzioni passo passo, entrando, uscendo o avanzando oltre.

Eseguire il codice passo passo è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Eseguire il codice passo per passo

Una volta messi in pausa in corrispondenza di un breakpoint, si procede nel codice passo per passo, un'operazione alla volta, per osservare come cambia lo stato riga dopo riga.

Riprendere l'esecuzione

Il pulsante per riprendere l'esecuzione continua l'esecuzione normale fino al breakpoint successivo o fino al termine del programma. Lo utilizzi quando ha osservato a sufficienza la situazione durante la pausa corrente.

Step over

Step over esegue completamente la riga corrente, incluse le eventuali funzioni chiamate, quindi mette in pausa l'esecuzione sulla riga successiva della stessa funzione. La funzione chiamata non viene eseguita passo per passo.

function helper() {
  return 5
}
function main() {
  const a = helper()
  const b = a + 1
  return b
}

Step into

Step into entra nella chiamata di funzione presente sulla riga corrente e mette in pausa l'esecuzione sulla sua prima istruzione, consentendo di eseguire il debugging al suo interno.

function helper() {
  const x = 10
  return x
}
function main() {
  return helper()
}

Step out

Step out completa la funzione corrente e mette in pausa l'esecuzione sulla riga immediatamente successiva alla chiamata che vi ha condotto. Lo utilizzi per uscire da una funzione che non deve più essere ispezionata.

Scegliere il comando di esecuzione

Utilizzi step over quando si fida di una funzione, step into per analizzarla e step out dopo aver verificato che la logica interna sia corretta.

Il riquadro Call Stack

Durante l'esecuzione passo per passo, il riquadro Call Stack mostra la catena di chiamate di funzione che ha portato alla riga corrente. Facendo clic su un frame si passa al relativo contesto.

Osservare i cambiamenti dello stato

Procedendo passo per passo, i riquadri Scope e Watch si aggiornano e consentono di vedere esattamente quale riga modifica in modo imprevisto una variabile.

Esecuzione passo per passo nei cicli

All'interno di un ciclo, l'esecuzione passo per passo ripete il corpo a ogni iterazione. Un breakpoint condizionale è spesso più rapido che procedere manualmente attraverso molte iterazioni.

function sumTo(n) {
  let total = 0
  for (let i = 1; i <= n; i++) {
    total += i
  }
  return total
}

Entrare nel codice delle librerie

Step into può condurre all'interno del codice delle librerie. I DevTools offrono una funzione per ignorare gli script elencati, così da rimanere nel proprio codice.

Un flusso di lavoro tipico

Imposti un breakpoint vicino al bug sospetto, quindi proceda riga per riga osservando le variabili finché non individua il punto in cui la realtà diverge dalle aspettative.

Verifica rapida

Verifichi le sue conoscenze sull'esecuzione passo per passo.

Riepilogo

Riepilogo: L'esecuzione passo per passo consente di attraversare il codice sotto il proprio controllo.

Step over esegue una riga senza entrare nelle chiamate
Step into entra nella funzione chiamata
Step out completa la funzione corrente
Lo stack delle chiamate mostra il percorso seguito per arrivare al punto corrente

Domande Frequenti

La lezione «Eseguire il codice passo passo» è gratuita?

Sì — il testo completo di «Eseguire il codice passo passo» è 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 «Eseguire il codice passo passo»?

Esegua le funzioni passo passo, entrando, uscendo o avanzando oltre. 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 3 di 4.

Quanto tempo richiede la lezione «Eseguire il codice passo passo»?

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