Dicas de Depuração de JavaScript Parte II – Google Chrome e a Aba Console

Noah Sager

<\/HEAD>Esta postagem no blog é a 2ª de uma série de dicas e truques para depuração de JavaScript para ajudar você no seu caminho. Veja JavaScript Debugging Tips Part I 11 Google Chrome and the Network Tab<\/A><\/STRONG><\/EM> para o nosso primeiro segmento.<\/EM>

A parte mais agradável de qualquer tarefa de programação é logo no início, quando você se senta com um monte de ferramentas e recursos e começa a trabalhar em pedaços brutos de código. A parte mais difícil vem quando você tenta lançar o aplicativo, apenas para ver aquele código bem escrito se desfazer em várias noites tarde olhando para a tela do computador. No entanto, nem tudo está perdido, pois temos uma excelente recomendação para você, que é o assunto deste blog: a aba Console dentro das Developer Tools do seu navegador favorito.

Se você está se sentindo chateado ou emocional, a aba Console é a escolha perfeita para você. Talvez alguém da sua família esteja passando por um momento difícil e precise de um pouco de animação. Considere a aba Console do Google Chrome (opções gluten free estão disponíveis). Usuários que gostam da aba Console também podem gostar do ArcGIS API for JavaScript.<\/A>

Eu obviamente não entendo homographs<\/P><\/DIV>

Como escrevemos na Parte I, acessar as Developer Tools do Chrome é facilmente feito usando teclas de atalho (Control + Shift + I) ou navegando até o canto superior direito do navegador, clicando no menu hamburger e escolhendo "More Tools", depois "Developer tools".

Uma vez que as Developer Tools estão abertas (outras Developer Tools estão disponíveis em outros navegadores), várias abas ficam acessíveis para você. Aqui vamos focar no Console. Se você quiser abrir diretamente a aba Console nas Developer Tools do Chrome, use este atalho de teclado: Control + Shift + J (o "J" significa jocular). Para mais dicas legais, por favor confira a documentação oficial do Google sobre

Chrome DevTools: Using the console<\/A><\/STRONG>.

O Console é usado para dois propósitos: 1) exibir informações registradas do JavaScript de um aplicativo (geralmente durante o desenvolvimento do aplicativo), e 2) interrogar objetos e executar JavaScript interativamente. Neste blog, vamos olhar ambos os tipos de exemplos e elaborar algumas dicas e truques adicionais que usamos no Suporte Técnico.

A primeira coisa que podemos fazer é adicionar algumas declarações "console.log" dentro do nosso aplicativo. Vamos pegar um exemplo modificado, hospedado no GitHub, que pode ser encontrado aqui: Sample Console Application<\/A><\/STRONG>. Sinta-se à vontade para acompanhar em casa.

Nas linhas 60-62, e novamente na linha 66, adicionamos algumas dessas declarações "console.log" para exibir informações sobre nossa Feature Layer. Nosso caso de uso é que estamos criando um aplicativo web de mapeamento e durante nossos testes queremos garantir que os dados que estamos consumindo do ArcGIS Online são os dados corretos para exibir no mapa. Para isso, imprimimos algumas informações selecionadas sobre a Feature Layer: o título da camada e a URL da camada. Como eu não sei a sintaxe para a propriedade URL, uso "URL" e "url" como visto abaixo.

<\/A>

Declaraconsole.log em JavaScript<\/P><\/DIV>

Aqui está uma captura de tela da saída das declarações "console.log". Vemos as informações relevantes que esperávamos. Além disso, observe que a saída para "featureLayer.URL" é "undefined". Isso ocorre porque itens no console são sensíveis a maiúsculas e minúsculas. A propriedade válida é "featureLater.url", e propriedades inválidas não geram erro, retornando em vez disso um resultado undefined. Isso pode ser algo complicado de capturar, mas mais adiante neste blog veremos algumas dicas para lidar com esse tipo de problema.

<\/A>

Saída do Console JavaScript das declarações console.log<\/P><\/DIV>

Com o Console ainda aberto, vamos tentar inserir os mesmos valores das propriedades do código:

featureLayer.title<\/STRONG>featureLayer.URL<\/STRONG>featureLayer.url<\/STRONG><\/P>
Observe que todas<\EM> essas propriedades agora retornam um erro, ao invés de um valor real (ou mesmo "undefined"). Isso ocorre porque as variáveis locais não estão mais no escopo após o app ser inicializado, então nem mesmo o objeto "featureLayer" pode ser reconhecido. Aqui está uma captura de tela da saída das novas declarações no console.

<\A>

Saída do Console JavaScript após o carregamento do App<\P> pausado, podemos voltar para a aba Console e tentar interrogar as propriedades do featureLayer novamente. Aqui vemos que temos o escopo adequado para a variável e podemos ver a saída:

Pausado no depurador 2

Legal, né?

Vamos olhar outra opção, semelhante ao “debugger”. De volta à aba Sources, note os números das linhas à esquerda do código. Se clicarmos com o botão esquerdo em um número de linha, podemos definir um breakpoint, que terá o mesmo efeito exato de escrever “debugger” no código. Clique com o botão esquerdo nas linhas 56, 62 e 66 na mesma aplicação, depois atualize a aplicação. Breakpoint 1

A aplicação pausa imediatamente no primeiro breakpoint. Agora, podemos voltar para a aba Console e novamente inspecionar variáveis e propriedades à vontade. Não só isso, clicando na seta curva à direita do botão Play no topo da tela, podemos avançar passo a passo pela aplicação e assistir a emoção ao ver como o código é executado passo a passo. Ou, podemos clicar no botão Play no topo da tela e deixar a aplicação rodar até a conclusão ou até o próximo breakpoint. Breakpoint 2

E outro clique no botão Play nos leva ao próximo breakpoint. Breakpoint 3

O objetivo deste blog é destacar a utilidade e funcionalidade do Console, mas também queremos apontar outro uso de definir breakpoints aqui. Breakpoints permitem ao desenvolvedor a capacidade de ver a ordem em que o código assíncrono é executado, como as funções são executadas e quais partes são puladas ou falham. Para mais informações sobre dicas de depuração com aplicações JavaScript, aqui estão alguns recursos adicionais dos últimos anos:Depuração Avançada com JavaScript (2009)Depurando JavaScript com Breakpoints do Chrome DevTools (2016)Dicas de Depuração JavaScript Parte I (2014)
Nesta parte, aprendemos como acessar e usar a aba Console dentro das ferramentas de desenvolvedor do Chrome para revelar as propriedades e valores de variáveis e objetos em nosso código JavaScript. Esta informação pode facilitar muito a depuração e codificação de uma aplicação web. Isso conclui a parte dois de uma série em várias partes sobre Dicas de Depuração JavaScript. Junte-se a nós na próxima vez quando mergulharmos ainda mais fundo em algumas Ferramentas de Desenvolvedor, e todos nós receberemos aumentos. Feliz depuração!Noah S. e John G. - Serviços de Suporte SDK

AndresCastillo

Here is a blog I wrote that is along the same lines of teaching techniques on how to approach web development:

How to customize a web app using JavaScript, the DOM, Chrome DevTools, and Chrome's debugger
Blog Post created by Andres Castillo on Jul 24, 2019
https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger