Narzędzia Deweloperskie w Przeglądarce: Praca z konsolą

0:00Przechodzimy do tematów związanych z językiem javascript i

0:04w tych kilku lekcjach będę chciał żebyśmy poznali panel konsoli a

0:09także panel sources zaczniemy od panelu console to

0:13co tutaj mamy czyli panel console jest to interaktywna konsola która pozwala nam wywoływać

0:17język javascript a także widzieć pewne rzeczy które

0:22będą się działy w naszym kodzie jeżeli to będą błędy lub jeżeli to będą

0:26logi które za moment pokażę ci jak tworzyć pierwsze tutaj można wykonywać w

0:30obrębie strony na której jesteśmy język javascript więc jeżeli wpiszę dwa plus dwa to

0:34będziemy mieli wynik cztery i jeżeli bym sobie skorzystał z funkcji alert która

0:39wiem że w przeglądarkach jest dostępna wywołałem tę funkcję przeglądarka

0:43zareagowała tak samo jak byśmy w naszym kodzie w skrypcie wpisali

0:47alert hello czyli tutaj normalnie można wykonywać kod javascript jeżeli

0:51byśmy się chcieli odwołać do obiektu na przykład location żeby sprawdzić jaki mamy protokół

0:55coś takiego http wszystkie te rzeczy które są tutaj

0:59dostępne są też dostępne w naszym kodzie javascript w zasadzie

1:03może nie wszystkie jest tutaj parę takich specyficznych helperów ale poza

1:08tym możemy tutaj wpisywać wszystko co możemy również wpisać w naszym kodzie javascript w konsoli

1:13będą się również pojawić błędy na tej stronie mamy podpięty skrypt który sobie tutaj otworzyłem

1:18to jest dokładnie ten skrypt i jeżeli wpisałbym tutaj niepoprawny kod javascript

1:22na przykład coś takiego odświeżę stronę zauważ że tutaj nam

1:26się pojawił błąd nawet jak będziemy w innych panelach to od razu będziemy widzieli

1:30że w konsoli są jakieś błędy i te błędy są w naszym lub w cudzym

1:34kodzie ale w kodzie który jest w obrębie naszej strony wykonywany więc tutaj warto

1:38na to zwracać również uwagę jeżeli chodzi o błędy

1:42to one są wyświetlane w ten sposób ale mamy również ostrzeżenia które mogą być wyświetlane

1:46w kolorze żółtym lub pomarańczowym i jeżeli byłoby ich

1:51sporo i chcielibyśmy się ich pozbyć to możemy sobie tutaj za pomocą tego

1:55sidebara odpowiednio to ustawić to znaczy teraz mamy message czyli

1:59w ogóle wszystkie wiadomości jakie są ale moglibyśmy zaznaczyć tylko warnings

2:04pokazać tylko ostrzeżenia lub na przykład same błędy tutaj

2:08jest tylko istotne to że jeżeli sobie coś klikniesz to żebyś o tym pamiętał

2:12dlatego że tutaj przestały się wyświetlać błędy mimo tego że te błędy są ale jeżeli

2:16ten sidebar zamkniemy to one z powrotem będą się pojawiać więc tutaj najlepiej

2:20sobie to zostawić w ten sposób chociaż jak widzisz po zamknięciu tego sidebara nie ma to większego znaczenia

2:24czasami jednak tutaj mamy tak wiele tych wiadomości że chcemy je w ten sposób przefiltrować

2:29innym sposobem również jest taki filter filtr

2:33który tutaj mamy czyli możemy sobie wyszukać na przykład error w ten sposób i

2:37to nam się pokazuje natomiast zostałyby usunięte wszystkie inne

2:41wiadomości które tutaj są więc może ten błąd sobie usuńmy teraz jeżeli

2:45odświeżę jak widzisz ten błąd już się tutaj nie pojawia do konsoli

2:49możemy przechodzić z dowolnego panelu czyli jeżeli jesteśmy na przykład w panelu elements możemy nacisnąć

2:53przycisk escape i wysunie nam się taka szufladka od spodu i możemy sobie tutaj

2:58przejść do konsoli i na escape znowu ją schować więc to jest to taki trik aby

3:02szybko coś sobie w konsoli sprawdzić natomiast również możemy do niej przyjść w

3:06ten sposób w konsoli będą się pojawiać i również wszystkie logi z

3:11których będziemy korzystać więc w kodzie javascript a więc w kodzie javascript możemy

3:15sobie napisać console kropka log tutaj będzie kilka metod które

3:19ci za moment pokaże i możemy wpisać na przykład hello teraz jeżeli odświeżę stronę

3:23to zobaczyliśmy że tutaj pojawiło się hello i widzimy w jakim pliku się to

3:27znalazło i to jest bardzo bardzo przydatne w momencie kiedy chcemy z naszego

3:31kodu coś zalogować do konsoli choćby po to żeby zobaczyć czy dana linijka kodu się

3:36wykonuje tutaj w tym skrypcie oczywiście nie ma żadnego dodatkowego kodu więc

3:40wiemy że cały ten skrypt się wykona ale czasami jest tak że coś nam nie działa i nie jesteśmy pewni

3:44czy jakaś funkcja jest wykonywana wtedy wystarczy w niej zrobić console.log

3:48i wpisać sobie tutaj cokolwiek i sprawdzić czy w konsoli to się pojawia natomiast

3:52jeżeli to będzie bardzo wiele różnych błędów czy ostrzeżeń to tak jak wspomniałem

3:56możesz sobie wtedy przefiltrować na przykład samo hello i tylko to tutaj zostanie

4:01możemy również sobie wpisać console warm żeby zrobić

4:05sobie jakieś ostrzeżenie wtedy ono się pojawi w taki sposób lub nawet console

4:09error aby wyświetlić to w ten sposób myślę że to jest

4:13bardziej przydatne wtedy gdybyśmy tworzyli jakiś framework lub bibliotekę którą byśmy udostępniali

4:17innym i chcielibyśmy aby kiedy zrobią coś nie tak źle skorzystają z tej biblioteki

4:22to aby pokazać im błędy nie mniej jednak warto wiedzieć że istnieją inne

4:26metody oprócz log czyli jest to warn oraz error mamy jeszcze fajną

4:31metodę console table pokażę ci on teraz tylko wrzucę tutaj fragment kodu gdybyśmy mieli

4:35takie dane które mogłyby do nas przylecieć na przykład z serwera z użyciem ajaxa i

4:40chcieli je wyświetlić to oczywiście jeżeli zrobimy zwykły console.log odświeżam

4:47stronę to nam się tutaj pojawi w pojawi w takiej oto formie ale nie jest to aż tak bardzo czytelne

4:51oczywiście tutaj nie jest źle ale czasami trudno się jest do tego dostać jeżeli mamy na

4:55przykład większą tablicę więc jeżeli mamy takie dane gdzie w tablicy

4:59są jakieś obiekty z powtarzającymi się kluczami jak first name last name i age to

5:04możemy skorzystać z console table w ten sposób i zauważ że zostanie

5:08to ładnie wyświetlone oczywiście z konsoli można korzystać również tutaj tutaj

5:12mógłbyś również wpisać console table i podać jakąś nazwę zmiennej

5:16jeżeli ona byłaby tutaj dostępna dlatego że w konsoli będą globalnie dostępne również

5:20wszystkie zmienne które nie będą w jakimś ukrytym zakresie

5:24oczywiście nie jest dobra praktyka ale jeżeli ten skrypt jest teraz podpięty do strony

5:28tutaj nie ma żadnej funkcji to ta zmienna data będzie dostępna w konsoli

5:33jak widzisz w ten sposób i jeszcze jedną metodą konsoli którą ci pokażę jest console.dir

5:37ale może najpierw zrobimy sobie console.log taki tradycyjny i

5:42chciałam wyświetlić pierwszy element tej tablicy zauważ że to będzie wyglądało

5:46w ten sposób jest to czytelne nie ma z tym problemu ale czasami jeżeli mamy twoje dużo właściwości

5:50lepiej jest to wyświetlić z użyciem console.dir tak

5:54wtedy zobaczymy tutaj object i będziemy również mogli przejrzeć jego właściwości

5:59w konsoli mamy takie skróty że możemy napisać samą funkcję dir i

6:03też moglibyśmy zrobić data na przykład 1 i zauważ że daje

6:08nam to to samo tylko na innym elemencie więc jest to taki skrót dostępny tylko tutaj

6:12konsoli zamiast pisać console.dir możemy zrobić samo dir kolejną

6:17fajną rzeczą w konsoli jeżeli byśmy sobie wyświetlili wszystko

6:22co tutaj mamy taką tablicę jest to że możemy wybrany element zapisać

6:26sobie jako zmienną globalna taką tymczasową czyli mogę kliknąć na przykład tutaj na 1

6:30i wybrać store as global variable i to pokazało mi

6:34że mam zmienną temp1 pod którą będę miał referencje właśnie do tego elementu

6:38i to mi pozwala napisać na przykład temp1 first name w ten

6:42sposób i od razu zobaczę tutaj tę wartość będę również mógł to modyfikować

6:46i tak dalej swoją drogą jeżeli tutaj klikniemy na opcje możemy wybrać eager

6:50evaluation i zauważ co się stanie jeżeli wpiszę temp1 first name

6:55nie zdążę nawet dokończyć a już pokazuje mi jaki będzie wynik tej operacji

6:59czasami może się to również bardzo przydać szczególnie jeśli wpiszę na przykład dwa

7:04plus dwa od razu pokazuje 4 zanim zdąży zatwierdzić takie wyrażenie kolejną

7:09sztuczną którą chciałbym ci pokazać jest to jak możemy się odwołać do konkretnego

7:13elementu w drzewie dom powiedzmy że mam tutaj ten element header jeżeli

7:17chciałbym go wyszukać to w języku javascript możemy to zrobić z użyciem document query selector

7:21i skorzystać tutaj klasy header znajdzie

7:26nam te ten oto element jeżeli plik na prawym przyciskiem wybiorę reveal in elements

7:30panel to możemy go tutaj zobaczyć czyli jeżeli tutaj

7:34w konsoli dowolny element sobie zalogujesz na przykład w funkcji obsługi

7:38kliknięcia jakieś przycisku zrobisz console.log this albo event target to

7:43w ten sposób będzie to wyświetlane czyli tak to będzie wyglądać możemy wtedy przejść

7:47do takiego elementu i tutaj zobaczyć natomiast jeżeli z poziomu konsoli chciałbyś

7:51wyszukiwać jakichś elementów to zamiast pisać całe document query selector możemy

7:55skorzystać z funkcji dwóch dolarów i podać tutaj selector na przykład header

8:00to nam zwróci taki tablicopodobny obiekt bo tak naprawdę pod spodem jest to odpowiednik

8:04document query selector all i mamy to teraz tutaj oczywiście mogłem

8:08to zapisać w zmiennej w ten sposób czyli utworzyć tutaj zmienną na przykład tag albo

8:13jeżeli sobie tego wyszukamy mogę kliknąć prawym przyciskiem store as global variable razy google wary

8:17mamy temp1 i temp1 kieruje mi właśnie na ten obiekt gdzie

8:21pierwszym elementem jest ten wyszukany przeze mnie element natomiast teraz

8:25pokażę ci coś dużo fajniejszego otóż jeżeli sobie w panelu element

8:29zaznaczymy dowolny element na przykład ten header i przejdziemy do konsoli

8:33albo tutaj na escape ją wysuwając albo przechodząc tutaj zobacz

8:38ten element jest zaznaczony i wpiszemy $0 to to da nam referencje

8:42dokładnie do tego elementu i co to oznacza że referencje otóż dokładnie

8:46tak samo jak byśmy go z uzyciem document query selector czy jak byśmy tutaj

8:50w javascripcie z tym obiektem pracowali czyli jeżeli mam ten

8:54header to po $0 mam do niego bezpośredni dostęp mogę wpisać na przykład

8:59classList.add i dodać ma jakąś kasę którą w stylu my-class jeżeli

9:04przejdziemy do panelu elements ta klasa została tutaj dodana więc mogę wchodzić w

9:08interakcje jakby z poziomu javascriptu z dowolnym elementem zaznaczając go i wpisując

9:12$0 natomiast jeżeli zaznaczył bym teraz inny element tego

9:17diva to on jest pod $0 a pod dolar jeden jest poprzednio zaznaczony

9:21element i tak możemy zrobić jeszcze $2 $3 i

9:26$4 chyba też teraz nie jestem pewny ale jeżeli byśmy sobie poklikali

9:30więcej elementów to prawdopodobnie $4

9:34również jak widzisz będzie tutaj obsługiwany może nie jest to aż tak bardzo przydatne

9:38ale często $0 jest przeze mnie wykorzystywane czy $1

9:42żeby zobaczyć poprzedni element na koniec chciałem ci pokazać jeszcze że

9:46mamy tutaj ustawienia i warto sobie czasami tutaj coś zmienić na przykład

9:50jeżeli zaznaczymy log xml http requests to wszystkie wysyłane ajaxem

9:55zapytania będą się pojawiać w konsoli będziemy mogli wtedy podejrzeć ich szczegóły możemy

9:59ukryć network to chodzi o to że jeżeli będziemy jakieś błędy na przykład 404

10:03bo jakiś obrazek się nie wczytał i tak dalej to one się pojawiają w konsoli jeżeli tego jest

10:07sporo to możemy to tutaj ukryć natomiast to co chciałbym ci pokazać jest to

10:11preserve log i to jest bardzo przydatne dlatego że czasami jest tak że klikamy na

10:15jakiś przycisk i wyskakuje nam w konsoli błąd ale również strona

10:19się przeładowuje bo powiedzmy coś nie działa i tak naprawdę strona nie miała się przeładować

10:23ale się przeładowała czasami po prostu jest tak że widzisz że tutaj

10:28coś mignęło szybko i zniknęło więc jak temu zapobiec otóż

10:32wystarczy zaznaczyć preserve log i jeżeli sobie tutaj będziemy robić ten

10:36console.dir zauważ że jak odświeżę stronę to nam teraz pokazuje że przeszliśmy do

10:40takiej strony i co tam zalogowaliśmy jeżeli jeszcze raz odświeżę nie

10:44jest wszystko czyszczone ale jest zachowywany ten poprzedni log czyli wszystko

10:48co się tutaj znalazło więc jeżeli czasami będziesz w sytuacji że coś ci szybko miga jakiś błąd

10:52pojawia strona się przeładowuje to zaznacz po prostu preserve log i będziesz

10:56mógł po przeładowaniu tej strony ten błąd zobaczyć na sam koniec jeszcze

11:00smaczek dla ciekawskich pokażę ci że w konsoli możemy kolorować

11:04sobie to co tam wpisujemy jeżeli zrobię console.log i chciałbym

11:09hello pokolorować to możemy przed tym postawić %c

11:13a jako drugi parametr przekazać tutaj style

11:17czyli na przykład możemy napisać color red i font-size 20

11:21pikseli jeżeli coś takiego zrobimy to zauważ że w konsoli będzie to wyglądać w ten

11:26sposób to może się przydać jeżeli na przykład tworzysz jakąś aplikację kiedy jak ktoś

11:30otworzy konsolę to chcesz go ostrzec że tutaj nie powinien nic zmieniać i tak dalej

11:34czasami na stronach banków jeżeli przejdziemy do konsoli to możemy zobaczyć że jest

11:38tutaj takie duże ostrzeżenie aby nigdy nie wklejać tutaj kodu który ktoś nam podał

11:42i tak dalej