0 Compartilhamentos 298 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

Promoções de Jogos do Final de Semana (07/08)
Notícias
6 visualizações
Notícias
6 visualizações

Promoções de Jogos do Final de Semana (07/08)

Carlos L. A. da Silva - 7 de agosto de 2020

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

Bloqueando robôs do seu site
Artigos
11 visualizações
Artigos
11 visualizações

Bloqueando robôs do seu site

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

Nem todo robô que visita seu site é bonzinho como o do Google... aprenda a se defender!

Como encriptar seu dispositivo móvel
Dicas
16 visualizações
Dicas
16 visualizações

Como encriptar seu dispositivo móvel

Carlos L. A. da Silva - 4 de agosto de 2020

Privacidade nunca é demais e ela pode estar na palma da sua mão, sem dificuldades. Aprenda a encriptar dispositivos Android, iOS e até Windows Phone.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (31/07)
Notícias
22 visualizações
22 visualizações

Promoções de Jogos do Final de Semana (31/07)

Carlos L. A. da Silva - 31 de julho de 2020
Quem está lucrando com os aplicativos de entrega? Ninguém
Artigos
26 visualizações1
26 visualizações1

Quem está lucrando com os aplicativos de entrega? Ninguém

Carlos L. A. da Silva - 28 de julho de 2020
Como ditar um documento (Office, Google Docs, OpenOffice)
Dicas
24 visualizações
24 visualizações

Como ditar um documento (Office, Google Docs, OpenOffice)

Carlos L. A. da Silva - 27 de julho de 2020