Nowoczesny React: Debugger w WebStorm / Idea

0:00Czasami w naszej aplikacji mamy chęć zobaczenia jak ona działa, bez

0:04konieczności konsultowania wszystkiego, co mamy wewnątrz.

0:08Czyli są pewne informacje, na przykład takie jak data.

0:10Chcielibyśmy zobaczyć, co faktycznie tutaj się znajduje i zamiast konsolidować to czy

0:16konsolidować, chcielibyśmy zobaczyć, czym jest data, jak ona wraca tutaj stąd.

0:21Natomiast jak to zrobić?

0:23Moglibyśmy sobie pomyśleć, że ok, można by było debugować aplikację.

0:27Czyli jeśli postawię sobie tutaj tak zwanego break pointa, no to jakby naiwnie

0:32myśląc, mógłbym założyć, że jeżeli teraz odświeżę aplikację, to ona mi się

0:36zatrzyma dokładnie w tym miejscu.

0:38Niestety tak to nie działa.

0:40Nie działa tak dlatego, że debugger nie został jeszcze ustawiony,

0:44żeby ustawić debugger.

0:45I to niezależnie od tego, czy mamy do czynienia z aplikacją Reactową,

0:49czy z inną frontendową aplikacją.

0:51Potrzebujemy dwóch rzeczy.

0:52Po pierwsze musimy znać adres lokalnego deweloperskiego serwera, czyli to jest

0:57nasz serwer właśnie z naszym frontendem.

1:00Czyli tutaj mamy na tym porcie 5.173 Osadzony serwer deweloperski i tutaj

1:06będziemy chcieli się podczepić. To jest pierwsza rzecz.

1:08A druga rzecz to faktyczne uruchomienie debuggera.

1:10Jeśli chodzi o narzędzia typu JetBrains, czyli Web Store Intelligence,

1:15robimy to w Edit Configuration i tutaj dodajemy sobie JavaScript Debug.

1:20Trzeba tutaj w tych konfiguracjach znaleźć sobie.

1:22JavaScript debug i tutaj potrzebujemy jak najbardziej tego adresu.

1:26Jest on konieczny, żeby debugger wiedział na jakim serwerze ma się ustawić,

1:31na jakim porcie i gdzie dokładnie.

1:33Czyli innymi słowy nasze dev musi cały czas pracować, żeby zadziałał debugger.

1:38Inaczej niestety to nie zadziała.

1:41Można sobie nazwać to na przykład debug tutaj ok.

1:44I uwaga klikamy tego robaczka nie znaczek play, tylko klikamy w ten

1:48znaczek robaczka tutaj.

1:49I teraz zauważ, że debugger nam się uruchamia w tym miejscu

1:54uruchomi nam nową przeglądarkę.

1:55Ta przeglądarka osadzi się na porcie 5173 i tutaj już mamy posting debugger.

2:01No i teraz mamy całą gamę możliwości, dlatego, że możemy chociażby

2:05modyfikować to data.

2:06Co by było gdybym ja tutaj chciał sobie zmodyfikować to data?

2:09Zrobił setValue.

2:11Ale na przykład chciałbym zmodyfikować sobie cały obiekt, czyli robimy sobie

2:15tutaj setValue i zrobimy sobie, że tu jest name i ID np.

2:202 Wtedy zobaczymy sobie to ewentualnie na kluczu.

2:24W momencie gdy kliknę Play to aplikacja pójdzie dalej.

2:28Co by było gdybym chciał sobie ją zatrzymać?

2:30Wystarczy, że będę miał kolejny breakpoint.

2:33Zauważ, że jeśli ustawię sobie kolejny breakpoint na przykład tutaj finally,

2:36wiemy o tym, że catch się nie wywoła, dlatego, że tutaj nie

2:40mamy żadnego jeziora.

2:41Możemy sobie podejrzeć te dane, które tutaj do nas przyszły i

2:45analizować je sobie krok po kroku.

2:47Natomiast zobacz, że tutaj możemy sobie przejść dalej.

2:50Mam breakpoint i jak gdyby puszczam dalej aplikację.

2:53Ona jest właśnie tutaj.

2:55Mógłbym też wykorzystać coś innego, to znaczy, gdybym wyszedł na

2:59chwilę z wywołania tego efektu.

3:01Zobacz, zrobił sobie taki step over, to jesteśmy w tym miejscu.

3:05Nie kliknąłem play dlatego, że nie mam kolejnego breakpointa.

3:08Co prawda zatrzymałoby się to w tym miejscu dlatego, że komponent, przypomnę

3:12ci używa Strict moda, więc stick modem opakowany komponent będzie

3:16uruchamiał się dwukrotnie.

3:19Przypominam Ci o modzie, który mamy tutaj właśnie w naszym main, czyli

3:22mamy React Strict mode.

3:24Polecam Ci znaleźć w dokumentacji jak dokładnie będzie

3:28zachowywał się Strict mode.

3:29Mamy tutaj to w Reference dokumentacji React DIV i tutaj musimy sobie

3:34znaleźć components i Strict mode.

3:37Tutaj będzie opisane dokładnie jak on działa.

3:40Mamy tutaj też fantastyczne przykłady dlaczego właśnie potrzebujemy

3:43tego strikte moda.

3:44Mamy też przykłady, że nie musi on być na rucie naszej aplikacji, może być tylko we

3:49fragmencie, jeśli byśmy chcieli i tam gdzie sobie projektujemy.

3:52Tutaj jest taki fajny przykład, który pokazuje co się dzieje,

3:56jeżeli zastosujemy mutację.

3:58Czyli tutaj mamy pusha i mamy pewne problemy.

4:02Ale to wszystko okaże się w momencie, w którym obejrzysz sobie właśnie ten

4:07fragment dokumentacji, przejdziesz przez niego.

4:08Polecam Ci właśnie tutaj dla React Strict Mode.

4:11Wróćmy do naszego debuggera.

4:13Nasz debugger jest osadzony w innym oknie przeglądarki.

4:17I tutaj możemy sobie wrócić do Execution Pointa.

4:20Możemy to sobie zrobić stąd i tutaj.

4:23Show Execution point. Zobacz.

4:25Jestem zupełnie gdzie indziej.

4:27Robię show Execution Point i jestem w tym miejscu, w którym zatrzymałem się

4:32z debugowanie mojej aplikacji.

4:34I chciałbym tutaj na przykład zostawić sobie to loading people.

4:37Jak to mogę zrobić?

4:38Mogę wywołać sets loading z wartością true.

4:41I okazuje się, że jest taka szansa.

4:44Mogę zrobić evaluate expression i jeśli zrobię evaluate expression set is loading

4:49i wrzucę sobie to na true, to ten kod jak najbardziej może się wykonać.

4:54Zobaczmy Teraz puśćmy tą aplikację dalej.

4:57Ona ma drugi render, więc jak gdyby zatrzyma nam się w tych dwóch punktach.

5:03No i teraz tak.

5:04Okazuje się, że zatrzymałem sobie tą aplikację przy pierwszej kolejce, czyli w

5:08momencie gdy pierwszy raz się renderowała.

5:10Czyli pierwsze wywołanie tego efektu.

5:12Dlatego moje zmiany nie mają tutaj miejsca na widoku.

5:15Zobaczmy jak to sobie zrobić poprawnie, Jeśli jeszcze raz to odświeżymy.

5:19No to tu mamy ten pierwszy cykl i jego sobie pominiemy.

5:22Czyli to jest raz. I dwa.

5:24I teraz w drugim spróbujmy sobie w data coś podmienić.

5:27Na przykład to Ewa.

5:28Mogę sobie rozwinąć w data.

5:31I tutaj w Name zróbmy sobie set value i jako Chris.

5:35Przejdźmy sobie dalej.

5:37I tutaj wyjdziemy sobie z tego Józefa.

5:40Tu tylko po to, żeby wykonać sobie evaluate expression jeszcze raz, czyli

5:45tutaj możesz sobie podejrzeć to, co było ostatnio wykonywane tutaj z

5:50tego selecta rozwijanego tutaj.

5:51Możemy sobie to zrobić i evaluate.

5:54I zobaczmy jak to będzie działać.

5:56Zobacz, że tutaj mam już loading people, bo to był ten drugi raz, kiedy już

6:00komponent nie był wywołany za pierwszym razem w modzie.

6:04Za drugim razem już był wyrenderowany, więc mamy loading people.

6:07To zostało dlatego, że podmieniłem se this loading na true.

6:10Pomimo tego, że to wszystko się już wykonało, to jak gdyby jeszcze

6:13raz wywołałem ten seter.

6:15No i druga sprawa Ewa jest podmieniona tutaj na wartość.

6:18Chris.

6:18Dlatego, że podmieniliśmy sobie to data, które tutaj było ustawiane i w ten

6:23sposób możemy korzystać z debuggera.

6:25W ten sposób możemy sobie ustawiać breakpointy.

6:27Te breakpoint mogą być też enable disable, Czyli na przykład chcesz wiedzieć, że

6:33podczas debugowania aplikacji korzystasz z tych dwóch, ale w tym momencie nie chcemy,

6:38żeby aplikacja się tam zatrzymywała.

6:39Czyli generalnie odświeżamy sobie i Enable disable Breakpoint znaczy mniej więcej

6:44tyle, że po prostu jeżeli on jest disabled, no to wtedy jakby

6:48nie zatrzyma nam aplikacji.

6:50Częsty use case wykorzystania debuggera to moment, w którym wywołujemy jakieś akcje.

6:55Bardzo często zauważysz, że dużo szybciej będzie Ci użyć debuggera, na przykład w

6:59momencie, w którym sobie zrobimy tutaj ad Person page i chcielibyśmy sobie zobaczyć,

7:04co dokładnie będzie w handleSubmit, co jest pod value.

7:08Chcemy to bardzo szybko zobaczyć, więc tutaj ustawiamy sobie breakpoint.

7:11I teraz w momencie, w którym klikamy Add widzimy wyraźnie, że to handle

7:16submit się nie wywołuje.

7:17Dopiero jak tutaj wpiszę jakieś wartości i wtedy kliknę tutaj add widzimy, że to

7:23się zatrzymało i widzimy dokładnie, co reprezentuje sobą obiekt Values.

7:28Mamy tutaj dostęp do Outer Scope.

7:30Czyli zobacz, że mamy tutaj Unknown Scope.

7:32Czyli to jest scope, który aktualnie tutaj nam działa.

7:36W środku mamy jakiś local scope, którym mamy handle submit i tutaj mamy

7:41values jako person name i email.

7:42Widzimy dokładnie co się dzieje.

7:44Dodatkowo możesz tutaj sobie wpisać nazwę np.

7:48Values i chcemy sobie to values obserwować.

7:51Tutaj dajesz wartość jakiegoś identifiera, czyli może być to zmienna, może być to

7:58stała, może być to nazwa funkcji, którą spodziewasz się mieć w

8:02danym scope, którym scope.

8:04No właśnie nie wiadomo. No właśnie.

8:07Może to być dowolny scope.

8:08Czyli jeżeli w scope, który jest aktualnie ta wartość występuje, to dostaniesz jak

8:15gdyby uzupełnienie tej wartości, co ona tutaj w sobie ma.

8:18Innymi słowy, jeżeli przejdziemy gdzieś dalej, czyli zrobilibyśmy sobie

8:22breakpointa w jakimś innym miejscu, to wtedy okazałoby się, że jeżeli byśmy

8:26przeszli dalej, to to już nie będzie miało wartości.

8:29Albo jeżeli ten breakpoint będzie w miejscu, w którym nie ma value.

8:32Na przykład w Validator możemy zobaczyć sobie, kiedy validator

8:35się wywołuje, prawda?

8:36Więc tutaj weźmy sobie Hope.

8:39Tutaj akurat też mamy values, więc będziemy mieli person name jako i email

8:44jako puste, bo akurat tak się złożyło, że w tym scope mamy values i w tym scope też

8:49mamy coś, co reprezentowane jest jako nazwa values.

8:53Spróbujmy sobie po prostu podejrzeć w takim układzie actions.

8:57Zobacz, jeżeli tutaj dopisze sobie actions do tej mojej wartości, którą chciałbym

9:02sobie tutaj obserwować, no to mamy Reference error actions is not defined.

9:07W przeciwieństwie do tego, jakbym tutaj chciał dopisać kolejną osobę.

9:11Spróbujmy sobie tutaj zastosować tę sztuczkę, z tym, że ten właśnie

9:15będzie disable i tutaj będzie Włodek.

9:18I spróbujmy go sobie dodać.

9:20To zobacz, że tutaj mamy z kolei actions, czyli mamy reset form ValidateForm,

9:25ValidateFieldsets i tak dalej, i tak dalej.

9:28Mamy tutaj całą gamę API, którą dostarcza formik, jesteśmy w stanie

9:32sobie to podejrzeć.

9:33Tutaj z tego miejsca widzimy jakie akcje możemy wywołać i tylko dlatego, że tutaj w

9:39tym Scope actions jest i my mamy breakpoint, jesteśmy w stanie sobie

9:43właśnie tutaj podejrzeć takim właśnie Watcher kiem.

9:46Tutaj jesteśmy w stanie wymienić sobie te identifier y, które chcielibyśmy

9:50mieć tutaj w tym konkretnym zakresie.

9:53I tak w tych zakresach, w których będziemy mieli breakpointa.

9:56Jeżeli to się nam zatrzyma, będziemy to właśnie widzieć.

9:59Podsumowując musisz mieć działający serwer, musisz mieć konfigurację.

10:04Jeżeli ta konfiguracja będzie dostępna i uruchomimy ją sobie tutaj.

10:07Z tego robaczka możemy sobie też ten debugger zatrzymać później.

10:11No to zauważ, że wszystko działa nam poprawnie.

10:14Debugger zatrzymany.

10:15Mamy tylko tą naszą początkową otwartą przeglądarkę.

10:18Natomiast musimy się tylko i wyłącznie upewnić, że nasz serwer działa i możemy

10:23sobie podłączyć konfigurację Debug.

10:25Narzędzia JetBrains działają tak, że jeżeli te konfiguracje mamy ustawione

10:28tutaj, to one z nami zostają, więc nie musimy tego konfigurować ponownie.

10:32Tylko w tym projekcie będziesz miał dostępną tą konfigurację debug.