Błędy przeglądarki zostały zarejestrowane w konsoli

Większość przeglądarek ma wbudowane narzędzia dla deweloperów. Narzędzia dla programistów zwykle zawierają konsolę. Konsola zawiera informacje o stronie, która jest obecnie uruchomiona.

Wiadomości rejestrowane w konsoli pochodzą od deweloperów stron internetowych lub z samej przeglądarki. Wszystkie komunikaty konsoli mają poziom ważności: Verbose, Info, Warning lub Error. Komunikat Error oznacza, że na stronie występuje problem, który musisz rozwiązać.

Jak kończy się niepowodzeniem audyt błędów przeglądarki w Lighthouse

Lighthouse oznacza wszystkie błędy przeglądarki zarejestrowane w konsoli:

Kontrola Lighthouse pokazująca błędy przeglądarki w konsoli.

Jak naprawić błędy przeglądarki

Napraw każdy błąd przeglądarki zgłoszony przez Lighthouse, aby mieć pewność, że strona działa zgodnie z oczekiwaniami wszystkich użytkowników.

Narzędzia deweloperskie w Chrome zawierają kilka narzędzi, które pomogą Ci znaleźć przyczynę błędów:

  • Pod tekstem każdego błędu w konsoli Narzędzi deweloperskich wyświetla się stos wywołań, który spowodował wykonanie problematycznego kodu.
  • W prawym górnym rogu każdego błędu znajduje się link do kodu, który go spowodował.

Na przykład ten zrzut ekranu przedstawia stronę z 2 błędami:

Przykład błędów w konsoli Narzędzi deweloperskich w Chrome

W tym przykładzie pierwszy błąd pochodzi od programisty, który zadzwonił pod numer console.error(). Drugi błąd pochodzi z przeglądarki i wskazuje, że zmienna używana w jednym ze skryptów na stronie nie istnieje.

Pod tekstem każdego błędu konsola Narzędzi deweloperskich wskazuje stos wywołań, w którym występuje błąd. Na przykład w przypadku pierwszego błędu konsola wskazuje, że funkcja (anonymous) wywołała funkcję init, która wywołała funkcję doStuff. Kliknięcie linku pen.js:9 w prawym górnym rogu tego błędu spowoduje wyświetlenie odpowiedniego kodu.

Sprawdzanie w ten sposób odpowiedniego kodu dla każdego błędu może pomóc w zidentyfikowaniu i rozwiązaniu potencjalnych problemów.

Jeśli nie możesz ustalić przyczyny błędu, wpisz jego tekst w wyszukiwarce. Jeśli nie możesz znaleźć rozwiązania problemu, spróbuj zadać pytanie na Stack Overflow.

Jeśli nie możesz naprawić błędu, rozważ umieszczenie go w instrukcji try...catch aby wyraźnie wskazać w kodzie, że masz świadomość problemu. Możesz też użyć bloku catch, aby lepiej obsłużyć błąd.

Zasoby