Come si visualizza / riproduce un file har del debugger di rete Chrome salvato con il contenuto?


117

Adoro il debugger di rete, detto questo, quali programmi sono disponibili che mi consentono di avanzare e tornare indietro attraverso più "har" in modo da poterli riprodurre? se le "hars" vengono salvate con il contenuto, il replay può gestire anche questo?

in questo momento ho appena letto nel textpad, ma se devo presentare una qualsiasi delle mie scoperte, un simpatico "suonatore di musica" potrebbe aiutare molto le persone non tecniche.


Finora, ho un visualizzatore "uno alla volta"
DefyGravity

9
Questa domanda su superuser è essenzialmente la stessa e ha risposte decenti: superuser.com/questions/360992/…
David Fraser

Risposte:


87

C'è un visualizzatore HAR sviluppato da Jan Odvarko che puoi usare. O usi la versione online su

Oppure scarica il codice sorgente da https://github.com/janodvarko/harviewer .

EDIT: Chrome 62 DevTools include la funzionalità di importazione HAR. https://developers.google.com/web/updates/2017/08/devtools-release-notes#har-imports


1
FWIW questo non sembra gestire il "contenuto" quando si utilizza "Salva come HAR con contenuto". Oltre a questo, è un discreto visualizzatore HAR.
Doktor J

non sono ancora riuscito a farlo funzionare su un'opzione "salva tutto come har" dal debugger di Chrome. Tuttavia, continuerò a ricontrollare con esso.
DefyGravity

l'ho appena fatto funzionare oggi da un sito Web piuttosto pesante. bella applicazione
DefyGravity

7
ATTENZIONE: Per quanto sia fantastico il suono del visualizzatore HAR "online", sarei un po 'preoccupato di ciò che quel server sta facendo con l'HAR - lo sta salvando? Analizzandolo? L'HAR può includere dati personali sensibili .. Personalmente non caricarei un HAR sul server di qualcun altro .. ora se mi fosse stato inviato da un cliente suppongo che sarebbe una storia diversa .. oh aspetta, no, non lo sarebbe.
niente è necessario il

@nothing non è necessario: il visualizzatore HAR viene eseguito solo nel browser, non è presente alcun componente lato server che "vede" il file HAR.
Paul Grime

56

Lo strumento "Rete" di Chrome Dev Tool ora ti consente di importare file HAR trascinandoli nella finestra.


Per trascinare il file HAR nella scheda di rete, la maggior parte degli strumenti di sviluppo sono aperti nello stesso dominio
ScottyG

Ottima idea, ma con un avvertimento Chrome non sembra gradire l'output dei formati di data da altri strumenti (+1 da me comunque)
Alex KeySmith

@ScottyG Ho appena provato a importare un file .har da un altro dominio e ha funzionato. Utilizzando la versione 73.0.3683.103
Raul Pinto

@RaulPinto Thanks! Sì, penso che questa sia una nuova funzionalità nella v73
ScottyG

2
La stessa cosa funziona in Firefox, indipendentemente dal dominio in cui ti trovi.
Brady Dowling

23

Ci sono un paio di strumenti online e offline su come farlo:

Ma quella che mi è piaciuta di più è un'estensione per il browser (provata in Chrome, spero che funzioni anche in altri browser). Dopo l'installazione, appare nelle tue app come visualizzatore HAR . Quindi puoi caricare il tuo file HAR e vedere qualcosa del genere:

inserisci qui la descrizione dell'immagine


2
L'analizzatore HAR è in grado di analizzare senza problemi file HAR molto più grandi rispetto al visualizzatore HAR.
Stephan

16

Il modo più affidabile per riprodurre il file har è utilizzare uno strumento gratuito come Fiddler , lo strumento è sempre gratuito e può essere scaricato rapidamente. I siti per il file har di apertura sono tutti buggati e non possono aprire file di grandi dimensioni. Fiddler è disponibile per tutte le piattaforme.

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

Vai al menu File -> Importa sessioni ...

Apri Fiddler

Seleziona l'opzione "HTTPArchive"

Seleziona l'opzione Archivia HTTP

Individua il tuo file HAR

inserisci qui la descrizione dell'immagine

Il file HAR si aprirà e si riprodurrà nella finestra del violinista.


1
Ho scoperto che esportarlo come file raw e quindi caricare il file html mi ha permesso di riprodurre i log della console in qualsiasi browser.
mikeytown2

Mi piace usare Fiddler perché posso riprodurre una particolare richiesta dal file har (cambiando i token ofc) per vedere i suoi effetti. Personalmente utilizzo Fiddler da molto tempo e poiché questo thread ha citato molti strumenti che funzionano tutti in casi diversi, alla fine ricade sul comfort personale.
Chibi Chakaravarthi

Anche a me questa risposta è piaciuta di più; Per file HAR molto grandi, Fiddler mi ha permesso di filtrare ed eliminare i messaggi in eccesso (ho anche usato Fiddler per un bel po 'di volte, quindi mi sono sentito più a
mio

8

Modifica: Harhar è ora open source. Ho aggiornato l'URL di seguito.

Se utilizzi un generatore di carico Avalanche, puoi utilizzare Harhar per riprodurre un file HAR con un carico molto elevato: https://acastaner.github.io/harhar/

Questo strumento gestisce il "contenuto" che utilizzi quando "Salva come HAR con contenuto".


2
So che sono passati alcuni mesi da quando l'OP ha chiesto, ma questa dovrebbe essere considerata la risposta giusta, poiché lo strumento menzionato può davvero "riprodurre" un file HAR. Suggerimento molto carino, @Astaar.
Charles Roberto Canato

È scritto interamente in C #. "Funziona su Windows e Linux (Mono)"
Trindaz

A parte essere totalmente d'accordo con Astaar e Charles, ne ho appena trovato un altro: github.com/Stuk/server-replay
quetzalcoatl

6

Chrome ora supporta il caricamento di file HAR. Apri Chrome, premi F12, fai clic sulla scheda Rete. Trascina e rilascia il file .har FATTO!



2
  1. Apri Chrome e fai clic su F12
  2. Fare clic su Rete
  3. Trascina e rilascia il file har nella scheda di rete di Chrome.

inserisci qui la descrizione dell'immagine


2

Se non arrivo in ritardo ...

Per Firefox, è possibile importare lo stesso file har dalla scheda Rete.Scheda Rete Firefox con file HAR di importazione



0

Apri il browser Chrome. fai clic con il pulsante destro del mouse in un punto qualsiasi di una pagina> ispeziona elementi> vai alla scheda di rete> trascina e rilascia il file .har Dovresti vedere i log.


0

Il drag and drop è la soluzione migliore. Sto solo mostrando un altro modo per importare facendo clic sull'icona di importazione HAR: inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.