Contents

Introduction

Formato HTTP ARchive

Inferência

Coletar registros de HAR

Google Chrome

Firefox

Internet Explorer

Introduction

Este documento descreve o processo para coletar registros HTTP ARchive format (HAR) para restringir e solucionar problemas relacionados à GUI do lado do cliente. Ele também fala sobre por que eles são úteis e como coletar o arquivo de diferentes navegadores.

Formato HTTP ARchive

Por que HAR?

Quando você entra em contato ou usa o Software como Serviço (SaaS) pela Internet, vários problemas podem surgir quando você acessa os serviços. Para restringir e isolar o problema, você precisa entender a interação do lado do cliente e do lado do servidor/serviço. Os registros HAR fornecem a interação do lado do cliente. Os registros HAR são um conjunto único de capturas que registram e controlam a interação de um navegador com um site. Esse conjunto de registros nos dá uma boa compreensão do que está acontecendo no lado do cliente e isso, por sua vez, acelera o processo de solução de problemas.

Vamos procurar registros HAR em alguns cenários típicos

- Solução de problemas de renderização de página da Web (como se uma parte da página da Web não estivesse sendo carregada, a formatação da página estivesse incorreta ou estivesse faltando parte da página da Web)

- Solução de problemas de desempenho (como uma página que leva muito tempo para carregar ou expirar quando um evento é acionado)

O que há no HAR e como ele é útil?

Arquivos HAR armazenam informações no formato JSON; isso facilita a visualização de dados com auxílio visual. Os arquivos HAR contêm informações de temporização de vários componentes. Com base no Understanding Resource Timing do Google aqui estão alguns temporizadores presentes no registro.

Parado/Bloqueio: O tempo que a solicitação ficou esperando para ser enviada. Ele pode estar esperando por qualquer um dos motivos descritos para o enfileiramento. Além disso, esse tempo inclui qualquer tempo gasto na negociação de proxy.

Negociação de proxy: Tempo gasto negociando com uma conexão de servidor proxy.

Pesquisa de DNS: Tempo gasto executando a pesquisa de DNS. Cada novo domínio em uma página requer uma viagem de ida e volta completa para fazer a pesquisa de DNS.

Conexão inicial/Conexão: Tempo necessário para estabelecer uma conexão, incluindo handshakes/repetições TCP e negociar um SSL.

SSL: Tempo gasto na conclusão de um handshake SSL.

Solicitação enviada/envio: Tempo gasto emitindo a solicitação de rede. Geralmente uma fração de milissegundo.

Aguardando (TTFB): O tempo gasto aguardando a resposta inicial, também conhecido como Tempo até o primeiro byte. Esse tempo captura a latência de um round trip para o servidor, além do tempo gasto esperando o servidor fornecer a resposta.

Download/Download de conteúdo: Tempo gasto no recebimento dos dados de resposta.

Inferência

Essas informações de temporização dos registros HAR podem ajudar a restringir a parte da rede que deve ser vista primeiro.

- Se notar um atraso na rede, você saberá qual aspecto da rede deve ser direcionado para solucionar problemas.

- Se esse for um problema de renderização de página da Web, você poderá consultar a seção Download/Download de conteúdo para ver a solicitação e a resposta que retornou para cada conteúdo e ver se há erros ou problemas presentes.

Um arquivo de log HAR está ativado no Bloco de Notas. Aqui está um pequeno trecho de como ele se parece:

Aqui está uma prévia de um arquivo carregado no software da ferramenta online:

A partir desta imagem, você pode ter uma ideia correta de onde você passa muito tempo e qual componente leva mais tempo.

Aqui está uma prévia de um arquivo carregado na ferramenta online G-Suite:

Aqui você pode ver as informações do temporizador em cada uma das solicitações.

Coletar registros de HAR

Ele ajuda muito na solução de problemas quando você pode coletar um conjunto de registros HAR em funcionamento e não em funcionamento para comparação. Para uma página não funcional, é melhor coletar vários arquivos HAR para que você obtenha um tempo médio para todos os componentes e possa ver se um componente similar tem problemas consistentemente.

Antes de coletar um HAR, é recomendável usar uma única sessão de navegação privada para forçar o navegador a fazer o download de todas as informações e não usar nenhum dado em cache já presente.

O processo para qualquer navegador é:

1. Abra a opção do desenvolvedor.

2. Assegure-se de que você esteja em opções de rede e pronto para capturar interações.

3. Recrie o problema com a página da Web.

4. Salve a captura.

5. Envie o arquivo salvo para análise posterior.

Este é o processo para coletar registros de HRA desses navegadores:

Google Chrome

1. Pressione F12 e a guia do desenvolvedor será aberta conforme mostrado na imagem.

2. Clique na guia Rede conforme mostrado na imagem.

3. Selecione o log Preservar como mostrado na imagem.

4. Observe o botão de registro na parte superior esquerda da guia Rede. Se a cor estiver vermelha, significa que a captura foi iniciada. Se o botão estiver preto, clique no círculo preto para mudar de cor para vermelho e iniciar a atividade de gravação no navegador.

5. Recrie o problema enquanto a captura está em execução, como mostrado na imagem.

6. Depois que o problema for recriado, clique com o botão direito do mouse em qualquer linha do painel de atividade e selecione Salvar tudo como árabe com conteúdo, como mostrado na imagem.

7. Salve o arquivo e envie-o para análise.

Firefox

1. Pressione F12 e abra a guia do desenvolvedor. A janela Ferramentas do desenvolvedor é aberta como um painel encaixado na lateral ou na parte inferior do Firefox.

2. Clique na guia Rede conforme mostrado na imagem.

3. Verifique se os registros de persistência estão marcados.

4. Recrie o problema.

5. Depois que o problema tiver sido recriado, clique com o botão direito do mouse no painel de atividades e selecione Save all as HAR (Salvar tudo como a imagem).

6. Salve o arquivo e envie-o para análise.

Internet Explorer

1. Acerta F12.

2. Verifique se você está na guia rede.

3. Certifique-se de que "Iniciar sessão de perfil" esteja acinzentado (este deve ser o estado padrão - implica que as capturas estejam em execução).

4. Recrie o problema.

5. Depois que o problema tiver sido recriado, clique no ícone Salvar para salvar os registros.

6. Salve o arquivo e envie-o para análise.