Monitorar a execução do JavaScript

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Rastrear variáveis JavaScript.
  
• Manipular variáveis JavaScript.
  

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Se você acostuma solucionar problemas de JavaScript, então provavelmente está familiarizado com o comando console.log(). Esse amigo interno informa o que está acontecendo enquanto o JavaScript está sendo executado. Ele mostra o que as variáveis ​​estão fazendo em diferentes estados no script. E se eu dissesse que há uma maneira mais rápida e limpa de obter essas informações, ou seja, um amigo ainda melhor? O DevTools Watch é esse novo amigo. Vamos nos aprofundar um pouco mais.

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 39:54 minutos, caso você queira retroceder e ver o início da etapa novamente.)

Usar o recurso Watch

Agora você já sabe como definir pontos de interrupção e ver o fluxo do código e os valores das variáveis. No entanto, há uma maneira melhor de monitorar essas variáveis ​​e seus valores em certos momentos durante a execução do código. Use Watch no painel JavaScript Debugging (Depuração do JavaScript).

Faça o aplicativo Solutions contar até dois

Toda vez que você clica em +1, o aplicativo Solutions adiciona um (1) à contagem. Agora, use Control Option (Opção de controle) para fazer a contagem adicionar dois.

1. Atualize a página no navegador. Seus pontos de interrupção ainda devem ser exibidos.
   
2. Se já não estiver aberto, abra display.js no DevTools.
   
3. Encontre a função handleAugmentorChange(event).
   
4. No painel JavaScript Debugging (Depuração do JavaScript), expanda Watch e clique na expressão watch Add (Adicionar) .
   
5. Insira event.target.value e pressione Enter.
   O recurso Watch exibe: event.target.value:<not available>

Vamos definir um ponto de interrupção e acionar o evento.

1. Clique no número da linha de this.augmentor = event.target.value; para definir um ponto de interrupção.
   
2. No aplicativo Solutions, em Control Option (Opção de controle), selecione 2. Watch agora mostra que o valor de event.target.value é “2”.
   Como estamos pausados ​​no manipulador de eventos handleAugmentorChange, event.target.value está ativo e Watch mostra o valor.
   

3. No painel JavaScript Debugging (Depuração do JavaScript), adicione this.augmentor ao recurso Watch.
   Observe que o valor de this.augmentor ainda é 1. Essa linha de código ainda não foi executada.
   

4. Clique em Step over (Passar) para executar essa linha e avançar para a próxima linha.
   Agora a execução é pausada após a linha com o ponto de interrupção e Watch mostra:
   event.target.value:"2"
this.augmentor:"2"

5. Clique em Resume script execution (Retomar execução do script) . Observe que os botões Controls (Controles) do aplicativo Solutions mudaram para -2 e +2.
   
   

Observe o aplicativo Solutions contar até dois

No aplicativo Solutions, em Display (Exibir), a Contagem atual é 0. Observe como as variáveis ​​mudam no código quando você clica no botão +2 no aplicativo Solutions.

1. Clique em +2. O ponto de interrupção pausa a execução do código na primeira linha da função handleIncrement.
   Agora, Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
   

2. Adicione operand e this.counter ao Watch. O operand é <não disponível> e this.counter é zero.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:0
   

3. Clique em Resume script execution (Retomar execução do script) .
   Espere… o ponto de interrupção a seguir não foi pausado para que pudéssemos ver o valor da alteração de operand. No aplicativo Solutions, a Contagem agora é 2. Vamos fazer isso de novo. Ele deve pausar dessa vez.
   
4. Clique em +2.
   Agora, o Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"02"

5. Clique em Resume script execution (Retomar execução do script) . Quando o script pausa novamente,
   o Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
operand:"2"
this.counter:"02"

6. Clique em Resume script execution (Retomar execução do script) . Você conseguiu! Mas... observe o valor Count (Contagem) no aplicativo Solutions.
   
   Por que a contagem é 22 em vez de 4? Parece que o aplicativo Solutions está concatenando texto em vez de adicionar números. É aqui que o recurso Watch tem a oportunidade de brilhar.
   

O recurso Watch monitora expressões e propriedades

Vamos verificar o tipo de dados da variável que o botão +2 altera.

1. Adicione typeof operand ao Watch. O typeof operand é indefinido.
   
2. Clique em +2.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:<not available>
   

3. Clique em Resume script execution (Retomar execução do script) .
   O Watch mostra:
   event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:"string"
   Pronto! A variável operand é definida como uma sequência de caracteres.
   

Você pode ver o poder que o recurso Watch traz para a solução de problemas. A seguir, vamos localizar o problema e encontrar uma maneira de corrigi-lo.

Console

Para investigar esse problema mais detalhadamente, use o DevTools Console.

1. Atualize a página no navegador. Seus pontos de interrupção e itens monitorados ainda devem ser exibidos.
   
2. No aplicativo Solutions, clique em +1.
   
3. Em Watch, verifique os valores de this.augmentor e this.counter.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
   Tanto this.counter quanto this.augmentor parecem ser números, mas vamos confirmar isso.
   

4. Adicione typeof this.counter e typeof this.augmentor ao Watch.
   Sim, o Watch mostra que eles realmente são números.
   event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
typeof this.counter:"number"
typeof this.augmentor:"number"
   

5. Clique em Step over (Passar) para avançar para a próxima linha.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:1
operand:1
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
   Todos são números. Por enquanto, tudo bem.
   

6. Clique em Step over (Passar) para avançar para a próxima linha.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
   

OK, this.counter mudou de 0 para 1. Vamos fazer isso de novo e ver o que acontece.

1. Clique em Resume script execution (Retomar execução do script) . No aplicativo Solutions, a Contagem é 1.
   
2. No aplicativo Solutions, clique em +1.
   
3. Percorra o código e observe que os números ainda são números e que this.counter agora é 2, como deveria ser.
   Tudo parece estar funcionando conforme o esperado.
   

Tente usar a Opção de controle e veja o que isso faz com o valor

1. Clique em Resume script execution (Retomar execução do script) . No aplicativo Solutions, a Contagem agora é 2.
   
2. No aplicativo Solutions, em Control Option (Opção de controle), selecione 2. O script é executado até alcançar um ponto de interrupção na função handleAugmentorChange.
   O script pausou na função, mas a linha de código do ponto de interrupção ainda não foi executada. Observe que event.target.value parece uma sequência de caracteres.
   

3. Adicione typeof event.target.value ao Watch.
   event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"string"
   Como era de se esperar, é uma sequência de caracteres. Isso confirma que o aplicativo Solutions (Soluções) está concatenando texto em vez de estar adicionando números.
   

Vamos usar o Console para manipular valores e ver o que acontece.

1. Clique na guia Console.
   
2. No console, insira event.target.value e pressione Enter.
   O console retorna ‘2’. Observe as aspas no 2 para denotar uma sequência de caracteres. Como você ainda está pausado no ponto de interrupção, pode usar as variáveis no estado atual.
   

3. Insira this.augmentor = event.target.value e pressione Enter. Novamente, o console retorna ‘2’. Não é o que deveria ser. De alguma forma, o código alterou this.augmentor de um número para uma sequência de caracteres. Vamos ver se conseguimos encontrar uma solução.
   
4. Insira this.augmentor = 1 e pressione Enter para transformá-lo novamente em um número.
   
5. Insira this.augmentor = parseInt(event.target.value) e pressione Enter. O valor muda para 2 e continua a ser um número. Agora já sabemos como corrigir o código.
   
6. Insira this.augmentor = 1 para restaurar o valor original.
   
7. Retorne o painel Sources (Fontes).
   
8. Clique em Step over (Passar) para avançar para a linha seguinte e verificar o valor de this.augmentor.
   O Watch mostra:
   event.target.value:"2"
this.augmentor:"2"
operand:<not available>
this.counter:2
typeof operand:"undefined"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"string”
   É uma sequência de caracteres.
   

Pausar essa unidade

Role até o final da unidade e conclua o desafio prático. Quando terminar de verificar o desafio, volte aqui para ver a solução no seu Trailhead Playground.

Retomar essa unidade

Agora vamos confirmar se o aplicativo Solutions se comporta conforme o esperado.

1. Atualize a página no navegador.
   
2. No aplicativo Solutions, em Control Option (Opção de controle), selecione 2. O script é executado até chegar ao ponto de interrupção na função handleAugmentorChange.
   

3. Clique em Step over (Passar) para avançar para a próxima linha.
   
4. Verifique o valor de this.augmentor.
   
   Ainda é um número! Excelente.
   

5. Clique em Resume script execution (Retomar execução do script) .
   
6. No aplicativo Solutions, clique em +2.
   
7. Clique em Step over (Passar) para avançar para a próxima linha.
   O Watch mostra:
   event.target.value:undefined
this.augmentor:2
operand:2
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"undefined"
8. Clique em Step over (Passar) .
   O Watch mostra:
   event.target.value:undefined
this.augmentor:2
operand:2
this.counter:2
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"undefined"
9. Clique em Resume script execution (Retomar execução do script) . No aplicativo Solutions, a Contagem é 2.
   
10. No aplicativo Solutions, clique em +2.
    
11. Clique em Resume script execution (Retomar execução do script) . O script é executado até chegar ao ponto de interrupção condicional e pausar. Observe que this.counter ainda é 2.
    
12. Clique em Resume script execution (Retomar execução do script) e observe que a Contagem no aplicativo Solutions é 4, como deveria ser. Pronto!
    

E aí, gostou do DevTools, seu novo melhor amigo? Esse módulo apenas descreve superficialmente como o DevTools pode ajudar você a solucionar problemas dos componentes Web do Lightning. Não deixe de conferir os recursos para obter mais ideias.

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