Dicas de Depuração JavaScript Parte III – Ferramentas Avançadas do Google Chrome Developer

Noah Sager

<\/HEAD>Esta postagem no blog é a terceira 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 <\/A><\/STRONG><\/EM> e também JavaScript Debugging Tips Part II<\/A> <\/STRONG><\/EM> para nossos segmentos anteriores. <\/EM>

Nos dois posts anteriores de Dicas de Depuração de JavaScript no blog de Suporte da Esri, analisamos a Aba Network e a Aba Console como parte das Google Chrome Developer Tools<\/A><\/STRONG>. Embora a maioria dos navegadores modernos tenha alguma forma de ferramentas para desenvolvedores, aqui usamos o Chrome para nossos exemplos.

Nosso objetivo para esta terceira postagem no blog da série é apresentar dicas e truques mais avançados para permitir que você depure e solucione problemas do seu código JavaScript de forma mais eficaz. Especificamente, focaremos em três áreas: mensagens aprimoradas para o console, melhores formas de definir breakpoints usando condições especificadas em tempo de execução, e uma maneira mais eficiente de avançar pelos breakpoints na aba Sources com um método chamado blackboxing.Parte 1: Console.table<\/STRONG><\/SPAN>

Console.log é nossa função principal de depuração, mas a saída dessa função pode ser um pouco difícil de ler (especialmente ao visualizar muitos dados). Uma forma de melhorar nossas mensagens no console log e visualizar os dados mais facilmente é exibir uma lista de objetos como uma tabela, o que é feito usando a função console.table <\/STRONG>. Esta função recebe um argumento obrigatório, que deve ser um array ou um objeto, e um parâmetro adicional opcional. Cada elemento do array é uma linha na tabela.

Vamos dar uma olhada no exemplo Console Table<\/A><\/STRONG>.

1. Abra as Ferramentas do Desenvolvedor do Chrome usando as teclas de atalho (Windows: Control + Shift + I, e Mac: Command + Option + I), ou navegando até o painel superior direito do navegador, clicando nos três pontos verticais cinza e escolhendo "Mais ferramentas" > "Ferramentas do desenvolvedor".

2. Selecione a aba console.

3. Clique em "Perform Query" na aplicação de exemplo. Isso executa uma tarefa de consulta para visualizar todos os condados em Connecticut. O código usa o console.table<\/STRONG> para imprimir os resultados em uma tabela conforme mostrado abaixo.<\/A>

console.table<\/P><\/DIV>

Cada linha na tabela mostra todos os atributos para um condado específico. Em seguida, usamos o console.log<\/STRONG> para comparar console.log e console.table. Esta função imprimirá uma linha com um array de objetos.

<\/A>

console.log<\/P><\/DIV>

Ao expandirmos o array, podemos ver os objetos em uma lista.

<\/A>

console.log expandido<\/P><\/DIV>

Para visualizar os atributos, devemos expandir os objetos na lista.

<\/A>

console.log expandido com atributos<\/P><\/DIV>Embora possamos acessar os atributos de uma feição ao usar console.log, podemos visualizar todos os atributos para todas as feições ao mesmo tempo usando console.table<\/>! A imagem abaixo mostra ambas as funções na janela do console.

<\/>

console.table &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&

sempre retorna verdadeiro, então devemos usar <\/EM> "==".

<\/A>

Expressão de Ponto de Interrupção<\/P><\/DIV>

5. Se inserirmos "test" para o "Contact:" e clicarmos em "Update incident info", o ponto de interrupção será alcançado e a aplicação pausará.

<\/A>

Condição Atendida<\/P><\/DIV>

Esses pontos de interrupção condicionais podem ser úteis para testar quando você quer garantir que os dados sejam enviados corretamente ao servidor, ou para tratamento de erros quando deseja que a aplicação pause para que você possa inspecionar o(s) objeto(s) de interesse ao invés de deixar seu código de tratamento de erros assumir.Parte 3: Blackboxing<\/STRONG><\/SPAN>

Embora definir pontos de interrupção seja uma ótima maneira de fazer amigos e percorrer seu código, esse processo pode ocasionalmente te levar para fora do arquivo de interesse e para outro arquivo fonte ou para uma biblioteca JavaScript de terceiros.

Por exemplo, vamos olhar um exemplo.

1. Abra o

exemplo Query SceneLayerView<\/A> <\/STRONG> para acompanhar (isso é similar ao exemplo encontrado em developers.arcgis.com<\/A>).

2. Abra as Ferramentas do Desenvolvedor do Chrome, selecione a aba Sources e clique com o botão esquerdo na linha 49 para definir um ponto de interrupção.

3. Atualize a página para que o depurador pause na linha 49. A partir daqui, aparece uma mensagem "Paused in debugger" (Pausado no depurador) (ao lado de um botão "Play" e um botão "Step Over"). Veja abaixo a captura de tela.

<\/A>

Pausado na Linha 49<\/P><\/DIV>

4. Se você clicar no botão "Step Over" cerca de cinco vezes, você sai do arquivo principal .html e entra no arquivo init.js da ArcGIS API for JavaScript. Você pode explorar o arquivo init.js, mas queremos focar no código que escrevemos. Clique no botão "Play" para voltar em segurança.

<\/A>

Depurador no arquivo init.js<\/P><\/DIV>

Entra o blackboxing para salvar o dia. Blackboxing é um método para excluir arquivos e bibliotecas do depurador, para que seu foco permaneça nos seus arquivos de interesse. Vamos ver como podemos blackboxar a biblioteca ArcGIS API for JavaScript para que possamos apenas avançar pelo arquivo principal de interesse.

1. Com as Ferramentas do Desenvolvedor abertas, clique nos três pontos verticais no painel mais à direita da janela e selecione Configurações.

<\/A>

Configurações das Ferramentas do Desenvolvedor<\/P><\/DIV>

Configurações das Ferramentas do Desenvolvedor

2. No lado esquerdo da janela, clique em "Blackboxing" para abrir os "Framework Blackbox Patterns."Depuração com o depurador JavaScript (2017)Arquivos Fonte JavaScript em BlackboxJunte-se a nós na próxima vez enquanto continuamos a explorar cada vez mais as Ferramentas de Desenvolvedor e aprendemos algumas lições valiosas. Feliz depuração!</span>Artemis F. e Noah S. - Suporte Esri 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