Neste guia, você aprenderá como trabalhar de forma eficiente com os pontos de interrupção de exceção das Ferramentas de Desenvolvedor do Chrome. Os pontos de interrupção de exceção permitem que você depure seu JavaScript, automaticamente pausando o programa quando ocorre uma exceção. Isso é especialmente útil quando você quer rastrear e entender erros no código, sabendo onde e por que eles ocorrem. O uso de pontos de interrupção é uma habilidade essencial para qualquer desenvolvedor que queira garantir que seu código esteja livre de erros. Vamos direto aos detalhes!
Principais descobertas
- Os pontos de interrupção de exceção pausam o programa quando uma exceção ocorre.
- É possível distinguir entre exceções "não capturadas" e "capturadas".
- Inserir a instrução debugger; permite que você pause o programa em um determinado ponto.
- É importante remover as instruções debugger; após a conclusão da depuração para manter o código de produção limpo.
Guia Passo a Passo
1. Ativando os Pontos de Interrupção de Exceção
Para ativar a pausa automática em caso de exceções, abra as Ferramentas de Desenvolvedor do Chrome. Vá para o menu "Sources" e localize a seção "Breakpoints". Marque a opção "Pausar nas Exceções" e "Pausar nas Exceções Capturadas".
Agora o programa irá pausar automaticamente quando ocorrer uma exceção. Para testar, você pode usar o seguinte código, que lança uma exceção simples.
Ao executar o código, o programa será pausado no ponto onde a exceção é lançada.
2. Lidando com Exceções "Capturadas" e "Não Capturadas"
Se você desativar a opção para "Exceções Capturadas", perceberá que o programa não pausará em exceções capturadas.
No entanto, se houver uma exceção em um bloco try-catch, a exceção será capturada no bloco catch e o programa continuará a partir dali.
Aqui você pode ver que a exceção foi capturada e você pode ver a saída do console com o erro contido na exceção.
3. Aplicando em Múltiplos Pontos de Interrupção
Quando você tem vários pontos de interrupção em diferentes arquivos, pode ficar confuso. No entanto, você pode desativar todos os pontos de interrupção facilmente clicando com o botão direito em um ponto de interrupção e selecionando "Desativar todos os Pontos de Interrupção".
Isso desativará todos os pontos de interrupção, e você poderá reativá-los posteriormente, se necessário.
4. Utilizando a Instrução debugger;
Outra técnica útil durante a depuração é inserir a instrução debugger; no seu código. Isso irá pausar o programa nesse ponto sempre que a página for recarregada.
Ao usar a instrução debugger;, lembre-se de removê-la do seu código antes de ir para o ambiente de produção, pois não é útil na aplicação ao vivo.
Ao inserir a instrução debugger;, o programa será pausado nesse ponto específico, permitindo que você verifique as variáveis atuais e o histórico do programa.
5. Precauções ao Lidar com Exceções
Ao lidar com exceções, é importante ter cautela, especialmente ao utilizar muitas bibliotecas de terceiros. Elas também podem gerar exceções, e pode ser irritante se o seu código estiver constantemente pausando.
Se você sabe que sua aplicação gera exceções, pode ser útil ativar a opção de "Exceções não detectadas" para identificá-las durante o processo de depuração.
Lembre-se de que nem toda exceção leva a um problema. Uma exceção pode ser simplesmente capturada e não afetar negativamente a experiência do usuário.
Resumo
Neste guia, você aprendeu como usar os pontos de interrupção de exceção nas Ferramentas de Desenvolvedor do Chrome para encontrar erros em seu código JavaScript. Você viu como ativar e usar efetivamente esses pontos de interrupção para garantir que suas aplicações funcionem sem problemas. Compreender e implementar essas técnicas melhorará significativamente sua eficiência ao depurar.
Perguntas frequentes
Como ativar os pontos de interrupção de exceção nas Ferramentas de Desenvolvedor do Chrome?Abra as Ferramentas de Desenvolvedor do Chrome, vá para "Sources" e ative "Pausar nas exceções" e "Pausar nas exceções capturadas".
Qual é a diferença entre exceções "capturadas" e "não capturadas"?Exceções "capturadas" são aquelas que são tratadas em um bloco try-catch, enquanto exceções "não capturadas" não são capturadas e são encaminhadas diretamente ao manipulador de erros.
Como posso desativar todos os meus pontos de interrupção?Clique com o botão direito em um ponto de interrupção e escolha "Desativar todos os pontos de interrupção" no menu de contexto.
O que é a instrução debugger; e como usá-la?A instrução debugger; é um comando JavaScript que faz o programa parar naquele ponto. Você deve removê-lo do seu código após a depuração.
Por que devo remover a instrução debugger; antes de lançar em produção?Isso pode fazer com que sua aplicação pare em um ponto em que você não pretendia, afetando negativamente a experiência do usuário.
