Czym jest konsola przeglądarki?
Konsola przeglądarki internetowej to część narzędzi deweloperskich, która pozwala sprawdzać komunikaty generowane przez stronę lub aplikację webową. Jest szczególnie ważna przy pracy z aplikacjami typu front-end, np. napisanymi w React.js, Angular lub czystym JavaScript.
W konsoli można zobaczyć m.in.:
- błędy JavaScript,
- ostrzeżenia przeglądarki,
- komunikaty wypisywane przez console.log(),
- błędy ładowania plików CSS, JS, obrazów lub API,
- informacje o problemach z bezpieczeństwem, np. CORS.
Dlaczego konsola pomaga w React i Angular?
React i Angular działają po stronie przeglądarki użytkownika. Jeśli aplikacja ma błąd wykonania, np. odwołuje się do nieistniejącej zmiennej albo źle renderuje komponent, przeglądarka może wyświetlić szczegóły błędu właśnie w konsoli.
Przykład błędu JavaScript:
console.log(user.name);
Jeśli zmienna user nie istnieje, w konsoli może pojawić się komunikat typu:
ReferenceError: user is not defined
Jak otworzyć konsolę?
Najczęściej używa się skrótu:
F12,Ctrl + Shift + I,Ctrl + Shift + J.
Następnie należy przejść do zakładki Console.
Ważne na egzaminie
Błędy interpretacji lub wykonania kodu JavaScript w aplikacjach React.js i Angular najczęściej diagnozuje się w konsoli przeglądarki, a nie za pomocą narzędzi serwerowych ani kompilatora języka JavaScript.