Debugowanie JavaScript to kluczowa umiejętność każdego, kto chce zajmować się front-endem. W tej części kursu „JavaScript w praktyce” przyjrzymy się wykrywaniu i naprawianiu błędów w naszej prostej aplikacji – jednak dziś nie dodajemy żadnych nowych funkcji, skupiamy się tylko na temacie jakim jest debugowanie JavaScript. Zobaczmy, jak działają narzędzia do wyłapywania błędów – w edytorze kodu, w konsoli przeglądarki oraz w zakładkach Sources i Network. Dzięki nim szybko „złapiemy” literówki, niezaładowane pliki i inne pułapki w kodzie. Ruszajmy!
Spis treści
- A po co mi testowanie?
- Debugowanie JavaScript w edytorze kodu (VS Code)
- Console.log, przyzywam cię!
- Zakładki Sources i Network – podgląd plików i ładowanie zasobów
- Debugowanie JavaScript a przydatne wtyczki i rozszerzenia
- Ćwiczenie
A po co mi testowanie?
Pisząc kod JavaScript, łatwo wpaść w pułapkę myślenia, że wszystko zadziała za pierwszym razem. Rzeczywistość bywa jednak inna – błędy (tzw. bugi) są nieodłączną częścią programowania. Dlatego tak ważne jest testowanie swojego kodu na bieżąco. Wczesne wykrycie problemu oszczędza nam późniejszej frustracji i godzin spędzonych na szukaniu przyczyny. Innymi słowy: warto być swoim własnym testerem na każdym etapie tworzenia aplikacji.
Debugowanie JavaScript w edytorze kodu (VS Code)
Jeszcze zanim uruchomimy kod w przeglądarce, wiele wskazówek co do potencjalnych błędów może dać nam sam edytor. Visual Studio Code to narzędzie, które oferuje podpowiedzi składni i może ostrzegać przed niektórymi literówkami czy błędami jeszcze zanim odpalimy stronę. Na przykład, VS Code podkreśli na czerwono brakujący nawias lub cudzysłów, a panel „Problems” (Problemy) może wyświetlić komunikat, jeśli wykryje oczywisty błąd składni. Warto zwracać uwagę na te wskazówki i poprawiać kod na bieżąco.
Visual Studio Code ma wbudowane wsparcie do debugowania JavaScript. Aby rozpocząć debug wystarczy otworzyć plik z kodem i ustawić breakpoint w wybranym miejscu – trzeba kliknąć w margines obok numeru linii, jednak jest to bardziej zaawansowana funkcjonalność i jej działanie pokażę Ci w przyszłości.
Console.log, przyzywam cię!
Jednym z najprostszych sposobów, by sprawdzić, co dzieje się w naszym programie, jest skorzystanie z narzędzia, które szybko staje się najlepszym przyjacielem początkujących – console.log. Ta funkcja wypisuje przekazane wartości do konsoli, co pozwala zobaczyć, czy kod wykonuje się prawidłowo. Dzięki niemu możemy wypisać w konsoli przeglądarki informacje, komunikaty i wartości zmiennych, upewniając się, że kod działa zgodnie z oczekiwaniami.
Poniżej widzisz przykład zastosowania console.log w praktyce. Jest to przykład z gatunku „epickich” w JS i z pewnością wrócę do tego tematu w jednej z następnych lekcji 🙂 Zawartość console.log zobaczysz w zakładce Console (Konsola) narzędzi developerskich w przeglądarce (Ctrl + Shift + I lub F12 w Chrome lub Mozilla Firefox na Windows, Mac to Cmd + Option + I).
Logowanie w konsoli możemy sobie urozmaicać używając zamiennie console.error czy console.warn, a w przyszłości może przydać się nam console.table. Więcej o console możesz poczytać w oficjalnej dokumentacji języka JavaScript.
Zakładki Sources i Network – podgląd plików i ładowanie zasobów
Konsola to nie jedyne narzędzie dostępne w przeglądarce. Przy debugowaniu JavaScript przydają się także inne zakładki narzędzi developerskich, zwłaszcza Sources (Źródła) oraz Network (Sieć).
Sources
Sources (Źródła) pozwala podejrzeć wszystkie pliki załadowane przez stronę – HTML, CSS, JS, a nawet obrazki. W kontekście debugowania JavaScript zakładka Sources jest użyteczna, ponieważ możemy w niej podejrzeć nasz plik .js tak, jak widzi go przeglądarka. Jeśli nie jesteśmy pewni, czy przeglądarka na pewno wczytała najnowszą wersję naszego kodu, tutaj to sprawdzimy. Wystarczy rozwinąć listę i znaleźć nasz plik JavaScript. Po kliknięciu zobaczymy jego zawartość. Możemy upewnić się, że zmiany w kodzie się zapisały i załadowały – jeśli nie, warto odświeżyć stronę (czasem przeglądarka może zcache’ować (zapisać w pamięci podręcznej) starszą wersję pliku, wtedy pomaga twarde odświeżenie za pomocą Ctrl+F5).
Zakładka Sources oferuje również możliwość ustawiania breakpointów (punktów przerwania) i krokowego wykonywania kodu, co jest potężną techniką debugowania JavaScript. Dla początkujących może to brzmieć skomplikowanie, ale warto wiedzieć, że taka opcja istnieje. W praktyce polega to na tym, że możemy zatrzymać działanie skryptu w wybranym miejscu (klikając numer linii w pliku, dodamy breakpoint) i prześledzić, co dzieje się dalej krok po kroku – zobaczyć wartości zmiennych w danym momencie, wykonywać kod linijka po linijce. Jednak jak już wspomniałam, jest to narzędzie dla bardziej zaawansowanych.
Network
Kolejna ważna zakładka to Network (Sieć). Ona pokazuje wszystkie zapytania sieciowe i zasoby ładowane przez stronę, wraz z ich statusami. Jak to się ma do debugowania JavaScript? Otóż zdarza się, że nasz plik JavaScript w ogóle się nie załadował – na przykład z powodu literówki w ścieżce <script src="..."> lub dlatego, że zapomnieliśmy go dołączyć do HTML. W zakładce Network łatwo to zauważyć: odśwież stronę (mając otwarte narzędzia developerskie, Network zacznie rejestrować załadowane pliki).
Jeśli wszystko jest OK, na liście powinna pojawić się pozycja odpowiadająca pobranym danym ze statusem 200 (czyli sukces). Jeśli danych lub pliku nie ma lub pojawi się z kodem błędu (np. 404 file not found), wiemy już, gdzie leży problem – trzeba poprawić ścieżkę do skryptu lub nazwę pliku. Network pokazuje także czas ładowania poszczególnych zasobów, co bywa pomocne, gdyby strona długo się ładowała lub jakieś zapytanie (np. do API czyli jakiegoś backendu) trwało zbyt długo.
Debugowanie JavaScript a przydatne wtyczki i rozszerzenia
Na koniec przyjrzyjmy się kilku narzędziom, które mogą uczynić debugowanie JavaScript i pracę z kodem jeszcze przyjemniejszą. Są to wtyczki/rozszerzenia dla edytora lub przeglądarki, które szczególnie przydają się przy tworzeniu prostych stron z JavaScriptem:
- Live Server (VS Code) – jest to rozszerzenie do Visual Studio Code, które pozwala jednym kliknięciem uruchomić lokalny serwer i wyświetlić stronę w przeglądarce. Automatycznie odświeża stronę po zapisaniu pliku. Oszczędza mnóstwo czasu podczas testowania zmian i eliminuje problemy z cache. Jeśli jeszcze go nie używasz, koniecznie wypróbuj – debugowanie JavaScript staje się dużo wygodniejsze, gdy wynik działania kodu jest widoczny od razu.
- JavaScript Errors Notifier (Chrome/Firefox) – to rozszerzenie do przeglądarki, które powiadamia o błędach JavaScript na stronie, nawet jeśli konsola nie jest otwarta. Działa to tak, że gdy na stronie pojawi się błąd JS, ikona rozszerzenia zmieni wygląd lub wyświetli powiadomienie. Dzięki temu od razu wiesz, że coś poszło nie tak, nawet jeśli akurat nie spoglądasz w konsolę. To bardzo przydatne przy testowaniu – zamiast zastanawiać się, czemu strona „nic nie robi”, dostaniesz sygnał, że wystąpił błąd i warto zerknąć w konsolę po szczegóły.
- Better Comments (VS Code) – rozbudowany dodatek do VS Code, który ulepsza wygląd komentarzy w kodzie. Pozwala nadawać im kolorowe oznaczenia w zależności od typu notatki, jaką zawierają. Na przykład, komentarze zaczynające się od
// TODOmogą być wyróżnione, te z!(ważne uwagi) innym kolorem, pytania?jeszcze innym, itd. Dzięki temu łatwiej wychwycić w kodzie istotne notatki, tymczasowe wyłączenia fragmentów czy rzeczy do poprawy. Choć Better Comments nie służy bezpośrednio do znajdowania błędów, to poprawia czytelność kodu, a czytelny kod = mniej błędów i łatwiejsze debugowanie JavaScript. Warto zadbać o porządek w kodzie, a to narzędzie w tym pomaga.
Ćwiczenia
Spróbuj zlokalizować zakładkę Problems w Visual Studio Code, a następnie napisz jakieś losowe rzeczy i zobacz co się stanie. Obiecuję, że nic nie wybuchnie 🙂
Możesz również poeksperymentować z różnymi wariacjami console w swoim kodzie, zobaczyć jak wygląda console.warn czy console.error. Miłej zabawy!