Como faço para visualizar / reproduzir um arquivo har do depurador de rede do Chrome salvo com o conteúdo?

117

Adoro o depurador de rede. Dito isso, quais programas existem que me permitem avançar e retroceder em vários 'hars' para que eu possa reproduzi-los? se os 'hars' forem salvos com conteúdo, o replay pode lidar com isso também?

agora eu acabei de ler no textpad, mas se eu tiver que apresentar qualquer uma das minhas descobertas, um bom 'tocador de har' poderia ajudar muito as pessoas não técnicas.

Desafiar a gravidade
fonte
até agora, tenho um visualizador "um de cada vez"
DefyGravity
9
Esta pergunta no superusuário é essencialmente a mesma e tem respostas decentes: superuser.com/questions/360992/…
David Fraser

Respostas:

87

Existe um HAR Viewer desenvolvido por Jan Odvarko que você pode usar. Você também pode usar a versão online em

Ou baixe o código-fonte em https://github.com/janodvarko/harviewer .

EDIT: Chrome 62 DevTools inclui funcionalidade de importação HAR. https://developers.google.com/web/updates/2017/08/devtools-release-notes#har-imports

Nizar
fonte
1
FWIW isso não parece lidar com o "conteúdo" quando você usa "Salvar como HAR com conteúdo". Fora isso, é um visualizador HAR decente.
Doktor J
ainda não o fiz funcionar em uma opção 'salvar tudo como har' do depurador do Chrome. No entanto, continuarei checando com ele.
DefyGravity
acabei de fazê-lo funcionar hoje a partir de um site bem pesado. aplicativo legal
DefyGravity
7
AVISO: Por melhor que o visualizador HAR "online" pareça, eu ficaria um pouco preocupado com o que aquele servidor está fazendo com o HAR - ele está salvando-o? Analisando isso? HAR pode incluir dados pessoais confidenciais .. Eu pessoalmente não carregaria um HAR para o servidor de outra pessoa .. agora, se fosse enviado para mim por um cliente, suponho que seria uma história diferente .. oh espere, não seria.
nada é necessário
@nothingisnecessary - HAR Viewer é executado apenas no navegador, não há nenhum componente do lado do servidor que 'veja' o arquivo HAR.
Paul Grime
56

A ferramenta "Rede" da Chrome Dev Tool agora permite importar arquivos HAR arrastando e soltando na janela.

Xchai
fonte
Para arrastar o arquivo HAR para a guia rede, você deve ter as ferramentas de desenvolvimento abertas no mesmo domínio
ScottyG
Ótima ideia, mas com uma ressalva, o cromo não parece gostar da saída de formatos de data de outras ferramentas (+1 de mim mesmo)
Alex KeySmith
@ScottyG Tentei importar um arquivo .har de outro domínio e funcionou. Usando a versão 73.0.3683.103
Raul Pinto
@RaulPinto Obrigado! Sim, acho que este é um novo recurso na v73
ScottyG de
2
A mesma coisa funciona no Firefox, também independentemente do domínio em que você estiver.
Brady Dowling
23

Existem algumas ferramentas online e offline para fazer isso:

Mas o que eu mais gostei, é uma extensão de navegador (tentei no Chrome, espero que funcione em outros navegadores). Após a instalação, ele aparece em seus aplicativos como visualizador HAR . Em seguida, você pode fazer upload de seu arquivo HAR e ver algo assim:

insira a descrição da imagem aqui

Salvador Dalí
fonte
2
O analisador HAR é capaz de analisar arquivos HAR muito maiores do que o visualizador HAR.
Stephan de
16

A maneira mais confiável de reproduzir o arquivo har é usando uma ferramenta gratuita como o Fiddler , a ferramenta é sempre gratuita e pode ser baixada rapidamente. Os sites para o arquivo har de abertura são todos cheios de erros e não podem abrir arquivos grandes. O Fiddler está disponível para todas as plataformas.

https://www.telerik.com/download/fiddler

Vá para o Menu Arquivo -> Importar Sessões ...

Abra o Fiddler

Selecione a opção "HTTPArchive"

Selecione a opção Http Archieve

Navegue até o seu arquivo HAR

insira a descrição da imagem aqui

O arquivo HAR será aberto e reproduzido na janela do Fiddler.

Chibi Chakaravarthi
fonte
1
Descobri que exportá-lo como arquivos brutos e, em seguida, carregar o arquivo html me permitiu reproduzir os logs do console em qualquer navegador.
mikeytown2
Gosto de usar o fiddler porque posso reproduzir uma solicitação específica do arquivo har (alterando tokens ofc) para ver seus efeitos. Pessoalmente, uso o Fiddler há muito tempo e, como este tópico cita várias ferramentas que funcionam em diferentes casos, ele finalmente se resume ao conforto pessoal.
Chibi Chakaravarthi
Eu também gostei mais dessa resposta; Para arquivos HAR muito grandes, o Fiddler me permitiu filtrar, bem como excluir mensagens em excesso (eu também tenho usado o Fiddler por algumas vezes, por isso me senti mais confortável com suas habilidades, incluindo repetição)
HidekiAI
8

Edit: Harhar agora é código aberto. Eu atualizei o URL abaixo.

Se você usar um gerador de carga Avalanche, poderá usar Harhar para reproduzir um arquivo HAR com carga muito alta: https://acastaner.github.io/harhar/

Esta ferramenta lida com o "conteúdo" que você usa ao "Salvar como HAR com conteúdo".

Astaar
fonte
2
Sei que alguns meses se passaram desde que o OP perguntou, mas esta deve ser considerada a resposta certa, já que a ferramenta mencionada pode realmente "reproduzir" um arquivo HAR. Muito boa sugestão, @Astaar.
Charles Roberto Canato
Foi escrito inteiramente em C #. "Funciona em Windows e Linux (Mono)"
Trindaz
Além de concordar totalmente com Astaar e Charles, acabei de encontrar outro: github.com/Stuk/server-replay
quetzalcoatl
6

O Chrome agora suporta o carregamento de arquivos HAR. Abra o Chrome, pressione F12 e clique na guia Rede. Arraste e solte o arquivo .har FEITO!

Chibi Chakaravarthi
fonte
4

Hardiff.com é uma ferramenta muito útil. Ele permite que você compare um ou mais .hararquivos.

Zander
fonte
2
  1. Abra o Chrome e clique em F12
  2. Clique na rede
  3. Arraste e solte o arquivo har na guia de rede do Chrome.

insira a descrição da imagem aqui

S Krishna
fonte
2

Se eu não estou atrasado ....

Para o Firefox, é possível importar o mesmo arquivo har da guia Rede.Guia Rede do Firefox com arquivo HAR de importação

Sanjay Maurya
fonte
1

A importação de HAR funciona perfeitamente no Firefox: Abra Desenvolvedor da Web -> Guia Rede -> HAR -> Importar ... (canto superior direito da ferramenta de desenvolvedor da web)

Opção de importação HAR

Lalitanand Dandge
fonte
0

Abra o navegador Chrome. clique com o botão direito em qualquer lugar em uma página> inspecionar elementos> vá para a guia rede> arraste e solte o arquivo .har. Você deve ver os logs.

Arjun Thakur
fonte
0

Arrastar e soltar é a melhor solução. Estou apenas mostrando outra maneira de importar clicando no ícone de importação HAR: insira a descrição da imagem aqui

Barani r
fonte