Nowoczesny React: Debugger w Visual Studio Code

0:00Jeśli chodzi o osadzenie debuggera.

0:01W przypadku Visual Studio Code, to obowiązuje tu podobna reguła, jaką

0:06mieliśmy w przypadku osadzenia dowolnego debuggera.

0:09Czyli zauważ, że tutaj na localhost 5.173, jeśli chcemy osadzić debugger dla

0:15frontendu, musi działać po prostu nasz serwer deweloperski, więc

0:19muszę go sobie uruchomić.

0:21Jeśli serwer działa i jest to potwierdzone.

0:23Możemy sobie zostawić ten taki stan gdzie mamy network error.

0:26Spróbujemy sobie właśnie to debugować, czyli tutaj powodem naszego debugowania

0:31będzie co się tam dzieje i zobaczmy sobie to nasze people page.

0:36Mamy tutaj error, więc spróbujmy sobie postawić breakpoint chociażby w tym

0:40miejscu i zróbmy sobie takie zadanie, w którym to network error

0:44będziemy sobie modyfikować.

0:46Czyli chcemy sobie przeedytować ten zapis tutaj na jakiś inny.

0:50Postawienie samo breakpoint oczywiście.

0:53No naiwne podejście, nie mamy czegoś takiego.

0:56To nie będzie działać.

0:57Out of the box jak to się mówi.

0:59Jeśli chodzi o Visual Studio Code, to tutaj dawniej było tak, że mieliśmy

1:03extension i ten extension był odpowiedzialny po prostu za debugger.

1:07Teraz od jakiegoś czasu już nie musimy w ogóle instalować dodatkowych extensions.

1:12Po prostu tutaj mamy specjalny panel.

1:15Rundebug.

1:17I teraz możemy sobie tutaj kliknąć na Run and Debug i przygotujmy sobie nie NodeJS,

1:22bo nie jest nam potrzebny, tylko mamy Web app, na przykład Chrome.

1:26I teraz tutaj na tym Chromie jesteśmy w stanie się połączyć.

1:30Ale oczywiście musimy zdefiniować odpowiedni port i to będzie w naszym

1:36przypadku localhost 5.173. Czyli zobacz ta sama zasada jak w przypadku

1:41narzędzi JetBrains.

1:42Musimy mieć po prostu do czego się podczepić.

1:45No i definiować w którym miejscu w takim układzie, jeśli teraz uruchomimy to tutaj

1:50w Start Debugging powinniśmy znowu zobaczyć nową przeglądarkę.

1:55Ta przeglądarka powinna się otworzyć i nasz breakpoint powinien zadziałać.

2:00Czyli zobacz, znajdujemy się dokładnie w tym miejscu, w którym mamy problem,

2:04dlatego, że została wywołana ta funkcja get people.

2:08Ta metoda z naszego People service.

2:11I teraz jakby złapaliśmy sobie tutaj błąd.

2:14Mamy bardzo podobny look and field, czyli tutaj wszystkie elementy są bardzo

2:19podobne, to znaczy mamy play, mamy tutaj step over.

2:22Step, step out.

2:24I możemy sobie albo zrestartować, albo zatrzymać cały proces debuggingu.

2:29Zwróć uwagę, że mamy tutaj wylistowane break pointy.

2:32Możemy je sobie też mutować.

2:33Jeśli chcielibyśmy to zrobić, to wystarczy sobie to odczepić tutaj i wtedy, jak gdyby

2:38ten breakpoint nie będzie miał miejsca w momencie, gdy ja na przykład

2:42odświeżę tą aplikację. No nie?

2:44Czyli tutaj po odświeżaniu powinien mi się debugger zatrzymać, ten breakpoint.

2:47Ale jak widzisz on jest taki wyszarzony dlatego, że jest nieaktywny.

2:50Mogę go sobie aktywować i jeszcze raz odświeżyć aplikację.

2:53Ładujemy wszystko od początku.

2:55Moglibyśmy też tutaj skorzystać z routingu.

2:57Gdybyśmy skorzystali z routingu, też mielibyśmy taką właśnie zależność, że

3:01uruchomilibyśmy ponownie People Page i wtedy trafilibyśmy w ten user effect.

3:06Spróbujmy sobie to zmodyfikować.

3:08Widzimy, że to jest access error.

3:09Ten error ma jakiś message i ja mogę zrobić sobie tutaj setValue i to

3:14setValue podmienić sobie na coś innego.

3:18Na przykład Cannot find server.

3:21I teraz spróbujmy sobie to puścić dalej.

3:24Tutaj zauważ mamy ten sam problem, czyli jakby drugi raz wywołuje nam się ten

3:29people page i to tutaj powinienem sobie edytować.

3:31Za drugim razem powinienem zrobić set value.

3:34Tu jest coś o czym mówiłem w lekcji poprzedniej, czyli polecam Ci sprawdzić.

3:39Poza tym, że rozmawialiśmy tam o debugerze w Webstormie, jest tam również wyjaśniony

3:44ten street mode, który powoduje, że dwa razy nam się uruchamia nasz

3:48komponent i dlaczego tak się dzieje?

3:50I tutaj weźmy sobie w configu wrzućmy coś takiego jak message cannot find server.

3:57Ok.

3:58I dopiero tutaj to powinno nam zadziałać poprawnie.

4:00Czyli podmieniliśmy ten message, który jest tutaj w Set error message.

4:05Później został on ustalony i w ten sposób możemy sobie działać w

4:08aplikacji, stawiać breakpoint.

4:10Tutaj jest to samo menu, o którym wspominałem w lekcji

4:14poprzedniej, to znaczy watch.

4:16Gdybyśmy tutaj dodali sobie na przykład data, to jeżeli data będzie występowało w

4:21danym sklepie, to będziemy mieli informację na ten temat.

4:24Spróbujmy sobie zrobić dwa breakpoint tutaj i tutaj.

4:28W momencie gdy teraz przejdę sobie do Exchange, wrócę na People.

4:32No to mamy znowu loading I teraz dostajemy tutaj zauważ error.

4:38Ale ponieważ jak gdyby ten error zostaje wywołany tutaj w miejscu,

4:42w którym mamy breakpoint.

4:44Nie mamy dostępu jeszcze do tego data.

4:46Czyli ten breakpoint nigdy nam się nie aktywuje.

4:48To jak gdyby nie widzimy co jest pod tym data.

4:51Możemy sobie to zmienić delikatnie jeszcze raz uruchomić tą aplikację, czyli tutaj

4:57weźmy sobie play i na przykład odświeżymy sobie tą stronę.

5:01Widzimy, że nie mamy jeszcze dostępu do data.

5:03W momencie, w którym jest ten breakpoint to dlatego, że nasz await jeszcze nie

5:08zwrócił nam danych, więc nie mamy jeszcze do tego dostępu.

5:12Spróbujmy sobie w takim wypadku uruchomić serwer, żeby on zadziałał poprawnie.

5:16Czyli w momencie, gdy teraz postawimy backend zobacz, aplikacja jest zatrzymana,

5:20to powinniśmy spodziewać się innych rezultatów.

5:22Dlatego, że w tym momencie, jeszcze przed wykonaniem tego Geta

5:25zatrzymaliśmy aplikację.

5:27Teraz jeżeli klikniemy dalej to zobaczymy, że jest to drugie wywołanie.

5:32I tutaj po odświeżeniu spróbujmy sobie podejrzeć to date jeszcze raz.

5:36Muszę poprawić breakpoint, czyli tutaj odświeżmy sobie, zobacz, że w łaczu mamy

5:41właśnie data i to data moglibyśmy sobie podmienić tylko za drugim wywołaniem,

5:46czyli mamy drugie wywołanie.

5:47I teraz jeżeli cokolwiek tutaj zmienimy, na przykład to ID setValue tutaj możemy

5:52sobie zmienić chociażby na trzy, a tutaj zmienimy sobie set value

5:58datę i możemy puścić aplikację dalej.

6:01Zobaczmy, że tu jest Create.

6:02No i teraz możemy sobie podejrzeć narzędziami deweloperskimi.

6:06Tylko zwróć uwagę na jedną rzecz.

6:08Tutaj mamy kompletnie nową instancję naszej przeglądarki, więc nie mamy dostępu

6:14do naszych narzędzi deweloperskich.

6:16Jeżeli chcesz, musisz sobie tutaj osobno zainstalować te narzędzia deweloperskie,

6:21ponieważ tutaj ich nie instalowaliśmy.

6:24Instalowałem je po prostu w tej instancji przeglądarki, którą mam tutaj.

6:28Czyli taka bazowa, z której korzystam na co dzień.

6:30Tutaj mam React DevTools.

6:32Tutaj musiałbym sobie je doinstalować.

6:34Ale co fajniejsze tutaj download the React dev tools for a better

6:39developer experience.

6:40Mamy tu przed nosem cały czas w trakcie tworzenia tej aplikacji i na pewno już w

6:46konsoli zauważyłeś tą właśnie informację.

6:49Więc warto sobie to kliknąć, zrobić install for Chrome i tutaj mieć też dostęp

6:54do tych narzędzi deweloperskich w trakcie gdy tutaj właśnie rozwijamy

6:58sobie tą aplikację.

7:00Zobaczmy sobie Add to Chrome.

7:03Dodaj rozszerzenie i będziemy w stanie teraz zobaczyć sobie chociażby tego

7:08ID, którego podmieniliśmy sobie.

7:11Choć niestety musimy sobie odświeżyć stronę, żeby narzędzia

7:14deweloperskie nam zadziałały.

7:15Tutaj Deptule z Reacta React Developer Tools.

7:19Możemy sobie tu przyczepić do tego narzędzia debug i podejrzeć sobie.

7:24W momencie gdy sobie edytujemy coś.

7:26Kliknijmy sobie play.

7:28Teraz powinniśmy mieć do nich dostęp i gdybyśmy cokolwiek modyfikowali

7:34debuggerem jesteśmy w stanie sobie to sprawdzić.

7:37Zauważ, że debugger daje nam o tyle elastyczność, że tutaj faktycznie

7:42modyfikujemy sobie stan danych i możemy sobie modyfikować propsy.

7:46Natomiast jeśli chodzi o debugger mamy znacznie szersze możliwości, bo nie tylko

7:51stan i propsy możemy sobie modyfikować.

7:53Możemy sobie modyfikować dowolne wartości i wykonywać w trakcie

7:57działania aplikacji kod.

7:58Przede wszystkim ją zatrzymywać w odpowiednim momencie i analizować.

8:02Więc tutaj jak gdyby developer experience, jeśli chodzi o obydwa te edytory kodu,

8:08zarówno Visual Studio Code, jak i Web Store będą bardzo, bardzo podobne.

8:13Czyli generalnie mamy tutaj developer experience, który nam się powtarza, bo

8:17mamy bardzo, bardzo podobne narzędzia, za pomocą których możemy debugować aplikację.