Definindo pontos de interrupção
Pause a execução e inspecione o estado.
Definindo pontos de interrupção é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 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.
O que é um ponto de interrupção
Um ponto de interrupção instrui o depurador a pausar a execução em uma linha específica. Enquanto está pausado, você pode inspecionar variáveis e a pilha de chamadas para entender o estado do programa.
Por que pontos de interrupção são melhores que registros
Em comparação com espalhar instruções de registro pelo código, os pontos de interrupção permitem examinar todas as variáveis no escopo em um determinado momento sem alterar o código; depois, você pode continuar ou avançar passo a passo.
Abrindo o painel de fontes
Nas DevTools do navegador, os pontos de interrupção ficam no painel de fontes. Abra as DevTools, mude para o painel de fontes e localize o arquivo do seu código na árvore de arquivos.
Definindo um ponto de interrupção em uma linha
Clique na margem do número da linha ao lado de uma instrução para definir um ponto de interrupção ali. Um marcador será exibido, e a execução será pausada quando essa linha estiver prestes a ser executada.
A instrução do depurador
Adicionar uma instrução do depurador ao seu código aciona um ponto de interrupção programaticamente quando as DevTools estão abertas. Remova-a antes de distribuir o código de produção.
function compute(x) {
const doubled = x * 2
// a debugger statement on the next line would pause execution here
return doubled + 1
}Pontos de interrupção condicionais
Clicar com o botão direito em uma linha permite adicionar uma condição. O depurador pausa somente quando a expressão é verdadeira, o que é extremamente útil dentro de laços.
Pontos de registro
Um ponto de registro exibe uma mensagem sem pausar, como uma instrução de registro temporária adicionada pelas DevTools em vez de editar o código-fonte.
Inspecionando variáveis
Quando o programa está pausado, o painel de escopo lista as variáveis locais, de fechamento e globais com seus valores atuais, permitindo verificar suas suposições.
Expressões observadas
O painel de observação avalia as expressões que você define a cada pausa, permitindo acompanhar um valor calculado enquanto avança pelo código.
Pontos de interrupção em eventos
As DevTools também podem pausar em eventos, como um clique ou uma solicitação de rede, interrompendo a execução no momento em que o evento é disparado.
Gerenciando pontos de interrupção
O painel de pontos de interrupção lista todos os seus pontos de interrupção. Você pode desativá-los temporariamente com uma caixa de seleção ou removê-los quando terminar a depuração.
Verificação rápida
Teste seus conhecimentos sobre pontos de interrupção.
Recapitulação
Recapitulação: Os pontos de interrupção pausam a execução para permitir a inspeção.
- Defina-os na margem do painel de fontes
- A instrução do depurador interrompe o programa programaticamente
- Os pontos de interrupção condicionais pausam somente quando a condição é verdadeira
- Inspecione o escopo e as expressões observadas enquanto o programa está pausado
Perguntas Frequentes
A aula “Definindo pontos de interrupção” é grátis?
Sim — o texto completo de “Definindo pontos de interrupção” é 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 “Definindo pontos de interrupção”?
Pause a execução e inspecione o estado. 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 2 de 4.
Quanto tempo leva a aula “Definindo pontos de interrupção”?
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