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:
- Wstęp: Wprowadzenie do debuggowania kodu i znaczenia narzędzia debugger.
- Aplikacja do debuggowania: Stworzenie aplikacji z błędami do omówienia w dalszej części kursu.
- Log, info, dir, warn, error: Wykorzystanie różnych funkcji logowania i wyświetlania komunikatów diagnostycznych.
- Group, groupEnd, groupCollapsed: Wykorzystanie grupowania komunikatów diagnostycznych dla lepszej organizacji i czytelności.
- Time, timeEnd: Mierzenie czasu wykonywania konkretnych fragmentów kodu w celu optymalizacji.
- Table, assert: Wykorzystanie tabel i asercji do prezentowania danych i sprawdzania warunków w procesie debuggowania.
- Kolorowanie logów CSS-em: Wykorzystanie stylów CSS do kolorowania komunikatów diagnostycznych dla lepszej czytelności.
- Błędy w JS: Omówienie różnych rodzajów błędów w języku JavaScript i sposobów ich obsługi.
- try .... catch ... finally: Wykorzystanie bloków try, catch i finally do przechwytywania i obsługi wyjątków w kodzie.
- 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.
- 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.
- Śledzenie wykonania kodu — call stack: Poznanie mechanizmu śledzenia wywołań funkcji w kodzie (call stack) w celu zrozumienia kolejności wykonywania instrukcji.
- Ś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.
- Modyfikacja aplikacji do debugowania: Naprawianie błędów w aplikacji stworzonej na początku modułu.
- 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