Narzędzia Deweloperskie w Przeglądarce: Debugowanie kodu

0:00W tej lekcji pokażę ci jak możemy debugować nasze aplikacje

0:04z użyciem wbudowanego w panelu sources debuggera i dla przykładu

0:08posłużymy się ajaxem mamy tutaj taki przykład 41 gdzie możemy wysłać

0:12sobie zapytanie jeżeli kliknę i po chwili otrzymujemy odpowiedź która jest stawiana

0:17tutaj do takiego elementu przy okazji zauważ że sporo rzeczy logujemy

0:21do konsoli no i zazwyczaj to jest okej nie ukrywam że bardzo często również

0:25po prostu w danej funkcji robię sobie console.log na przykład data

0:29żeby zobaczyć jakie dane zostały przesłane z serwera i dzięki temu mogę to

0:33zobaczyć po prostu w konsoli natomiast czasami łatwiej

0:37jest podejrzeć pewne rzeczy albo je zdebugować z użyciem właśnie wbudowanego debuggera

0:42i teraz chciałem ci pokazać jak to zrobić natomiast prześledźmy co się dzieje po kliknięciu

0:46w przycisk wysyłamyzapytanie na taki adres i na sukces

0:50będziemy chcieli po prostu wyświetlić że żądanie zakończone sukcesem tutaj

0:54type of data i przede wszystkim wyświetlić sobie

0:58dane czyli na razie wyświetlamy je wstawiając je tutaj za pomocą

1:02funkcji display text gdzie mówimy że output to jest ten element a data

1:07to są dane i po prostu ta funkcja na tym elemencie ustawia w jquery taki tekst

1:11natomiast powiedzmy że na razie sobie wykomentuje te rzeczy

1:15i że chciałbym sobie tutaj zrobić po prostu console.log data

1:19tak jak wspomniałem bardzo często to robię wysyłam zapytanie i widzimy co zostało do nas

1:24przesłane jest to po prostu string natomiast jeżeli sobie tutaj

1:28w jquery zmienimy dataType na json to jquery automatycznie nam ten string

1:32przysłany z serwera zamieni na obiekt i sytuacja wygląda inaczej

1:37czyli tak możemy do tego obiektu się dostać zauważ że tutaj łatwiej byłoby

1:41teraz skorzystać z console table co ci już pokazywałem wcześniej natomiast

1:45chciałbym móc jeszcze inaczej się do tego elementu odwołać i mieć

1:49większą kontrolę nad tym co się dzieje w tej linijce kodu i teraz

1:53możemy to zrobić na dwa sposoby pierwszy jest taki aby przejść do sources tutaj

1:57będziemy sobie musieli znaleźć ten skrypt jest on tutaj okej

2:03dokładnie jest to w tym miejscu i będziemy mogli w tym miejscu które nas interesuje czyli

2:07tutaj postawić breakpoint zrobimy to w taki oto sposób teraz

2:11jeżeli sobie odświeżę stronę ten breakpoint został tutaj zapamiętany zrobię

2:15wyślij zapytanie to zauważ że jak dostaniemy odpowiedź to mamy

2:20coś takiego tutaj jak post in debugger to oznacza tylko tyle że wykonywanie naszego

2:24kodu zostało zawieszone na tej linijce czyli kolejna linijka się na

2:29razie jeszcze nie wykonała to wszystko jest zapauzowane a my możemy tutaj po

2:34tym kodzie sobie przeskakiwać i teraz to jest pierwszy sposób jak możemy

2:38to zrobić mogę taki breakpoint usunąć odświeżę

2:42a drugi sposób który możesz zrobić z poziomu kodu jest taki

2:46że w miejscu w którym chciałbyś zatrzymać wpisujesz po prostu słowo debugger jest

2:50to słowo które chrome devtools rozpozna natomiast ważne żeby to później

2:54usunąć zanim ten kod wrzucisz do produkcji odświeżam

2:58jeszcze raz wyślij zapytanie i zauważ że dokładnie w tym samym miejscu się

3:02zatrzymaliśmy i teraz zerknijmy co my w tym debuggerze mamy dlaczego

3:07to jest lepsze niż ten console.log który wcześniej zrobiłem gdzie mogłem podejrzeć tylko przesłane

3:11z serwera dane jest to lepsze dlatego że możemy zobaczyć co się dzieje

3:15dokładnie w tej linijce czyli do czego mamy dostęp wiemy że w tej linijce kodu

3:19powinniśmy mieć dostęp do parametru data i tak też się dzieje zauważ że ten parametr

3:23tutaj jest i mamy również dostęp do innych parametrów

3:28które są tutaj przekazane ale jeżeli znasz javascript wiesz że

3:32w tym miejscu powinniśmy mieć dostęp też do na przykład funkcji która jest tym górnym zakresie i

3:36do wielu innych rzeczy i dokładnie to możemy tutaj podejrzeć widzimy że w closure

3:40czyli poprzez domknięcie mamy dostęp do zmiennych button oraz output

3:44to są te zmienne czyli po pierwsze możemy potwierdzić że nasz kod powinien mieć do

3:49nich dostęp po drugie możemy coś z nimi zrobić na przykład użyć store

3:53as global value i co z tym zrobić mamy również dostęp do funkcji

3:57display text i do globalnego obiektu czyli do wszystkiego co mielibyśmy

4:01dostępne na przykład na window i tak dalej natomiast co

4:05jest tutaj super jeżeli sobie teraz wcisnę escape żeby wysunąć szufladę z konsolą

4:10i w tej konsoli sobie wpiszę mamy trochę tutaj mało miejsca

4:14ale pamiętaj że jesteśmy zapauzowani w tym miejscu jeżeli sobie tutaj wpisze data

4:18to zauważ że mam dostęp do tej zmiennej czyli ta konsola otwarta tutaj

4:22kiedy jesteśmy zapauzowani w debuggerze pozwala nam wykonywać kod javascript

4:26dokładnie w kontekście tego miejsca w którym jesteśmy to zostało

4:30zapauzowane możemy wszystko dokładnie sprawdzić wszystko sobie przejrzeć i tak

4:34dalej więc mogę sobie funkcję na przykład spróbujmy czy nam to

4:38zadziała jak zrobię display text i przekaże zmianą output którą mamy i data

4:43wciskam enter zauważ że zostało to tutaj wstawione czyli

4:47mogę na zapauzowanym kodzie wykonywać sobie jeszcze jakieś akcje zamknę

4:52sobie tą konsolę wciskając escape teraz pokażę ci jak możemy kontynuować bo to

4:56jest bardzo ważne tutaj w kontekście debuggera otóż mamy tutaj po pierwsze cały call stack

5:00czyli od czego się to wszystko zaczęło że jquery wykonywało jakieś

5:04pewne funkcje wróciliśmy tutaj do naszego skryptu czyli do tej

5:08metody czasami warto sobie to przejrzeć natomiast to co tutaj

5:12możemy zrobić to skorzystać z tych ikonek które są w tym miejscu i po pierwsze możemy

5:17kliknąć resume script execution klikamy i po prostu ten skrypt

5:21się kończy bo nie mamy innych wyrażeń takich słów kluczowych

5:26debugger moglibyśmy dodać jeszcze w innych miejscach lub poklikać sobie i

5:30zrobić to w ten sposób więc jeżeli byśmy kliknęli continue

5:34to byśmy się zatrzymali na kolejnym natomiast odświeżmy jeszcze raz chciałbym

5:38żebyśmy się znowu zatrzymali w tym miejscu i pokażę ci że kolejna ikonka jest to

5:42step over next function call klikniemy sobie to i zauważ

5:47że przeszliśmy krok dalej do kolejnej funkcji a jest to console.log data

5:51zauważ że jeszcze nic się w konsoli nie pojawiło kliknijmy dalej

5:55teraz przeszliśmy tutaj i w konsoli te dane się pojawiły bo dopiero

5:59teraz ta linijka została wykonana czyli idziemy sobie krok po kroku tutaj

6:03mamy również bardzo fajną rzecz bo nam pokazuje co na tym etapie w data się znalazło

6:08jest to oczywiście bardziej czytelne kiedy tu byłby na przykład string lub jakaś liczba i teraz

6:13mamy kolejny wybór możemy kliknąć step over next function call

6:17i przejdziemy wtedy tutaj zobacz lub moglibyśmy zrobić

6:21inną rzecz ale muszę teraz odświeżyć żeby ci to pokazać zrobię to jeszcze raz

6:25dojdziemy do tego miejsca i tutaj możemy kliknąć coś

6:29takiego jak step into next function call czyli into chcemy wejść

6:33do funkcji a więc nie wywołać nam funkcję i przejść dalej ale z jakiegoś powodu chciałbym

6:38zobaczyć jak ta funkcja działa co w niej jest więc kliknę sobie w ten sposób i

6:42przeszliśmy do tej funkcji którą mamy tutaj i z kolei teraz możemy podejrzeć

6:46co w tej funkcji jest dostępne zauważ co zostało przekazane jako elem jako tekst

6:50co jest pod this widzimy że pod this jest tutaj window do

6:54czego ma dostęp ta funkcja poprzez domknięcia a także jaki jest

6:58jakie są rzeczy w zakresie więc tak możemy sobie wejść do tej funkcji i

7:03tutaj znowu gdyby tu były kolejne funkcje to moglibyśmy albo przeskakiwać poza te

7:07funkcje wykonać je i przejść dalej albo wejść sobie to takiej funkcji tutaj możemy

7:12zrobić step out of current function czyli chce z niej wyskoczyć i wrócimy wtedy

7:16tutaj bo tutaj weszliśmy do tej funkcji ona się wykonała przeszliśmy tutaj

7:20na stronie oczywiście jest odzwierciedlane to wszystko kiedy te funkcje

7:24się wykonują ten kod jest normalnie wykonywany tylko że my kontrolujemy kiedy

7:28i czy przeskakujemy linijka po linijce czy po prostu przeskakujemy poprzez

7:33cała funkcję mogę tutaj teraz kliknąć resume script execution

7:37i to wszystko się zakończyło tu możemy usunąć debugger i

7:41mam nadzieję że ten prosty przykład pokazał ci że możesz na spokojnie sobie wszystko

7:45przejrzeć nawet jeżeli coś się dzieje bardzo szybko my możemy tak naprawdę to zapauzować

7:50i krok po kroku sobie przeskakiwać aby sprawdzić przede wszystkim jakie zmienne

7:54są dostępne co w nich się znajduje i tak dalej a dodatkowo wysuwana tutaj

7:58pod escape konsola pozwala nam wykonywać kod javascript w kontekście

8:03linijki która jest aktualnie tutaj zaznaczona