Narzędzia Deweloperskie w Przeglądarce: Przydatne funkcje panelu

0:00Pozostajemy jeszcze w panelu network dlatego że chciałbym ci pokazać jeszcze

0:04kilka funkcji które się tutaj znajdują przyjdziemy sobie przede

0:08wszystkim do tego głównego widoku tutaj można nacisnąć x żeby wrócić do tej listy

0:12wszystkich zasobów jakie się w czytały widzimy wszystkich statusy i teraz

0:16zauważ jedną rzecz tutaj mamy coś takiego jak rozmiar gdzie też swoją drogą możemy posortować

0:21po największych zasobach po najmniejszych i tak dalej ale mamy również

0:25tutaj jeszcze coś takiego jak memory cashe i teraz co to oznacza to

0:29oznacza tylko tyle że dany zasób nie został pobrany z serwera ale

0:34został wczytany z pamięci podręcznej przeglądarki i to ogólnie jest dobra rzecz że przeglądarki

0:38pobierają zasoby raz a później serwują je z pamięci podręcznej przeglądarki

0:43natomiast czasami jest tak że chcemy albo zobaczyć

0:47dokładnie ile zajuje jakiś plik bo tutaj sobie to badamy albo chcemy

0:51co jest częstsze wymusić pobranie wszystkich zasobów od nowa dlaczego

0:56otóż dlatego że powiedzmy zmieniamy sobie coś w naszym skrypcie odświeżamy stronę i to nie działa i

1:00czasami można się naprawdę bardzo sfrustrowac dlaczego na naszej stronie nie zostały

1:05odzwierciedlone zmiany które wpisaliśmy w kodzie i tak może dziać się dlatego że

1:09przeglądarka po prostu wczytuje ten kod z pamięci podręcznej wtedy wystarczy

1:14że zaznaczymy tutaj opcję disable cache i po odświeżeniu strony wszystkie

1:18zasoby będą musiały się pobrać od nowa natomiast tylko wtedy kiedy chrome

1:22devtools jest otwarty dlatego ja zazwyczaj tę opcję mam zaznaczoną jeżeli tutaj

1:27to zamknę wtedy to nie ma znaczenia mogę chodzić normalnie po internecie wszystko

1:31wczytuje się szybko bo przeglądarka ignoruje to ustawienie natomiast w momencie

1:35w którym otworzę chrome devtools to to ustawienie jest brane pod uwagę

1:39odświeżam i jak widzisz wszystko się pobrało od nowa i dzięki temu mogę

1:43zobaczyć dokładnie ile dany zasób po prostu zajmował i tutaj na pierwszy rzut oka

1:47pokazuje nam na przykład 64 kilobajty to oznacza że tyle zostało przetransferowane

1:52przez sieć ale to nie znaczy że zasób docelowo tyle zajmuje bo jeżeli

1:56na przykład zobaczymy te fonty z google fonts to zauważ że tutaj 680

2:01bajtów musieliśmy tylko pobrać a ten zasób zajmuje 4,9

2:05kilobajta i to wynika z tego że tutaj została zastosowana kompresja

2:09jeżeli sobie klikniemy to będziemy mogli zobaczyć w odpowiedzi serwera że mamy

2:13content-encoding gzip czyli to mówi przeglądarce że zostało to skompresowane

2:17gzipem i przeglądarka może to rozpakować bo ta z kolei wysyłając

2:21zapytanie czyli tutaj request headers powiedziała że akceptuje

2:26taki encoding gzip czyli rozumie o co w tym chodzi serwer odesłał zasób mówiąc

2:30jak jest on skompresowany można go teraz po prostu rozpakować i

2:34dzięki temu zaoszczędzić na ruchu sieciowym kolejną rzeczą którą

2:39chciałbym ci pokazać takim trikiem jest to że w tym filtrze możemy wpisać sobie larger

2:43than czyli większa od i wpisać na przykład 100 kilobajtów

2:48zauważ że wtedy nam pokaże wszystko większe od 100 kilobajtów gdybyśmy wpisali na przykład

2:521 m to jest to 1 megabajt a jeżeli wpiszemy po prostu

2:56100 to jest to 100 bajtów czyli w ten sposób możesz przefiltrować sobie

3:00na przykład obrazki klikając tutaj na img na tej stronie tutaj nie mieliśmy żadnego

3:04obrazka na to wygląda i możemy przefiltrować większe od i

3:09wtedy po prostu zobaczyć na przykład które obrazki zajmują zbyt dużo miejsca

3:13następnym trikiem który tutaj mamy który jest bardzo przydatny

3:17przy testowaniu aplikacji jest ograniczenie prędkości zauważ że teraz

3:21jesteśmy po pierwszym na localhoscie ale nawet gdyby ta aplikacja ta strona

3:25była gdzieś w internecie to ona wczytywał aby się bardzo bardzo szybko bo mam dobre

3:29połączenie internetowe i zazwyczaj tak właśnie testujemy nasze strony a jest

3:34to niestety błędem dlatego że na urządzeniach mobilnych ten internet zazwyczaj

3:38nie jest już tak dobry więc jeżeli chcesz sobie zasymulować urządzenie mobilne albo

3:42jakiś słabszy internet możesz tutaj wybrać z online zmienić na

3:46przykład na fast 3g slow 3g czy nawet custom jeżeli wybierzemy slow

3:513g to nasza strona wczyta się dużo wolniej swoją drogą zauważ

3:55że jeżeli tutaj jeszcze wybiorę all to widzimy że nasza strona żeby się wczytać musiała wykonać

4:00siedemnaście zapytań przetransferować 492 kilobajty natomiast

4:04po rozpakowaniu te zasoby zajęły 516 kilobajtów i wszystko

4:09trwało tutaj 5,92 sekundy więc teraz wygląda

4:13na to że po prostu coś wczytywało się dłużej z jakiegoś powodu normalnie byłoby to

4:17znacznie szybciej zobaczymy okej

4:21niektóre zasoby wczytują się teraz dłużej ale to wynika z kolei z tego że zaznaczyłem

4:25slow 3g i to nam pozwala zasymulować w jaki

4:29sposób ta strona internetowa wczytywałaby się na powolnym połączeniu zauważ że

4:33teraz zajęło to 15 sekund i to jest bardzo istotne

4:38żeby sobie to zaznaczyć tutaj network nam będzie pokazywało że pamiętaj że coś tutaj zmieniłeś

4:42zmień to później na online i to nam pozwala

4:46jak widzisz zasymulować wolniejsze połączenie ale nie zawsze

4:50na stronie będziemy widzieli jak ona była wczytywana przy tym wolniejszym połączeniu dlatego

4:55jeszcze jedną rzeczą która nam tutaj pomoże będą screenshoty

4:59i teraz pokażę ci jak możemy do nich przyjść klikniemy sobie tutaj i

5:03wybierzemy capture screenshots odśnieżymy jeszcze raz stronę przy tym

5:07wolniejszym połączeniu 3g i ta strona nam się wczytuje

5:11a tutaj będą za moment pojawiały screenshoty czyli jak

5:15ta strona jest renderowana przez przeglądarkę kiedy przeglądarka robi

5:19kolejne painty czyli maluje tą stronę to będziemy mogli dokładnie jak widzisz tutaj

5:23podejrzeć to jest bardzo bardzo przydatna rzecz mogę sobie kliknąć ten

5:28pierwszy screenshot rzepichy dwukrotnie to nam się pokaże i widzimy że po

5:3277 milisekundach przeglądarka już tyle była w stanie wyrenderować jeżeli

5:37kliknę dalej widzimy że kolejny został zrobiony w piątej sekundzie brakowało

5:41nam tutaj jeszcze jakiegoś obrazka kolejny w siódmej i tak

5:46sobie możemy przeskakiwać aż zobaczymy jak

5:50to wszystko było wczytywane to jest oczywiście troszkę bardziej przydatne kiedy testujemy

5:54już stronę która jest w internecie niemniej jednak możesz dokładnie zobaczyć na

5:58danym połączeniu tutaj na slow 3g jak ta strona by się pokazywała

6:03i wszystko będzie zależało od tego jakie masz zasoby jeżeli na przykład ikonki są

6:07osobnym zasobem powiedzmy z font awesome tak jak mamy tutaj to

6:11zauważ że w dziewiątej sekundzie jeszcze ich nie było on dopiero później nam wskoczyły

6:15kiedy ten zasób się pobrał no i oczywiście teraz gdybyśmy sobie zerknęli

6:19na wszystkie rzeczy które tutaj są czyli

6:24przejdziemy sobie powiedzmy tutaj zauważ że widzimy jakie

6:29skrypty jakie zasoby już były wdczytane to każdy z nich będziemy mogli sobie zerknąć

6:33ile czasu trwało jego pobranie przy

6:37tym właśnie ograniczonym połączeniu sieciowym czyli samo content download przy takim

6:41slow 3g zauważ że zajęło tutaj ponad 5 sekund i

6:46ostatnim trikiem który chciałbym ci pokazać w panelu network tutaj sobie wrócimy do online

6:50wczytamy to wszystko jak widzisz teraz to się wczytuje bardzo szybko ostatnim

6:54trikiem który chciałbym ci tutaj pokazać wyłączymy sobie również te screenshoty jest możliwość kopiowania

6:59linku abyśmy mogli pod niego sobie wysłać zapytanie czyli na przykład mamy style css

7:04mogę kliknąć prawym przyciskiem i wybrać copy okej

7:10w ten sposób to trzeba zrobić i mamy coś takiego jak link address to nam skopiuje

7:14cały taki adres pokażę ci jak on wygląda w ten sposób ale

7:19możemy również skopiować as fetch i to jest fajne bo to

7:23nam skopiuję to w ten sposób czyli pozwoli nam funkcją fetch

7:27która jest przeglądarkach dostępna pobrać sobie taki sposób albo możemy sobie

7:31kliknąć copy as curl w ten sposób

7:35i to jest przydatne jeżeli na przykład korzystasz z linuxa czy z maca i

7:39masz dostępne curl możesz przejść do terminala i wkleić sobie całe takie

7:43zapytanie curl ono będzie

7:47wyglądać w ten sposób i możesz się bezpośrednio odwołać do tego zasobu

7:51pobrać sobie go do testowania i tak dalej więc warto również na to zwrócić

7:55uwagę tutaj jest jeszcze kilka innych opcji