Percorrendo o código passo a passo
Avance sobre, entre e para fora das funções.
Percorrendo o código passo a passo é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
Avançando pelo código
Depois de pausar em um ponto de interrupção, você avança passo a passo pelo código, uma operação de cada vez, para observar como o estado muda linha a linha.
Retomar
O botão de retomada continua a execução normal até o próximo ponto de interrupção ou até o programa terminar. Use-o quando já tiver visto o suficiente na pausa atual.
Avançar sem entrar
Avançar sem entrar executa completamente a linha atual, incluindo qualquer função que ela chame, e então pausa na linha seguinte da mesma função. A função chamada não é acessada.
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}Entrar na função
Entrar na função acessa uma chamada de função na linha atual e pausa na primeira instrução dela, permitindo depurá-la internamente.
function helper() {
const x = 10
return x
}
function main() {
return helper()
}Sair da função
Sair da função termina a função atual e pausa na linha logo após a chamada que levou você até ela. Use essa opção para deixar uma função que você não precisa mais inspecionar.
Escolhendo um comando de avanço
Avance sem entrar quando uma função for confiável, entre na função para investigá-la e saia dela depois de confirmar que a lógica interna está correta.
O painel da pilha de chamadas
Enquanto você avança, o painel da pilha de chamadas mostra a sequência de chamadas de função que levou à linha atual. Clicar em um quadro muda para esse contexto.
Observando a mudança de estado
À medida que você avança, os painéis de escopo e de observação são atualizados, permitindo ver exatamente qual linha modifica uma variável de maneira inesperada.
Avançando em laços
Dentro de um laço, avançar repete o corpo a cada iteração. Um ponto de interrupção condicional costuma ser mais rápido do que avançar manualmente por muitas iterações.
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}Entrando no código de bibliotecas
Entrar na função pode levar você às partes internas de uma biblioteca. As DevTools oferecem um recurso para ignorar arquivos listados, mantendo você no seu próprio código.
Um fluxo de trabalho típico
Defina um ponto de interrupção perto de um possível erro e avance linha a linha, observando as variáveis até encontrar o ponto em que a realidade diverge da expectativa.
Verificação rápida
Teste seus conhecimentos sobre o avanço passo a passo.
Recapitulação
Recapitulação: Avançar permite percorrer o código sob controle.
- Avançar sem entrar executa uma linha sem acessar as chamadas
- Entrar na função acessa uma função chamada
- Sair da função termina a função atual
- A pilha de chamadas mostra como você chegou ao ponto atual
Perguntas Frequentes
A aula “Percorrendo o código passo a passo” é grátis?
Sim — o texto completo de “Percorrendo o código passo a passo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Percorrendo o código passo a passo”?
Avance sobre, entre e para fora das funções. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Percorrendo o código passo a passo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Além de console.log
- Definindo pontos de interrupção
- Percorrendo o código passo a passo
- Lendo rastreamentos da pilha