Desenvolvimento

Troubleshooting Tips: Google Chrome + HAR Content

Olá Pessoal, tudo bem?

O post de hoje é para aqueles que precisam fazer um troubleshooting client-side remoto facilmente, porém sem um acesso remoto ou ferramentas de debug instaladas localmente 🙂

Sim, podemos utilizar um arquivo HAR para nos ajudar!

Mas que raios é isso?

Um arquivo “.har” (Http ARchive) nada mais é que um formato padrão de mercado para armazenar dados de logs de acesso em browsers em formato JSON, contendo informações de DNS, headers, tempo de resposta, http status code, entre outros. Em resumo – tudo o que voce já consegue monitorar na aba ‘network’ do seu developer tools.

Como usar?

Easy peasy! Entre no Chrome > Developer Tools > Network > clique com o botão direto do mouse em qualquer um dos elementos carregados na página > Save as HAR with content

Pronto! Agora já temos um arquivo “.har”

Podemos compartilhar com qualquer pessoa com um browser Google Chrome versão 62+ e já podemos analisar o arquivo diretamente no developer tools:

Para mais novidades a v62: https://developers.google.com/web/updates/2017/08/devtools-release-notes

Outros navegadores como Mozilla Firefox e Internet Explorer também suportam a exportação do arquivo “.har”, no entanto ainda não oferecem uma opção de visualização (import), o que faz com que seja necessária a utilização de ferramentas terceiros ou plugins adicionais instalados:

Internet Explorer 11

 

Mozilla Firefox 56

 

Espero que tenham gostado e happy troubleshooting 😀

#praSempreChape

Deixe uma resposta