Narzędzia Deweloperskie w Przeglądarce: Przegląd panelu Network

0:00Przechodzimy do kolejnego panelu niezwykle istotnego w

0:04kontekście tworzenia stron internetowych a jest to panel network ten

0:08panel pokazuje nam wszystkie zasoby jakie zostały pobrane

0:12przez naszą stronę internetową i dla każdego z nich

0:16możemy zobaczyć bardzo dokładne szczegóły czyli jakie

0:21nagłówki zostały wysłane jakie otrzymaliśmy z powrotem jakie statusy i tak

0:25dalej zaraz ci to wszystko będę chciał pokazać jak odświeżymy sobie naszą stronę

0:29i tutaj jest zaznaczone nagrywanie teraz mogę zrobić stop recording ale

0:33jeżeli zaznaczymy to na nagrywanie i odświeżę stronę zauważ że ona się bardzo szybko wczytała

0:37ale to wynika głównie z tego że jest ona lokalnie u mnie na komputerze i

0:42część rzeczy zostały wyczytane z pamięci tutaj mamy taki tak

0:46zwany waterfall mogę za pomocą kółka na myszy sobie tutaj zawężać

0:50i zauważ że również wszystkie zasoby które jest pokazane że się wczytały

0:54pod spodem nam się tutaj zawężają czyli mogę zobaczyć w

0:58takim małym czasie co wczytało a co w całym czasie jest to bardzo

1:02tutaj przydatne natomiast warto zwrócić uwagę na to że zasoby wczytują

1:07się w takiej kolejności jak tutaj widzimy czyli najpierw wczytał nam się dokument jest

1:11jego podgląd ale dokładny tekst jaki otrzymaliśmy z serwera jest tutaj czyli

1:15odpowiedź no i jak wiesz być może przeglądarka internetowa kiedy

1:19otrzyma taki kod html zaczyna go parsować i kiedy zobaczy na przykład link

1:23i widzisz że tutaj jakieś style musi pobrać wysyła po ten po te style zapytanie

1:27więc widzimy że to zapytanie jest tutaj potem po kolejne po kolejne i tak

1:32dalej parsuje dokument tworzy drzewo dom które widzieliśmy w panelu elements później dochodzi

1:36na przykład do skryptów które są u dołu i też je będzie wczytywać gdybyśmy sobie

1:41tutaj przefiltrowali na przykład kropka js zauważ że znajdzie nam

1:45wszystkie skrypty które zostały pobrane warto również zauważyć że

1:49tutaj można filtrować po typie na przykład javascript css obrazki

1:53media tutaj mogą być na przykład wideo fonty i tak dalej z tym

1:57że jak raz sobie coś tutaj zaznaczysz to zwracaj uwagę czy to jest zaznaczone bo możesz

2:01później szukać tutaj czegoś innego nie widzisz tego bo zawęziłeś sobie wyniki tutaj

2:06możemy z pomocą command lub control

2:10zaznaczać kilka jak widzisz tych przycisków żeby

2:15sobie to odpowiednia przefiltrować natomiast all zwraca nam wszystkie co

2:19ten panel nam tutaj jeszcze dokładnie pokazuje otóż jeżeli sobie klikniemy

2:23jakiś zasób który został pobrany to przede wszystkim co może być bardzo istotne widzimy

2:28nagłówki http czyli mamy request headers a więc

2:32te które przeglądarka wysłała do serwera prosząc go o ten zasób pod takim adresem powiedziała

2:37co akceptuje jakie może być kodowanie czyli kompresja na

2:41przykład gzip i tak dalej te nagłówki bardzo się przydają szczególnie wtedy kiedy

2:45tworzysz również backend czyli piszesz kod serwerowy żeby zobaczyć co dokładnie

2:50leci do serwera a także co dostajesz z powrotem czyli response headers

2:54to jest to co odesłał nam serwer i to się może różnić w zależności od zasobu

2:58i zależności od konkretnego serwera widzimy również status 304

3:02not modified normalnie mielibyśmy tutaj status na przykład 200 to

3:07by oznaczało taki taką standardową odpowiedź tutaj zostało

3:11to nie zmodyfikowane więc taki nagłówek czy taki status został zwrócony preview

3:16to jest taki podgląd który przeglądarka próbuję nam pokazać przy stylach może

3:20to wyglądać tak natomiast samo response czasami wygląda to tak samo ale

3:25samo response to będzie dokładnie odpowiedź na przykład tekst

3:29który został przesłany z serwera tutaj mamy initiator

3:33czyli kto rozpoczął to zapytanie w przypadku tego głównego dokumentu

3:37tutaj nie ma to znaczenia ale w przypadku na przykład styli możesz dokładnie

3:41zauważyć że ten pierwszy zasób rozpoczął pobieranie

3:45drugiego zasobu czasem może być tak że to z poziomu skryptu javascript doładowujemy

3:50jakieś zasoby i dzięki temu będziemy również mogli to zobaczyć następną

3:55rzeczą jest timing i tutaj chciałbym ci pokazać ten timing na innym przykładzie

3:59i wyjaśnijmy sobie co tutaj dokładnie się znajduje jesteśmy na tej stronie ajaxowej

4:03gdzie wysyłamy zapytanie pod taki adres i będę ci mógł pokazać

4:07jak ten timing działa więc po pierwsze w konsoli zaznaczymy sobie

4:11log xml request wyślemy zapytanie i

4:15to nam pozwala tutaj zobaczyć dokładnie coś takiego i teraz

4:19mogę sobie to kliknąć przeniesie nas do panelu network lub mogłem w panelu network

4:23zawęzić sobie to w ten sposób czyli jeżeli bym teraz jeszcze raz wysłał

4:27takie zapytanie zauważ że ono się też tutaj pojawi albo pokazać wszystkie

4:31i filtrować albo wybrać xhr i teraz jeżeli sobie tutaj przejdziemy

4:35to chciałbym się skupić na tej zakładce timing w tej zakładce widzimy

4:40dokładnie wszystkie czasy które tutaj się złożyły

4:44na całkowity czas pobrania tego zasobu najpierw widzimy queueing i to

4:48oznacza kolejkowanie tutaj było bardzo szybkie i o co tutaj chodzi otóż

4:52że jeżeli serwer wykorzystuje protokół http 1 to

4:56wtedy możemy pobierać jednocześnie tylko sześć plików więc jeżeli

5:01przeglądarka ma do pobrania na przykład 10 plików css to 6 będzie pobierała

5:05jednocześnie pozostałe będą kolejkowane i czas tego kolejkowania tutaj zobaczymy kiedy

5:091 się pobierze kolejny wskoczny na kolejkę przy protokole http 2

5:13już tego problemu nie ma następnie tutaj widzimy stalled czyli

5:17ile musieliśmy oczekiwać na rozpoczęcie tego połączenia i

5:22teraz to co nas najbardziej interesuje to jest wysłanie tego zapytania widzimy

5:27że ono było piekielnie szybkie następnie to co jest tutaj istotne jest

5:32to waiting czyli oczekiwanie na odpowiedź serwera i TTFB oznacza time to first

5:36byte a więc wysłaliśmy zapytanie i ile czasu upłynęło aż

5:40serwer wysłał nam pierwszy bajt czyli w to się nie wlicza pobieranie dlatego

5:45że pobieranie jest dalej i pobieranie zajęło jak widzisz jedną milisekunde

5:49tak naprawdę bo tych danych nie było dużo ale serwer potrzebował ponad sekundy

5:53na to aby nam w ogóle zacząć cokolwiek odsyłać dlaczego

5:57to jest istotne jest to istotne choćby z tego powodu że dzięki temu możemy

6:01zobaczyć że na przykład nasza strona działa powoli bo problemem jest serwer

6:06a nie zasoby frontendowe jeżeli byśmy sobie tutaj przyszli do all i zobaczyli

6:10to nasz główny dokument to on jak widzisz tutaj również bardzo szybko się wczytał bo jest

6:14to z lokalnego serwera ale gdybyś wszedł teraz na dowolną stronę i zobaczył ile

6:18tutaj jest waiting czyli time to first byte to zobaczyłbyś ile serwer potrzebuje

6:23na przetworzenie takiego żądania i kiedy dopiero zaczyna nam cokolwiek

6:27odsyłać natomiast content download to zawsze będzie pokazywało ile

6:31zajęło przeglądarce pobranie tego zasobu oczywiście to zależy od wielkości zasobu i

6:35szybkości połączenia tutaj jeszcze przy tym dokumencie możemy zobaczyć coś

6:39takiego jak dns lookup i initial connection dns lookup to jest

6:43wyszukiwanie adresu ip czyli jeżeli wejdziesz na przykład na stronę eduweb.pl to

6:47przeglądarka najpierw musi znaleźć pod jakim adresem ip znajduje

6:51się domena eduweb.pl to będzie widać właśnie tutaj i będziemy

6:56tutaj mogli mieć również coś takiego jak ssl handshake czyli jeżeli będzie protokół https

7:01to wtedy będziemy widzieli ile zajęło tak naprawdę ustalenie w

7:05jaki sposób będzie to szyfrowanie przebiegać i tak dalej więc wszystko tutaj

7:09w tej zakładce timing widać i dlatego ona jest tak bardzo przydatna właśnie

7:13wtedy kiedy twoja strona na przykład działa powoli i chcesz znaleźć powód to

7:18tyle w tej lekcji w kolejnej jeszcze pozostaniemy w zakładce network i pokażę ci kilka ciekawych rzeczy