0 Compartilhamentos 350 Views

Como ver os erros do meu site? (parte 3)

15 de junho de 2015

Você já percebeu que o navegador Google Chrome é uma excelente ferramenta para a identificação de erros em sites, não é? O navegador da gigante de Mountain View possui ferramentas extremamente fáceis de se usar, que podem ser uma verdadeira “mão na roda” para desenvolvedores que precisam “debugar” o código de sites e aplicativos.

Continuando nossa série de artigos a respeito, vamos hoje dar uma olhada em mais duas abas das devtools do Chrome: “Timeline” e “Profiles”. Os artigos anteriores você pode encontrar através dos links abaixo:

Desenvolvimento

A aba “Timeline”

Esta aba funciona como uma espécie de “gravador” de toda a atividade do website. Funciona mais ou menos assim: pressione o botão “gravar” (record) e o Google Chrome começa então a gravar toda a atividade, conforme ela acontece.

Pressione o botão novamente (stop – parar), e uma análise é exibida em tela, informando como o tempo é gasto durante o carregamento da(s) página(s). Além disso, o relatório também exibe todos os eventos, incluindo carregamento do Javascript, scripts, uso de memória, cálculo de estilos e renderização.

Google Chrome - Ferramentas Desenvolvedores - Aba Timeline

A aba “Timeline” pode ajudar você a identificar quaisquer problemas de performance em seu site ou aplicação. Nela, também é exibida uma prática timeline (linha do tempo), de maneira um tanto quanto similar à exibida na aba “Network”. Aqui, você também pode arrastar os sliders para focar em um período de tempo específico (todas as informações do relatório são então ajustadas, automaticamente).

Vale também lembrar que toda a atividade capturada e exibida através da aba “Timeline” pode ser exportada, no formato JSON: basta clicar em qualquer ponto com o botão direito do mouse e então escolher a opção “Save timeline data”.

Observe que assim que você clica em qualquer evento exibido na linha do tempo, detalhes adicionais sobre o mesmo são exibidos na seção “Summary” (sumário). E praticamente todas as áreas da aba “Timeline” são repletas de elementos interativos, que respondem conforme o desenvolvedor neles clica, exibindo então diversas informações úteis e valiosas na seção “Summary”.

Além disso, marcando o checkbox “Memory”, por exemplo, forçamos a exibição de um gráfico em linhas que também é, por si só, interativo: todos os seus pontos são clicáveis e resultam em novos dados na seção “Summary”.

Google Chrome - Ferramentas Desenvolvedores - Aba Timeline

A aba “Profiles”

Temos aqui outro “gravador”. A aba “Profiles” permite que o desenvolvedor analise o uso de memória e o tempo de execução do website ou aplicativo em questão.

Temos inclusive alguns perfis já pré-configurados, como o “Collect Javascript CPU Profile”, que mostra como o tempo de execução é gasto em funções de Javascript da página, e o “Take Heap Snapshot”, que exibe a distribuição de memória de acordo com o Javascript e os DOMs (Document Object Model) relacionados.

Google Chrome - Ferramentas Desenvolvedores - Aba Profiles

A aba “Profiles” é interligada, de certa forma, à aba “Sources”: podemos clicar em qualquer uma das funções exibidas nos snapshots para visualizarmos rapidamente o código relacionado.

Vale também lembrar que é possível capturar diversos snapshots através da aba “Profiles”. Posteriormente, alternando o modo de visualização “Summary” para “Comparison” (Comparação), podemos compará-los.

Snapshots também podem ser armazenados, se clicarmos em cada um deles com o botão direito do mouse e escolhermos a opção “Save” (posteriormente, eles podem ser recarregados para novas análises e comparações).

E não se esqueça:

  • Para obter acesso às ferramentas para desenvolvedores do Google Chrome, abra o navegador, clique no menu Chrome e vá em “Mais ferramentas” ==> “Ferramentas do desenvolvedor” (ou então tecle F12);
  • Você também pode alternar o modo de visualização da janela. Ela pode permanecer na lateral direita ou então na parte inferior do navegador (ou também totalmente destacada). Use o penúltimo botão da barra de ferramentas para alternar (Botão).

E até a próxima!

Carregando...

Você pode se interessar

Como a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
5 visualizações
Artigos
5 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020

Maxine é uma solução de aprendizado de máquina na nuvem que reduz a quantidade de dados transmitidos, deduzindo e gerando as partes que faltam.

Promoções de Jogos do Final de Semana (20/11)
Notícias
12 visualizações
Notícias
12 visualizações

Promoções de Jogos do Final de Semana (20/11)

Carlos L. A. da Silva - 20 de novembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Top 10 soft skills para desenvolvedores
Artigos
13 visualizações
Artigos
13 visualizações

Top 10 soft skills para desenvolvedores

Carlos L. A. da Silva - 20 de novembro de 2020

Não basta saber programar bem... confira o que as empresas também estão procurando em um profissional de desenvolvimento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como detectar um bloqueador de anúncios usando uma linha de Javascript
Dicas
17 visualizações
17 visualizações
Promoções de Jogos do Final de Semana (13/11)
Notícias
23 visualizações
23 visualizações

Promoções de Jogos do Final de Semana (13/11)

Carlos L. A. da Silva - 13 de novembro de 2020
Como extrair imagens de um documento Word/LibreOffice com inteligência
Dicas
20 visualizações
20 visualizações
Promoções de Jogos do Final de Semana (06/11)
Notícias
27 visualizações
27 visualizações

Promoções de Jogos do Final de Semana (06/11)

Carlos L. A. da Silva - 6 de novembro de 2020