0:00 / 0:00

Zaawansowane debugowanie JavaScript i Node.js: Zaawansowane debugowanie JavaScript i Node.js

w Visual Studio Code

27 min · JavaScript · Full-stack i Programowanie

Adam Gospodarczyk

Czego się nauczysz

  • Jak korzystać z console.log
  • Słowo kluczowe “debugger”
  • Wykorzystanie Chrome Dev Tools
  • Debugowanie z Parcel.js
  • Debugowanie w Visual Studio Code
  • Konfiguracja debuggera
  • Debugowanie aplikacji Vue 3
  • Debugowanie aplikacji Nest.js
  • Debugowanie po stronie klienta i serwera

Dlaczego wykorzystanie console.log nie jest dobre?

Jako programiści możemy osiągać niezwykłe wyniki nie tylko poszerzając swoją wiedzę ale również optymalizując pracę, wykorzystując nowoczesne narzędzia i języki. Debugowanie i inspekcja kodu z pomocą console.log() wymaga od nas zaglądania do IDE, potem przeglądarki, wykonywania określonych akcji, sprawdzania zawartości konsoli - i powtarzania tego procesu tak długo, aż znajdziemy rozwiązanie, a często nie następuje to od razu. Nawet jeżeli wydaje się że ta czynność zajmuje nie więcej niż kilka sekund, tak trzeba brać pod uwagę że wykonujemy ją dziesiątki a czasem nawet setki razy, za każdym razem tracąc niepotrzebnie energię i czas.

Debugowanie JavaScript i Node.js

Do debugowania i inspekcji kodu mamy do dyspozycji wiele różnych narzędzi, które pomagają nam eksplorować wartości zmiennych oraz podglądać to jak wykonuje się nasz program. Najpopularniejszym z nich są wbudowane w przeglądarki narzędzia developerskie, które często nie wymagają żadnej konfiguracji do tego aby zacząć z nich korzystać.Alternatywą lub uzupełnieniem są debuggery wbudowane w IDE (np. Visual Studio Code czy WebStorm), które dają nam niemal pełny wgląd w to jak wykonuje się nasz kod i jakie wartości przyjmują zmienne. Narzędzia te często wymagają wstępnej konfiguracji, co stanowi barierę w ich wykorzystaniu - barierę, którą zdecydowanie warto przekroczyć.

Jednoczesne debugowanie po stronie klienta i serwera

Niezwykłą funkcją debuggera kodu JavaScript jest to, że możemy skonfigurować go w taki sposób, aby jednocześnie śledzić komunikację naszej aplikacji zarówno po stronie klienta jak i serwera. Wystarczy odpowiednio skonfigurować debugger dla obu części i potem korzystać z nowych możliwości. Mowa tutaj o debugowaniu aplikacji których back-end napisany jest w Node.js (Express, Nest.js, Hapi) a front-end z wykorzystaniem JavaScriptu lub jednego z frameworków (React, Angular, Vue).

Konfiguracja debuggera

Konfiguracja jest największą przeszkodą do tego aby wykorzystywać debuggery w codziennej pracy. Całkowicie pomijany jest tutaj fakt, że takiej konfiguracji trzeba dokonać tylko raz w ramach konkretnego projektu. Dodatkowo najpopularniejsze frameworki oferują gotowe ustawienia - wystarczy że wkleimy je do naszego debuggera i dostosujemy pojedyncze opcje.

Stań się lepszym programistą

Wykorzystanie zaawansowanych narzędzi do debugowania kodu sprawi że staniesz się po prostu lepszym programistą. Korzyści w postaci oszczędzonego czasu, energii oraz mniejsza sznasa na wystąpienie różnego rodzaju błędów, są czymś co docenisz Ty oraz Twój pracodawca.

Dla kogo jest ten kurs?

Ten warsztat został stworzony z myślą o programistach JavaScript / Node.js, którzy do inspekcji i debugowania kodu wykorzystują metodę console.log i chcą przenieść jakość swojej pracy na kolejny poziom wykorzystując Chrome Dev Tools oraz wbudowane w IDE debuggery.