Visual Studio Code: Debugowanie aplikacji Node.js

1.42+

0:00W tej lekcji pokażę ci że vs code ma wbudowany debugger

0:04dla języka javascript i jak proste jest z niego korzystanie powiem ci od

0:08razu że to jest szczególnie przydatne wtedy kiedy piszesz aplikację takie backendowe czyli aplikacje

0:13w node js bo kiedy mamy aplikację uruchamiane w przeglądarce internetowej to

0:17już przeglądarka oferuje nam naprawdę dobre narzędzia do debugowania zauważ że

0:21ja tutaj mam aplikację bardzo prostą napisaną z uzyciem express czyli

0:25frameworka ona wygląda tak że jak ją uruchomimy mamy serwer na porcie

0:293000 kiedy przejdziemy na jego stronę główną to zobaczymy hello

0:33world więc możemy to uruchomić z poleceniem node node index

0:37js i widzimy że serwer się uruchomił swoją

0:41drogą kod tej aplikacji wziąłem po prostu z przykładu z

0:45dokumentacji express żeby była jak najprostsza teraz jeżeli sobie tutaj przyjdę pod localhost

0:503000 czyli odświeże mamy standardowe hello world oczywiście

0:54prawdziwe aplikacje byłyby dużo bardziej zaawansowane wyobraź sobie że tutaj mamy jakieś

0:58metody które zaciągają funkcje czyli importują jakieś funkcje z innych plików

1:03i tak dalej i chcielibyśmy to zdebugować bo z jakiegoś powodu nie wiemy czy jakaś

1:07funkcja jest wykonywana albo jakie rzeczy znajdują się na obiekcie który

1:11otrzymaliśmy z api i tak dalej więc control c zatrzymam to i pokażę ci jak

1:15możemy to zrobić lepiej albo jak byśmy to zrobili w taki najprostszy

1:19sposób który nie jest optymalny zrobiłbym tutaj console log gdybym chciał podejrzeć

1:23co mamy w obiekcie request i znowu bym uruchomił tą aplikację

1:27node index nie musimy nawet podawać rozszerzenia i jak teraz tutaj odświeżymy

1:32i wrócimy to ten console.log właśnie w tym terminalu się wykonał natomiast jak na to

1:36to spojrzysz to sam widzisz że trudno tutaj będzie znaleźć to czego

1:40dokładnie szukaliśmy jeżeli był by to prosty obiekt jsonowy to sytuacja

1:45wyglądałaby inaczej control c to zatrzymam i pokażę ci że my możemy tutaj

1:49podobnie jak w przeglądarkach internetowych dodać sobie break point naciskając

1:53tutaj na tą czerwoną kuleczkę w której linijce chcemy i może być ich ile chcemy i

1:58teraz mamy taki oto breakpoint będę chciał tą aplikację uruchomić ale już

2:02nie z poziomu terminala ale z poziomu vs code czyli nacisnę sobie

2:06command shift d żeby przejść do panelu debug to jest tutaj możesz

2:11również przejść do view i do debug i tutaj będę chciał nacisnąć launch

2:15program vs code wie co ma zrobić wie jak ten program uruchomić więc

2:19po prostu naciskam i jeżeli sobie otworzymy teraz debug console to

2:24zauważ że tutaj został zostało nasze console.log tutaj wyświetlone

2:29to które jest z aplikacji i debug console jest uruchomione okej no

2:33i teraz co tutaj się dzieje na razie nic ale w momencie kiedy

2:37ten kod będzie wykonywany czyli kiedy wykonamy z przeglądarki zapytanie breakpoint

2:41zatrzyma nas w tym miejscu czyli odświeżam zauważ że przeglądarka nie otrzymała

2:46odpowiedzi bo nasz kod się można powiedzieć zatrzymał przeniosło nas tutaj do vs code oczywiście

2:51po jakimś czasie przeglądarka safari porzuci to zapytanie bo uzna że

2:55zbyt długo czeka na odpowiedź serwera ale to nie jest teraz istotne istotne że kod się

2:59zatrzymał w tym miejscu i teraz możemy z boku sobie podejrzeć wszystkie

3:03zmienne jakie tutaj mieliśmy czy cały nawet call stack czyli skąd

3:07się to wszystko wzięło co zostało po kolei uruchomione i teraz to co jest ważne mogę sobie

3:11podejrzeć obiekt request i jak widzisz dużo czytelniejsze to jest mogę

3:15zobaczyć jakie są nagłówki czyli jakie było zapytanie przeglądarki

3:20safari wysłane do tego serwera i tak dalej w ten sposób można dużo dużo prościej wszystko

3:24podejrzeć i tak jak wspomniałem gdybyśmy tutaj mieli wiele plików z innego pliku zaimportowali

3:29byśmy jakąś funkcję która jest gdzieś tutaj wykonywana to moglibyśmy zobaczyć czy

3:33w tej funkcji czy ta funkcja jest w ogóle wykonywana to znaczy w zupełnie innym

3:37pliku mógłbyś podstawić breakpoint następnie wykonać tę aplikację czyli

3:41uruchomić ją i vs codeprzeniósł by nazwę tego pliku pokazując nam co

3:45tam się dzieje jakie mamy lokalne zmienne i tak dalej wszystko sobie tutaj można

3:50jak widzisz podejrzeć mamy również całe wszystkie globalne zmienne

3:54i jakie w tym miejscu byłyby w kodzie dostępne zobaczmy

3:58safari jeszcze tego nie porzuciło więc możemy tutaj kliknąć żeby kontynuować i

4:03safari otrzymało odpowiedź dlatego że jakby puściliśmy ten breakpoint on dalej tutaj

4:07jest ale aplikacja się wykonała natomiast jeżeli jeszcze raz tutaj

4:11sobie ją uruchomimy znowu nas zatrzymało w tym miejscu i możemy jeszcze zrobić coś

4:15takiego jak tutaj step into i step out naciśnijmy step

4:19into i jak widzisz przeskoczymy teraz w ogóle do kodu który nie pisaliśmy czyli do

4:23kodu frameworka express i po kolei będziemy mogli widzieć wszystko co się tutaj dzieje za

4:28pomocą z kolei tej ikonki będziemy mogli robić step over czyli przeskakiwać

4:32o takie większe fragmenty kodu tak by to wyglądało i

4:36możemy dokładnie zobaczyć co się dzieje nawet w tym frameworku express w momencie kiedy ktoś

4:40wchodzi na naszą stronę i wykonuje naszą aplikację natomiast mogę

4:45tutaj nacisnąć to aby jakby przejść dalej czyli kontynuować cały

4:49kod się wykona i tutaj znowu odpowiedź została zwrócona tych breakpointów oczywiście

4:53można dawać więcej gdybym ja sobie tutaj zrobił na przykład var a równa

4:57się albo po prostu zadeklarował a dodał breakpoint w tym miejscu następnie

5:02zrobimy sobie a równa się 10 i dodamy breakpoint w

5:07tym miejscu okej może tutaj i

5:11następnie jeszcze tutaj zróbmy

5:16to tak i tak musimy zapisać ten plik i jeszcze tutaj musimy zatrzymać

5:20to debugowanie okej w ten sposób i jeszcze raz tutaj uruchomimy cały

5:25nasz proces klikniemy tutaj teraz odświeżę

5:29w tym miejscu znowu nas zatrzymało i zauważ że mamy a undefined

5:33na tym etapie jeżeli teraz kliknę sobie tutaj przeskoczymy do kolejnego naszego breakpointu

5:37już widzimy że na tym etapie w kodzie a miało wartość 10 jeżeli

5:42kliknę jeszcze raz okej wyskoczyliśmy tutaj

5:46otrzymaliśmy odpowiedź jak zatem widzisz takie debugowanie

5:50aplikacji napisanych w node jest tutaj bardzo proste co ważne

5:54tutaj dla nas jest generowany jak to naciśniemy taki launch configuration on

5:58wygląda w ten sposób i tutaj jak widzisz vs code się domyślił że chodzi nam o uruchomienie

6:03programu pod index js w razie czego

6:07można sobie to tutaj również dostosować można zmieniać te nazwy bo jeżeli będziemy mieli

6:11kilka takich programów tutaj czyli kilka otwartych można powiedzieć folderów

6:15z projektami to będzie można je tutaj wybierać z takiego dropdowna wtedy można sobie te nazwy

6:19dostosować natomiast jak widzisz samo debugowanie jest bardzo proste i nie musimy

6:23nawet opuszczać edytora żeby tego dokonać