Jak utworzyć plik HAR z Google Chrome, Firefox i przeanalizować go?

Czym jest plik HAR i dlaczego jest tak ważny?

Plik HAR, czyli HTTP Archive, to niezwykle przydatne narzędzie w diagnostyce problemów związanych z siecią i wydajnością. Szczególnie przydaje się, gdy mamy do czynienia z długim czasem ładowania strony lub limitami czasu podczas wykonywania pewnych zadań online.

Specjaliści od wsparcia technicznego w firmach i na platformach internetowych korzystają z plików HAR, aby zlokalizować i naprawić problemy z wydajnością. Mowa tu o opóźnieniach w ładowaniu, nieprawidłowym wyświetlaniu stron czy błędach, które mogą wynikać z tych problemów.

Co kryje się w pliku HAR?

Plik HAR to nic innego jak archiwum w formacie JSON, przechowujące historię aktywności sieciowej zarejestrowaną przez przeglądarkę internetową. Śledzi on całą komunikację między przeglądarką a witryną, czyli żądania i odpowiedzi internetowe.

Rejestruje każdy element załadowany przez przeglądarkę oraz czas potrzebny na jego załadowanie. W istocie, są to tekstowe logi połączeń HTTP między klientem a serwerem.

Rozszerzenie tych plików to właśnie .har.

Dlaczego warto generować plik HAR?

Gdy użytkownik zgłasza problem, firma lub zespół wsparcia technicznego może poprosić o przesłanie pliku HAR w celu dogłębnej analizy.

Pliki te dostarczają mnóstwo informacji o żądaniach i odpowiedziach HTTP, co jest bardzo pomocne w debugowaniu. Zawierają dane o ustawieniach przeglądarki, plikach cookie, czasie potrzebnym na uzyskanie odpowiedzi, czasie ładowania konkretnych obrazów, czasie potrzebnym na połączenie z serwerem oraz czasie wysyłania żądania i otrzymywania odpowiedzi.

Jak przebiega proces generowania pliku HAR?

• Najpierw wchodzimy na stronę, na której występują problemy i rozpoczynamy rejestrowanie całej aktywności sieciowej.
• Następnie odtwarzamy problem, wykonując kroki, które go wywołują.
• Po odtworzeniu problemu kończymy przechwytywanie i zapisujemy plik HAR.
• Na koniec, analizujemy plik samodzielnie lub wysyłamy go do wsparcia technicznego, które zajmie się diagnozą i rozwiązaniem problemu z wydajnością strony.

Instrukcja generowania plików HAR w różnych przeglądarkach

Proces tworzenia plików HAR różni się w zależności od używanej przeglądarki.

Chrome

W każdej przeglądarce zakładka Sieć w Narzędziach dla programistów umożliwia rejestrowanie sesji HTTP.

• W Chrome przechodzimy na stronę z problemem.
• Uruchamiamy Narzędzia dla programistów (Menu > Więcej narzędzi > Narzędzia programistyczne) i wybieramy zakładkę Sieć.
• Upewniamy się, że okrągły przycisk w lewym górnym rogu jest czerwony. Jeśli jest szary, klikamy go dwukrotnie, aby rozpocząć rejestrowanie.
• Włączamy opcję „Zachowaj dziennik”, aby zarejestrować wszystkie żądania i odpowiedzi.
• Aby wyeksportować plik HAR, klikamy ikonę strzałki w dół w zakładce Sieć.
• Zapisujemy plik na dysku.

Firefox

• W prawym górnym rogu okna przeglądarki klikamy menu Firefox (trzy poziome linie).
• Wybieramy Więcej narzędzi > Narzędzia Web Developera > Sieć.
• W ustawieniach włączamy opcję utrwalania dzienników.
• Podczas przechwytywania odświeżamy stronę i odtwarzamy problem.
• Po udanej replikacji klikamy prawym przyciskiem myszy dowolny wiersz w panelu aktywności i wybieramy „Zapisz wszystko jako HAR”.
• Jeśli do diagnostyki potrzebny jest również dziennik konsoli, przechodzimy do zakładki Konsola, zaznaczamy wszystko i kopiujemy zawartość do pliku tekstowego, który przekazujemy zespołowi wsparcia.

Microsoft Edge

• Klikamy ikonę z trzema kropkami w prawym górnym rogu i wybieramy Więcej narzędzi > Narzędzia programistyczne.
• Przechodzimy do zakładki Sieć i rozpoczynamy profilowanie sesji.
• Otwieramy stronę i odtwarzamy problem.
• Na koniec wybieramy „Eksportuj jako HAR” i zapisujemy plik.

Internet Explorer

• Otwieramy przeglądarkę i przechodzimy na stronę z problemem.
• Klikamy ikonę koła zębatego w prawym górnym rogu.
• Wybieramy Narzędzia dla programistów > zakładka Sieć.
• Podczas przechwytywania odświeżamy stronę i odtwarzamy problem.
• Po udanej replikacji klikamy ikonę „Eksportuj jako HAR” (ikonka dyskietki).

Narzędzie do śledzenia HTTP

W przypadku Chrome, Internet Explorera i Edge można także skorzystać z HTTPWatch, czyli specjalnego sniffera HTTP w przeglądarce.

• Najpierw pobieramy i instalujemy HTTPwatch.
• Uruchamiamy przechwytywanie w HTTPwatch, ładujemy stronę z problemem i zatrzymujemy przechwytywanie, gdy problem się powtórzy.
• Otrzymany plik powinien być zapisany w formacie HAR.

Strony do analizy plików HAR

Poniższe narzędzia ułatwiają wizualizację i analizę logów komunikacji HTTP (plików HAR).

• Analizator Google HAR – Wybieramy plik HAR do analizy. Analiza pojawi się automatycznie po wczytaniu pliku. Możemy filtrować dane według kodu statusu HTTP.
• Softwareshard.com – Bezpłatna aplikacja webowa, która pokazuje wykres kaskadowy wszystkich żądań i pozwala na dostęp do konkretnego żądania. Wklejamy log HAR do pola tekstowego i klikamy Podgląd lub przeciągamy i upuszczamy plik na stronę.
• Witryna24x7 – Kolejne darmowe narzędzie online do wizualizacji plików HAR. Przeglądamy plik lub wklejamy jego zawartość w pole.

Podsumowanie

Plik HAR to dokument JSON, który zawiera historię żądań internetowych i odpowiedzi. Może on zawierać wrażliwe dane:

• Nagłówki żądań i odpowiedzi
• Treść żądań i odpowiedzi
• Tokeny uwierzytelniające, pliki cookie, tokeny sesji, hasła oraz dane API

Upewnijmy się, że z plików HAR usunęliśmy wszelkie poufne dane przed przesłaniem ich zespołowi wsparcia. Szczególnie w przypadku, gdy plik HAR zawiera interakcje ze stronami trzecimi, istnieje ryzyko wycieku poufnych informacji.

Mam nadzieję, że ten artykuł pomógł zrozumieć, jak korzystać z plików HAR i jak je generować w różnych przeglądarkach.

Zachęcam także do zapoznania się z artykułem o rozwiązywaniu problemów z opóźnieniami sieciowymi za pomocą Wireshark.

Podobał Ci się artykuł? Podziel się nim z innymi!