Moduł 08 – Debugger

Nie da się napisać kodu bez błędów, więc musimy sobie z nimi radzić. Do takich zadań jesteśmy "uzbrojeni" w narzędzie o nazwie "debugger", który pomaga nam te błędy zlokalizować. Umysł człowieka jest bardzo "jednowątkowy" - nie potrafi skupić się na wielu rzeczach naraz. Często zdarza się, że pisząc nowy kod, zepsujemy stary, albo nie mamy pojęcia, dlaczego kod, który w jednym miejscu działał, w innym nie działa. Za pomocą wbudowanego w przeglądarkę narzędzia debuggera, dowiemy się jak rozwiązywać takie problemy! 🐛

📚 Zawartość modułu

Moduł "Debugger" jest podzielony na 15 lekcji:

1. Wstęp: Wprowadzenie do debuggowania kodu i znaczenia narzędzia debugger.
2. Aplikacja do debuggowania: Stworzenie aplikacji z błędami do omówienia w dalszej części kursu.
3. Log, info, dir, warn, error: Wykorzystanie różnych funkcji logowania i wyświetlania komunikatów diagnostycznych.
4. Group, groupEnd, groupCollapsed: Wykorzystanie grupowania komunikatów diagnostycznych dla lepszej organizacji i czytelności.
5. Time, timeEnd: Mierzenie czasu wykonywania konkretnych fragmentów kodu w celu optymalizacji.
6. Table, assert: Wykorzystanie tabel i asercji do prezentowania danych i sprawdzania warunków w procesie debuggowania.
7. Kolorowanie logów CSS-em: Wykorzystanie stylów CSS do kolorowania komunikatów diagnostycznych dla lepszej czytelności.
8. Błędy w JS: Omówienie różnych rodzajów błędów w języku JavaScript i sposobów ich obsługi.
9. try .... catch ... finally: Wykorzystanie bloków try, catch i finally do przechwytywania i obsługi wyjątków w kodzie.
10. Obsługa błędów w aplikacji: Omówienie strategii obsługi błędów w aplikacjach, w tym logowania, wyświetlania komunikatów użytkownikowi i zabezpieczania aplikacji przed awariami.
11. Zakładka sources, debugger, breakpoints, scope, watch: Wykorzystanie zakładki "sources" w przeglądarce, debuggera, punktów przerwania, zakresu zmiennych (scope) i obserwowania wartości zmiennych (watch) w procesie debuggowania.
12. Śledzenie wykonania kodu — call stack: Poznanie mechanizmu śledzenia wywołań funkcji w kodzie (call stack) w celu zrozumienia kolejności wykonywania instrukcji.
13. Śledzenie wykonania kodu — step, step in or out of next function call: Wykorzystanie krokowego śledzenia wykonania kodu, wchodzenia do funkcji lub wychodzenia z funkcji w celu dokładnego analizowania działania kodu.
14. Modyfikacja aplikacji do debugowania: Naprawianie błędów w aplikacji stworzonej na początku modułu.
15. Drzewo DOM, omówienie tutorialu z Google: Omówienie tutorialu od Google na temat debuggowania i inspekcji elementów strony poprzez drzewo DOM (Document Object Model).

👀 Zobacz przykładową lekcję z tego modułu kursu:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!