Nos últimos tempos temos dado algum destaque ao fantástico kit de ferramentas DevTools que o Google Chrome oferece… sim o seu também tem, claro. Como deve ter visto, já demos a conhecer há dias um pequeno truque que nos pode ajudar a gerir o Instagram sem sair do computador, depois voltámos a usar a mesma ferramenta para tirar um screenshot total de uma página com o Chrome e agora vamos voltar a mexer dentro desta ferramenta.
Hoje vamos mostrar como usar a DevTools do Google Chrome para capturar imagens do ecrã durante o carregamento de uma página Web.
DevTools em termos genéricos…
Esta suite de produtividade que existe dentro do Google Chrome, a DevTools, como já referimos antes, é um conjunto de ferramentas de criação e depuração da Web incorporada no navegador da Google. A DevTools oferece aos programadores web um acesso profundo aos meandros do navegador e à sua aplicação Web.
Na imagem em baixo, poderá ver, no menu, várias secções que trazem ao utilizador inúmeros recursos, uns simples e outros mais complexo, mas todos com a sua utilidade. Poderá ver que hoje o nosso alvo será, nesse menu, a opção Network.
Temos saltado de uma área para outra até porque nesta altura a nossa intenção é ambientar o utilizador a este tipo de ferramenta, isto porque a sua apresentação é complexa e nada atraente, o que muitas vezes (ou quase sempre) afasta o utilizador de conhecer mais sobre a DevTools.
Capturar imagens do ecrã durante o carregamento de página
Por vezes queremos uma imagem específica quando uma página web está a carregar. São imagens que o servidor vai largando à medida que a nossa máquina importa esse conteúdo. A DevTools tem uma ferramenta para fazer essa captura no momento de download da página.
No menu existe a opção Network e é aí que pode capturar imagens do ecrã durante um carregamento de página. Este recurso é conhecido como Filmstrip.
Clique no ícone de câmara para ativar o Filmstrip. Quando o ícone está cinza, o Filmstrip está desativado 
Medir tempos de carregamento de recursos
Este é um recurso que está inserido da solução da ferramenta DevTool que permite medir o desempenho da rede do seu site, recorrendo ao painel Network. Este painel regista informações sobre cada operação de rede numa página, incluindo dados de sincronização detalhados, cabeçalhos de solicitação e resposta HTTP, cookies e muito mais.
Visão geral do painel Network
O painel Network é composto de cinco secções:
- Controls. Use estas opções para controlar como o painel Network é exibido e funciona.
- Filters. Use estas opções para controlar quais os recursos exibidos na Requests Table. Dica: mantenha pressionado Cmd (Mac) ou Ctrl (Windows/Linux) e clique num filtro para selecionar diversos filtros ao mesmo tempo.
- Overview. Este gráfico mostra uma linha do tempo de quando os recursos foram recuperados. Se vir diversas barras empilhadas no sentido vertical, significa que esses recursos foram recuperados simultaneamente.
- Requests Table. Esta tabela lista todos os recursos que foram recuperados. Por predefinição, esta tabela é ordenada de forma cronológica, com os recursos mais antigos no início. Clicar no nome de um recurso exibe mais informações sobre o mesmo. Dica: clique com o botão direito em qualquer título da tabela, exceto Timeline, para adicionar ou remover colunas de informação.
- Summary. Instantaneamente, esta secção mostra o total de solicitações, a quantidade de dados transferida e os tempos de carregamento.
A Requests Table mostra as colunas a seguir por predefinição. Pode adicionar e remover colunas.
- Name. O nome do recurso.
- Status. O código do status HTTP.
- Type. O tipo MIME do recurso solicitado.
- Initiator. O objeto ou processo que iniciou a solicitação. Este pode ter um dos seguintes valores: . Parser. O analisador de HTML do Chrome iniciou a solicitação. . Redirect. Um redirecionamento de HTTP iniciou a solicitação. . Script. Um script iniciou a solicitação. . Other. Algum outro processo ou ação iniciou a solicitação, como o usuário navegando a uma página por um link ou inserindo um URL na barra de endereço.
- Size. O tamanho combinado dos cabeçalhos da resposta (normalmente com algumas centenas de bytes), além do corpo da resposta, conforme fornecido pelo servidor.
- Time. A duração total, do início da solicitação ao recebimento do byte final na resposta.
- Timeline. A coluna Timeline exibe uma cascata visual de todas as solicitações de rede. Clicar no título desta coluna revela um menu de campos de classificação adicionais.
Em resumo…
Hoje voltamos ao assunto DevTool e com mais informação relevante. Estamos na fase de aproximação à ferramenta, fazer ações mais intimistas e simples para tornar o processo “sempre-a-mão” Futuramente iremos aprofundar outros menus, outras ações com vista a dar a conhecer algo poderoso escondido no seu browser.