Jak vytvořit soubor HAR z Google Chrome, Firefox a analyzovat jej?

Photo of author

By etechblogcz

HAR soubory se běžně využívají k diagnostice a řešení problémů se síťovým připojením a celkovým výkonem webových aplikací. To zahrnuje situace, kdy se webové stránky načítají pomalu, nebo když dochází k časovým limitům při provádění určitých úkonů online.

Téměř všechny týmy technické podpory, ať už interní nebo externí, využívají HAR soubory k identifikaci a následnému řešení problémů s výkonem. Mezi tyto problémy patří zdlouhavé načítání, nesprávné vykreslování stránek či chybové hlášky způsobené těmito nedokonalostmi.

Co je to HAR soubor?

HTTP Archive, běžně známý jako HAR soubor, je archivní soubor v JSON formátu. Obsahuje podrobný záznam veškeré síťové aktivity, kterou zaznamenal váš webový prohlížeč. Sleduje veškerou komunikaci, jako jsou webové požadavky a odpovědi mezi prohlížečem a navštívenou webovou stránkou.

HAR soubor zaznamenává každý jednotlivý zdroj, který byl prohlížečem načten, a také čas, který načtení každého zdroje trvalo. Tyto soubory obsahují textové protokoly komunikace HTTP mezi klientem (prohlížečem) a serverem.

Soubory tohoto typu jsou identifikovány příponou .har.

Proč vytvářet HAR soubor?

Tým zákaznické nebo technické podpory může požádat o zaslání HAR souboru v případě, že uživatel nahlásí problém s webovou aplikací a potřebuje pomoc s jeho vyřešením.

HAR soubory poskytují bohatou škálu informací o HTTP požadavcích a odpovědích mezi klientem a serverem. Tyto informace jsou neocenitelné při ladění, protože zahrnují data o nastavení prohlížeče, cookies, době trvání získávání dat z odpovědí, době načítání konkrétních obrázků na stránce, době potřebné pro navázání spojení se serverem a celkové době trvání odeslání požadavku a přijetí odpovědi.

Postup získání HAR souboru

  • Nejprve otevřete webovou stránku, kde se vyskytuje problém, a zahajte zaznamenávání všech webových požadavků a interakcí.
  • Opakováním kroků, které vedou k problému, jej znovu vyvolejte.
  • Po dokončení zachycení uložte HAR soubor.
  • Tento soubor buď sami analyzujte, nebo jej odešlete týmu technické podpory, který se zaměří na řešení problémů s výkonem a správným vykreslováním stránek.

Jak vytvořit HAR soubor v různých prohlížečích?

Postup generování HAR souborů pro zachycení HTTP relací se liší v závislosti na používaném prohlížeči.

Chrome

K zaznamenávání HTTP relací lze využít kartu „Síť“ v nástrojích pro vývojáře, které jsou součástí každého moderního prohlížeče.

  • V prohlížeči Chrome otevřete webovou stránku, kde se problém projevuje.
  • Nástroje pro vývojáře otevřete buď přes nabídku (Menu > Další nástroje > Nástroje pro vývojáře), nebo pomocí klávesové zkratky. V nově otevřeném panelu zvolte kartu „Síť“.
  • Na kartě „Síť“ se ujistěte, že kulaté tlačítko v levém horním rohu je červené. Pokud je šedé, kliknutím na něj zahajte záznam interakcí.
  • Zapněte volbu „Zachovat protokol“, aby se zaznamenaly všechny webové požadavky a odpovědi.
  • Pro export HAR souboru klikněte na tlačítko se šipkou dolů přímo na kartě „Síť“.
  • Uložte HAR soubor do vašeho počítače.

Firefox

  • V pravém horním rohu okna prohlížeče klikněte na nabídku Firefoxu (ikona tří vodorovných čar).
  • Z rozbalovací nabídky zvolte „Další nástroje > Webový vývojář > Síť“.
  • Klikněte na tlačítko nastavení (ozubené kolečko) a zapněte možnost „Zachovat protokoly“.
  • Během zachytávání obnovte stránku a znovu zopakujte kroky, které vedou k problému.
  • Pokud jste problém úspěšně reprodukovali, klikněte pravým tlačítkem myši na jakýkoliv řádek v panelu aktivit a zvolte „Uložit vše jako HAR“.
  • V případě, že je pro řešení potíží vyžadován i log z konzole, přejděte na kartu „Konzola“, označte veškerý obsah (například pomocí Ctrl+A) a zkopírujte jej do textového souboru, který pak poskytnete podpoře.

Microsoft Edge

  • Otevřete Nástroje pro vývojáře kliknutím na ikonu tří teček (…) v pravém horním rohu okna prohlížeče a vyberte „Další nástroje > Nástroje pro vývojáře“.
  • Přejděte na kartu „Síť“ a spusťte profilování relace.
  • Navštivte webovou stránku a postupujte podle kroků, které vedou k problému.
  • Uložte HAR soubor výběrem možnosti „Exportovat jako HAR“.

Internet Explorer

  • Otevřete Internet Explorer a přejděte na webovou stránku, kde se vyskytuje problém.
  • Klikněte na symbol ozubeného kola v pravém horním rohu okna prohlížeče.
  • Zvolte „Nástroje pro vývojáře > karta Síť“.
  • Během zachycování obnovte stránku a znovu zopakujte kroky, které vedou k problému.
  • Po úspěšném zopakování problému klikněte na ikonu „Exportovat jako HAR“ (ikonka diskety).

Nástroj HTTP Watch

Pro prohlížeče Google Chrome, Internet Explorer a Microsoft Edge je možné využít také HTTPWatch (HTTP sniffer). Umožňuje zachycení webových požadavků a odpovědí.

  • Nejprve si stáhněte a nainstalujte nástroj HTTPwatch.
  • Spusťte zachycování pomocí HTTPwatch, načtěte problémovou stránku a zastavte zachytávání, jakmile problém replikujete.
  • Zachycení by mělo být automaticky uloženo ve formátu HAR.

Webové stránky pro analýzu HAR souborů

Následující nástroje jsou jednoduché a efektivní pro vizualizaci a analýzu HAR souborů (protokolů HTTP komunikace mezi klientem a serverem).

  • Google HAR analyzátor – Zvolte soubor kliknutím na tlačítko „Vybrat soubor“ a vyberte HAR soubor, který chcete prozkoumat. Po výběru souboru se automaticky zobrazí analýza. Umožňuje filtrování dle stavových kódů HTTP.
  • Softwareishard.com – Bezplatný online nástroj, který zobrazí vodopádový graf všech požadavků a umožňuje vám přejít ke konkrétnímu požadavku. Stačí vložit obsah HAR logu do textového pole a stisknout tlačítko Náhled. Alternativně můžete soubor přetáhnout kamkoli na stránku a začít analyzovat.
  • Stránky 24×7 – Další bezplatný online nástroj pro vizualizaci HTTP Archive souboru. Můžete vybrat soubor z počítače, nebo vložit jeho obsah do vstupního pole.

Závěr

Pokud otevřete HAR soubor v textovém editoru, zjistíte, že se jedná o JSON dokument obsahující webové požadavky a související odpovědi. Může obsahovat potenciálně citlivé informace, jako jsou:

  • Hlavičky požadavků a odpovědí
  • Obsah požadavků a odpovědí
  • Ověřovací tokeny, cookies, tokeny relací, hesla a API klíče

Ujistěte se, že jste odstranili veškeré citlivé informace z HAR souborů před jejich odesláním týmu podpory k analýze. Zvláště pokud technická podpora vyžaduje HAR soubor obsahující interakce s třetími stranami, je riziko odhalení citlivých údajů ještě vyšší.

Doufám, že tento článek vám pomohl lépe porozumět analýze HAR souborů a způsobu jejich vytváření v různých webových prohlížečích.

Možná vás bude zajímat i článek o odstraňování problémů s latencí sítě pomocí nástroje Wireshark.

Líbil se vám článek? Co takhle ho sdílet s ostatními?