Narzędzia Deweloperskie w Przeglądarce: DOM Breakpoints

0:00W poprzedniej lekcji zobaczyłeś jak możemy stawiać breakpointy w

0:04kodzie czyli chcemy żeby się gdzieś wykonywanie naszego kodu zatrzymało natomiast

0:08teraz pokażę ci jak możemy stawiać takie same breakpointy ale kiedy

0:12zmienia się coś na elemencie w drzewie dom czasami jest tak że korzystamy

0:16z różnych bibliotek czy frameworków i coś na naszej stronie się zmienia ale nie jesteśmy

0:20w stanie stwierdzić który skrypt tego dokonuje czyli na przykład pojawiają się jakieś

0:24elementy znikają czy są dodawane klasy i tutaj mam taki bardzo

0:28prosty przykład ale zauważ że jeżeli klikam ten przycisk otwórz to zmienia się treść

0:33tego przycisku co również możemy zobaczyć tutaj na stronie i teraz

0:37powiedzmy że działoby się to w sposób jakiś automatyczny czyli jakieś

0:41dane byłoby wczytywane i tak dalej coś by się pojawiało nie wiesz który skrypt to robi możemy

0:46na dowolnym elemencie kliknąć i wybrać coś takiego jak break on na

0:50przykład subtree modifications to oznacza że chcemy zatrzymać wykonywanie kodu

0:54kiedy z poziomu javascriptu będzie się zmieniać cokolwiek w drzewie

0:58tego elementu i ten tekst który zmieniamy tak naprawdę jest osobnym takim węzłem

1:02tekstowym więc to również się tutaj kwalifikuje natomiast jeżeli miałbyś

1:07jakiś element wyższego rzędu na przykład ten div i do niego byłyby wstrzykiwane

1:11jakieś elementy powiedzmy galeria dynamicznie nie wiesz który skrypt to robi

1:15to na takim elemencie ustaw wtedy break onsubtree modifications możemy

1:19również ustawić attribute modifications i wtedy zatrzyma się nasz kod zawsze

1:23jakikolwiek atrybut w tym na przykład klasa zostanie zmieniony

1:27z użyciem skrypt lub kiedy taki node będzie usunięty

1:31możemy również to zaznaczyć więc przed usunięciem takiego elementu zatrzyma się

1:35kod okej czyli ja chciałbym na tym przycisku to zrobić żeby

1:39pokazać jak to w ogóle działa przejdziemy do break on subtree modifications

1:44i teraz w momencie kiedy sobie kliknę tutaj zamknij zauważ że mamy post

1:48in debugger czyli znowu zmodyfikowaliśmy coś tutaj a w zasadzie

1:52nawet nie zdążyliśmy bo zostało to zatrzymane i widzimy

1:56że skrypt jquery zmienia na tym elemencie jego text content

2:01w taki oto sposób i przez to zostało to tutaj zatrzymane

2:05znowu możemy tak jak w debuggerze przejść sobie po kolei i zobaczyć gdzie to

2:09się dzieje natomiast sam fakt że jquery to zmienia jeszcze dużo nam nie mówi ale

2:13jeżeli zerkniemy sobie na call stack czyli jak to zostało wykonane to zauważymy

2:17tutaj nasz skrypt czyli scripts.js jeżeli tutaj kliknę to widzimy

2:21że dokładnie w tym miejscu w kodzie button.text zostało to

2:25zmienione i w ten sposób możemy znaleźć która linijka kodu konkretnie

2:30modyfikuje nam takie drzewo dom oczywiście możemy sobie

2:34tutaj przejść dalej czyli zrobić step over i zauważ że

2:38ten przycisk teraz nie ma żadnego tekstu bo jquery ten text tak naprawdę wyczyściło

2:42możemy zobaczyć dokładnie jak to działa i możemy sobie tak przeskakiwać

2:46do kolejnych funkcji aż wreszcie zobaczymy że zostało

2:50to zmienione w tym przypadku akurat nas nie interesowało konkretnie jak działa jquery

2:54ale jak widzisz również możemy znaleźć który skrypt to zainicjował więc

2:58może to być bardzo przydatne jeżeli jakiś skrypt zmienia coś na twojej stronie albo dodaje

3:02jakąś klasę nie wiesz skąd ona się bierze to możesz sobie taki breakpoint postawić

3:07ważne że on tutaj jest widoczny i wtedy możesz

3:11po prostu wejść tutaj z powrotem i go odznaczyć czyli tutaj

3:15będzie sygnalizacja że coś w tym miejscu zostało postawione jakiś breakpoint

3:19podobnie jest jak klasę hover na przykład ustawialiśmy też widzieliśmy że coś tutaj

3:23jest więc taka kuleczka oznacza zawsze że w tym miejscu coś zostało ustawione

3:27jak jesteśmy przy tym temacie na przykład kliknięcia wykonywania

3:32pewnych akcji to chciałbym tutaj przy okazji również pokazać że kiedy mamy jakiś

3:36element zaznaczony to oprócz tego że widzimy tutaj jego style i tak dalej to

3:40będziemy widzieli dom breakpoints okej to chciałem ci jeszcze pokazać że

3:45jeżeli przejdziemy do dom breakpoints to będziemy tutaj widzieli te breakpointy możemy je odznaczyć

3:49ale również ciekawą mamy tutaj zakładkę event listeners ono nam pokazuje

3:53że do tego elementu zostały przypisane jakieś zdarzenia mamy zdarzenie

3:57kliknięcia na ten właśnie konkretny przycisk i zostało to przepisane

4:02przez jquery to niestety nam dużo nie mówi bo nie wiemy gdzie w naszym kodzie

4:06przypisaliśmy takie zdarzenie ale chrome devtools potrafi tutaj współpracować

4:10z różnymi bibliotekami i frameworkami i jeżeli zaznaczymy tę opcję to wykluczy

4:14już jquery a pokaże nam gdzie w naszym skrypcie zauważ przypisaliśmy

4:18do tego elementu zdarzenie kliknięcia więc to również jest bardzo przydatne jeżeli chcesz

4:22na konkretnym elemencie zobaczyć jakie zdarzenia zostały do niego przypisane i

4:27wtedy będziesz mógł je sobie po prostu zdebugować jeżeli ich będzie za dużo albo będzie

4:31jakieś które będzie sprawiało ci problemy powiedzmy klikasz na jakiś element i wykonuje się

4:35zbyt wiele akcji których ty tam nie przypisałaś wtedy sobie tutaj zerknij

4:39jakie inne skrypty mogły przypisać na przykład zdarzenie kliknięcia do tego elementu