Dicas de Depuração de JavaScript Parte I – Google Chrome e a Aba Network

Noah Sager

<\/HEAD>

Este post no blog é o primeiro de uma série de dicas e truques de depuração para ajudar você no seu caminho. <\/EM>

É uma selva lá fora. E goste ou não, é uma selva dentro do seu aplicativo também. Trabalhar com os bugs não é tão simples quanto passar lentamente pelas linhas de código; requer ferramentas dedicadas e curiosidade sincera. Na selva, a gorila mãe tem pouco mais em que confiar além da sua coragem e astúcia. Mas como desenvolvedor web, você tem uma variedade de ferramentas à sua disposição.  Hoje, vamos dar uma olhada na aba Network dentro das Developer Tools do Google Chrome.

Acessar as Developer Tools do Chrome é fácil usando as teclas de atalho (Control + Shift + I) ou navegando até o canto superior direito do navegador, clicando nas três linhas horizontais cinza, depois escolhendo "Tools", depois "Developer tools".<\/A>

Ao contrário da gorila mãe, as Developer Tools do Chrome se importam com você e seus aplicativos. Ela gosta de você. Ela acha que você é um desenvolvedor realmente bom. Mas você precisa fazer algum trabalho. É meio que como o Esri Support. Nós gostamos de você. Queremos ajudar você, e estaremos lá quando você der o primeiro passo.

Enquanto as developer tools estão abertas, você pode limpar o cache do navegador simplesmente clicando e segurando o botão de recarregar.  Esta ação apresenta três opções diferentes: Normal Reload<\/STRONG>, Hard Reload<\/STRONG>, e Empty Cache and Hard Reload<\/STRONG>. Essas opções ajudam a garantir que as mudanças no seu código sejam refletidas no navegador. Caso contrário, o aplicativo pode carregar o código antigo do cache do navegador. Quando estou me sentindo para baixo, alguns Hard Reloads sempre resolvem. Se estiver perto do fim do dia, talvez queira esvaziar o cache primeiro. <\/A>

Agora que você limpou o cache e recarregou seu aplicativo, podemos continuar.  Como as developer tools em outros navegadores principais, como Firebug<\/A>, e ferramentas independentes como Fiddler<\/A>, a aba Network no Chrome registra requisições individuais geradas pela aba atualmente aberta no navegador.  Normalmente, uma variedade de recursos são carregados quando uma página é atualizada e requisições adicionais são executadas enquanto o usuário interage com a página.

A aba Network é minha favorita pessoalmente. Eu sempre abro essa aba antes de rodar qualquer aplicação de teste. Aqui podemos focar em inspecionar o tráfego web para descobrir como o aplicativo interage com serviços online. Se houver um serviço de impressão no aplicativo, você pode pegar o webmap como JSON na aba network, e comparar seus parâmetros contra a REST API para ver se o JSON é válido. Você também pode ver todos os recursos que o aplicativo está consumindo, e onde esses recursos estão localizados.

Se algo deu visivelmente errado no aplicativo, as primeiras coisas a procurar são requisições que falharam completamente.  Os erros mais comuns são 403, indicando que você não tem permissão para acessar o recurso, e 404, que significa que o recurso não pode ser encontrado.  Na minha própria experiência, erros 404 são mais frequentemente causados por um erro de digitação que eu introduzi quando escrevi a localização de um serviço, porque eu escrevo código como uma gorila mãe.<\/P>

<\/A><\/P>

Esta captura de tela mostra a aba Network aberta com um erro 404 (Not Found) no tráfego da rede referente a um arquivo .css ausente no servidor chamado localhost (eu coloquei o .css na pasta errada)<\/EM><\/P>
Nesta edição, aprendemos como acessar e usar a aba Network dentro das Developer Tools do Chrome para revelar as requisições individuais lançadas por um aplicativo, e seu sucesso ou falha. Esta informação pode facilitar muito a depuração de um aplicativo quando há pouca outra informação de erro disponível ao indicar ao desenvolvedor o que está ocorrendo nos bastidores, e em quais áreas do código focar. Isso conclui a parte um 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 na aba Network com um exemplo do mundo real. Feliz depuração!<\/P><\/BODY><\/HTML>

AndresCastillo

Noah Sager‌

It was amazing meeting you at the UC!

You are even cooler than your blogs already make you look.

I hope you don't mind.......I want to share a blog I wrote since it 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