0 Compartilhamentos 318 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 desativar temporariamente sua conta do Facebook
Dicas
9 visualizações
Dicas
9 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

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

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020

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

O que você precisa saber sobre o Pix
Artigos
19 visualizações
Artigos
19 visualizações

O que você precisa saber sobre o Pix

Carlos L. A. da Silva - 16 de setembro de 2020

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como centralizar no CSS de forma definitiva
Dicas
21 visualizações
21 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
24 visualizações
24 visualizações

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

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
22 visualizações
22 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
33 visualizações
33 visualizações

Home Booth? Você quase trabalhou em um desses…

Carlos L. A. da Silva - 5 de setembro de 2020