Chrome DevTools Network

devtools network

Chrome DevTools to zestaw narzędzi wbudowanych w przeglądarkę Google Chrome służących do wspomagania pracy nad stroną.

Narzędzia te pozwalają m.in. na podgląd ruchu sieciowego w zakresie danej strony, analizowanie czasu pobierania/przesyłania zasobów, debugowanie kodu JavaScript, debugowanie i prototypowanie CSS, a także sprawdzanie responsywności strony na urządzeniach mobilnych.

W tym artykule chcę Wam przedstawić możliwości jednego z narzędzi, które dotyczy analizy ruchu sieciowego – zakładka „Network”.

Najłatwiejszym sposobem otwarcia Chrome DevTools jest otwarcie dowolnej strony w przeglądarce Chrome, a następnie kliknięcie prawym przyciskiem myszy na dowolnym jej elemencie i wybranie opcji „Zbadaj”. Następnie należy przejść do zakładki „Network”, którą będziemy omawiać.

Chrome DevTools - Network

Wskazówka: Jeśli najpierw załadowałeś stronę, a następnie otworzyłeś zakładkę „Network”, najprawdopodobniej nie zobaczysz żadnego rezultatu. Musisz wówczas przeładować stronę ponownie, ponieważ narzędzie zapisuje requesty tylko wtedy, kiedy jest otwarte.

Analiza ruchu sieciowego

Zacznijmy przegląd narzędzia od sprawdzenia co się dzieje po otwarciu strony https://google.com

Na liście pojawiają się requesty, kody odpowiedzi, typy i rozmiary otrzymanych danych, itp. 

Możemy podejrzeć szczegóły każdego requestu, takie jak: URL, metoda http, headers, parametry, body, możemy również zweryfikować otrzymaną odpowiedź – response data, response code. 

Na dole panelu widzimy m. in. liczbę requestów, które wykonały się przy załadowaniu strony.

Liczba requestów

Identyfikacja problemu

Co daje nam możliwość sprawdzenia response data? Wyobraźmy sobie sytuację, że element źle się wyświetla na UI lub w ogóle nie widzimy czegoś, co powinno zostać wyświetlone. Takie sytuacje to niemal codzienność w pracy testera aplikacji webowych. Przy użyciu tego narzędzia możemy sprawdzić, jaka odpowiedź przychodzi z backendu. Jeśli dane są takie jakich oczekiwaliśmy, najprawdopodobniej problemu należy szukać po stronie front-endu. 

Pamięć podręczna

Część zawartości naszej strony może być zapisana w pamięci podręcznej przeglądarki i nie jest ona pobierana z serwera za każdym razem, gdy przeładowujemy stronę. 

Na przykładzie strony google.com widać to m.in. dla obrazków – w kolumnie „size” wyświetla się from memory cache, a w kolumnie „time” 0 ms.

Jeśli testujemy, bądź debugujemy stronę, takie zachowanie przeglądarki może być niepożądane. Możemy wówczas użyć funkcji „disable cache”, by chwilowo wyłączyć odczytywanie danych z cache.

Sortowanie

Wyświetlone requesty posortowane są chronologicznie. Każdą z kolumn możemy sortować rosnąco i malejąco, np. po czasie pobierania lub rozmiarze, a jeśli chcemy wrócić do chronologicznej listy należy posortować po kolumnie „Waterfall”.

Stop recording

Domyślnie włączone jest zapisywanie wszystkich requestów. Zatem jeśli ponownie przeładujemy stronę lub klikniemy coś, co wywoła żądanie do serwera, nasz request pojawi się na dole listy. Zdarza się, że strona cyklicznie wykonuje jakieś requesty i nie potrzebujemy już ich wyświetlać, bo na liście mamy wszystko, czego potrzebujemy do analizy. Wtedy możemy wyłączyć zapisywanie klikając w przycisk „Stop recording”.

Nagrywanie ruchu

Dodatkowe kolumny

Część kolumn jest domyślnie ukryta. Żeby je wyświetlić należy kliknąć prawym przyciskiem myszy w pasek z nazwami kolumn i wybrać z listy tę, którą chcemy dodać.

Chrome DevTools - dodatkowe kolumny

Symulowanie szybkości łącza

Często komputery, na których tworzymy i testujemy aplikacje mają znacznie lepsze połączenie niż użytkownik docelowy, zwłaszcza na urządzeniu mobilnym.

Chrome Chrome DevTools daje nam możliwość symulowania wolnego połączenia, co może być szczególnie przydatne, gdy chcemy przetestować jak nasza strona będzie się ładowała na urządzeniach z wolniejszym łączem. W tym celu należy kliknąć w przycisk „Online”, a następnie wybrać wartość z listy, bądź użyć własnej (Custom > Add).

Chrome DevTools Throtling - testowanie zachowania strony

Filtrowanie

Chrome DevTools umożliwia filtrowanie requestów na różne sposoby. Służy do tego input „Filter”

Filtrowanie requestów

Jeśli chcemy odfiltrować tylko obrazki o rozszerzeniu .png należy wpisać w w/w polu frazę „png”. Zostaną wówczas wyświetlone tylko rekordy zawierające „png” w adresie URL.

Filtrować możemy również po domenie, kodzie odpowiedzi i wielu innych parametrach.

Przykład filtrowania po domenie:

Filtrowanie po domenie

Przykład filtrowania po kodzie odpowiedzi:

Ffiltrowanie po kodzie odpowiedzi

Blokowanie URL

Jeśli mamy podejrzenia, że jakiś request znacznie spowalnia czas ładowania naszej strony możemy go zablokować i sprawdzić jak strona wczyta się bez niego. W tym celu należy kliknąć w niego prawym przyciskiem myszy i wybrać opcję „block request URL”. Możemy również zablokować wszystkie requesty z danej domeny poprzez wybranie opcji „block request domain”. Zablokowane requesty zostaną wyświetlone na czerwono.

blokowanie url - testowanie oprogramowania

W kolejnych wpisach będziemy omawiać pozostałe zakładki tego rozbudowanego narzędzia jakim jest Chrome DevTools. Do zobaczenia!