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ć.
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.
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”.
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ć.
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).
Filtrowanie
Chrome DevTools umożliwia filtrowanie requestów na różne sposoby. Służy do tego input „Filter”
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:
Przykład filtrowania 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.
W kolejnych wpisach będziemy omawiać pozostałe zakładki tego rozbudowanego narzędzia jakim jest Chrome DevTools. Do zobaczenia!