Usar pontos de interrupção
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Executar pontos de interrupção.
- Gerenciar pontos de interrupção.
Se você já precisou pausar seu código midstream do JavaScript para ver o que estava acontecendo, provavelmente já usou o comando debugger (depurador). E, depois de resolver o problema, teve que remover o comando debugger (depurador) antes de enviar o código para produção. Embora haja momentos em que o comando debugger (depurador) seja necessário, há uma maneira melhor de fazer com que seu código seja pausado. Adicione pontos de interrupção no DevTools enquanto visualiza a página no navegador. Os pontos de interrupção são mais fáceis de definir e não exigem que o código seja limpo após o uso.
Acompanhar com o Trail Together
Deseja acompanhar especialistas enquanto trabalha nesta etapa? Veja este vídeo que faz parte da série Trail Together no Trailhead Live.
(Este clipe começa na marca dos 26:18 minutos, caso você queira retroceder e ver o início da etapa novamente.)
Pontos de interrupção
Os pontos de interrupção permitem pausar o JavaScript. Enquanto o código estiver pausado, você poderá visualizar o estado das variáveis e as condições do código. Existem vários tipos de pontos de interrupção.
Pontos de interrupção de linha de código
Os pontos de interrupção de linha de código são ótimos quando você deseja investigar uma seção específica do código. Vamos adicionar um ponto de interrupção que faz uma pausa antes de uma linha de código selecionada ser executada.
Como você concluiu a unidade anterior, você já deve ter o display.js aberto no Editor de código. Caso contrário, siga as instruções na seção Locate the Lightning Web Components (Localizar os componentes Web do Lightning) da unidade anterior.
- No Editor de código do DevTools, localize a função
handleIncrement(event).
- Clique no número da linha de
const operand = event.detail;dentro da função handleIncrement. Um ponteiro azul destaca o número da linha para indicar que um ponto de interrupção está definido naquela linha.
- O ponto de interrupção também é mostrado em Breakpoints (Pontos de interrupção) no painel JavaScript Debugging (Depuração do JavaScript) à direita.
- Clique em +1 no aplicativo Solutions. A execução do código é pausada no ponto de interrupção.
Observe o indicador Paused in debugger (Pausado no depurador) (1). O botão +1 (2) está no estado clicado. A barra de ferramentas do controle do ponto de interrupção (3) indica Paused on breakpoint (Pausado no ponto de interrogação). O ícone de seta azul indica que o depurador parou na função handleIncrement. A linha com o ponto de interrupção está destacada (4), mostrando onde o depurador fez uma pausa no ponto de interrupção.
Como navegar pelos pontos de interrupção
Agora que a execução do código está pausada, você pode percorrê-lo, uma linha de cada vez, ou pode pular, entrar ou sair de uma função. As opções permitem que você monitore o fluxo de controle e os valores de propriedade à medida que percorre o código.
O painel JavaScript Debugging (Depuração do JavaScript) inclui a barra de ferramentas de controle Breakpoint (Ponto de interrupção) com botões para trabalhar com pontos de interrupção.
Botão |
Ação |
Descrição |
|---|---|---|
|
Resume script execution (Retomar a execução do script) e Pause script execution (Pausar a execução do script) |
Permite que o código seja executado até o próximo ponto de interrupção ou termine a execução se não houver mais pontos de interrupção. |
|
Step over next function call (Passar para a chamada da próxima função) |
Quando pausado em uma linha de código que contém uma função, Step over next function call (Passar para a chamada da próxima função) executa todo o código na função e pausa em seguida. |
|
Step into next function call (Entrar na chamada da próxima função) |
Quando pausado em uma linha de código que contém uma função, Step into next function call (Entrar na chamada da próxima função) pausa a primeira linha dentro da próxima função. |
|
Step out of current function (Sair da função atual) |
Quando pausado dentro de uma função, Step out of current function (Sair da função atual) executa o restante do código da função e pausa em seguida. |
|
Step (Avançar) |
Executa a linha de código atual e pausa em seguida. |
|
Deactivate/Activate breakpoints (Desativar/Ativar pontos de interrupção) |
Alterna todos os pontos de interrupção entre desativados e ativados, deixando os pontos de interrupção preparados. |
Pontos de interrupção condicionais de linha de código
Use um ponto de interrupção condicional de linha de código para pausar apenas quando a condição avalia como true.
- Clique com o botão direito do mouse no número da linha de
this.counter += operand(abaixo do ponto de interrupção que você adicionou) e selecione Add conditional breakpoint (Adicionar ponto de interrupção condicional).
- Insira
this.counter > 1e pressione Enter.
O ponto de interrupção condicional é indicado por um ponteiro laranja realçado com um ponto de interrogação (?) para mostrar que é condicional.
Passe o cursor do seu mouse sobrethis.counter. Seu valor é 0, portanto não atende à condição do ponto de interrupção condicional.
Para ver ou atualizar um ponto de interrupção condicional, clique com o botão direito do mouse no número da linha do ponto de interrupção e selecione Edit breakpoint (Editar ponto de interrupção).
- Clique em Resume script execution (Retomar execução do script)
. Observe que o código é executado sem parar no ponto de interrupção condicional.
- No aplicativo Solutions, clique em +1. A execução é pausada no primeiro ponto de interrupção. Agora, o valor de
this.counteré 1.
- Clique em Resume script execution (Retomar execução do script)
. Novamente, o código é executado sem parar no ponto de interrupção condicional.
- Clique em +1. A execução é pausada no primeiro ponto de interrupção. Agora, o valor de
this.counteré 2, portanto, o ponto de interrupção condicional deveria causar uma pausa na execução do código.
- Clique em Resume script execution (Retomar execução do script)
. A execução do script foi pausada no ponto de interrupção condicional dessa vez? 
Gerenciar pontos de interrupção
Quando você define vários pontos de interrupção em arquivos diferentes, pode ser difícil controlá-los. É aí que Breakpoints (Pontos de interrupção), o quinto item no painel JavaScript Debugging [(Depuração do JavaScript), é útil. Em Breakpoints (Pontos de interrupção), você pode desativar ou remover pontos de interrupção de linha de código.
Observe o ponto de interrupção (1) na função handleAdd em control.js. Ele também é exibido em Pontos de interrupção (2) juntamente com os pontos de interrupção de display.js.
Em Breakpoints (Pontos de interrupção), você pode desativar um único ponto de interrupção clicando na caixa de seleção do ponto. Clique com o botão direito do mouse em qualquer lugar em Breakpoints (Pontos de interrupção) para ver mais opções.
Quando um ponto de interrupção é desmarcado em Breakpoints (Pontos de interrupção), o destaque do ponteiro no número da linha do código muda para um azul mais claro, indicando que o ponto de interrupção está inativo.
Pontos de interrupção de ouvintes de eventos
Role para baixo no painel JavaScript Debugging (Depuração do JavaScript) para encontrar Event Listener Breakpoints (Pontos de interrupção de ouvintes de eventos). Aqui você pode definir pontos de interrupção para pausar o código do ouvinte de eventos que é executado depois que um evento é ativado. Existem muitas opções diferentes para escolher. Você pode pausar em uma categoria inteira de eventos ou pausar apenas em um tipo específico de evento.
Recursos
- Chrome DevTools: Referência da Depuração do JavaScript
- Chrome DevTools: Parar sua codificação com pontos de interrupção
- Blog de desenvolvedores do Salesforce: Aumentar suas habilidades em LWC - Parte 2