Komunikaty logu w konsoli

Kayce Basques

Ten interaktywny samouczek pokazuje, jak rejestrować i filtrować wiadomości w konsoli Chrome DevTools.

Ten samouczek należy wykonywać w kolejności. Zakładamy, że znasz podstawy tworzenia stron internetowych, np. jak za pomocą JavaScriptu dodać do strony interaktywność.

Konfigurowanie wersji demonstracyjnej i Narzędzi deweloperskich

Ten samouczek został tak zaprojektowany, aby umożliwić Ci otwarcie wersji demonstracyjnej i samodzielne wypróbowanie wszystkich przepływów pracy. Gdy będziesz aktywnie uczestniczyć w szkoleniu, łatwiej będzie Ci później przypomnieć sobie procesy.

1. Otwórz demonstrację.

2. Opcjonalnie: przenieś prezentację do osobnego okna. W tym przykładzie po lewej stronie znajduje się samouczek, a po prawej – prezentacja.

   

3. Wybierz demonstrację i naciśnij Control + Shift + J lub Command + Option + J (Mac), aby otworzyć narzędzia programistyczne. Domyślnie Narzędzia deweloperskie otwierają się po prawej stronie okna demonstracyjnego.

   

4. Opcjonalnie: dokuj DevTools u dołu okna lub oddokuj je do osobnego okna.

   Narzędzia deweloperskie zadokowane u dołu prezentacji:

   Narzędzia deweloperskie są oddokowane w osobnym oknie:

Wyświetlanie komunikatów zarejestrowanych w JavaScript

Większość wiadomości wyświetlanych w Konsoli pochodzi od programistów internetowych, którzy napisali kod JavaScript strony. W tej sekcji przedstawiamy różne typy wiadomości, które możesz zobaczyć w Konsoli, oraz wyjaśniamy, jak samodzielnie rejestrować każdy z nich za pomocą kodu JavaScript.

1. W prezentacji kliknij przycisk Log Info (Informacje z dziennika). Hello, Console! jest rejestrowany w Konsoli.

   

2. Obok komunikatu Hello, Console! w Konsoli kliknij log.js:2. Otworzy się panel Źródła, w którym zostanie wyróżniony wiersz kodu, który spowodował, że wiadomość została zarejestrowana w konsoli.

   

   Komunikat został zarejestrowany, gdy kod JavaScript na stronie wywołał funkcję console.log('Hello, Console!').

3. Wróć do Konsoli, korzystając z jednego z tych procesów:

   • Kliknij kartę Konsola.
   • Naciśnij Control + [ lub Command + [ (Mac), aż Konsola będzie mieć fokus.
   • Otwórz menu poleceń, zacznij wpisywać Console, wybierz polecenie Pokaż panel konsoli, a następnie naciśnij Enter.

4. W wersji demonstracyjnej kliknij przycisk Zapisz ostrzeżenie. Abandon Hope All Ye Who Enter jest rejestrowany w konsoli.

   

   Wiadomości w takim formacie są upomnieniami.

5. Opcjonalnie: kliknij log.js:12, aby wyświetlić kod, który spowodował sformatowanie wiadomości w ten sposób, a potem wróć do Konsoli. Zrób to, gdy chcesz zobaczyć kod, który spowodował, że wiadomość została zapisana w określony sposób.

6. Kliknij ikonę  Rozwiń Abandon Hope All Ye Who Enter. Narzędzia deweloperskie wyświetlają ślad stosu prowadzący do wywołania.

   

   Ślad stosu informuje, że została wywołana funkcja o nazwie logWarning, która z kolei wywołała funkcję o nazwie quoteDante. Inaczej mówiąc, wywołanie, które nastąpiło jako pierwsze, znajduje się na dole ścieżki śledzenia. W każdej chwili możesz skonfigurować ścieżki stosu, wywołując console.trace().

7. Kliknij Zaloguj błąd. W dzienniku pojawi się ten komunikat o błędzie: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Kliknij Tabela logów. W Konsoli rejestruje się tabela dotycząca znanych artystów.

   

   Zwróć uwagę, że kolumna birthday jest wypełniona tylko w przypadku jednego wiersza. Sprawdź kod, aby dowiedzieć się, dlaczego tak się dzieje.

9. Kliknij Grupa logów. Nazwy 4 słynnych żółwi walczących z przestępczością są pogrupowane pod etykietą Adolescent Irradiated Espionage Tortoises.

   

10. Kliknij Dziennik niestandardowy. W konsoli zostanie zarejestrowany komunikat z czerwoną ramką i niebieskim tłem.

    

Główna idea polega na tym, że gdy chcesz zapisać w Konsoli wiadomości z JavaScriptu, używasz jednej z metod console. Każda metoda formatuje wiadomości inaczej.

Istnieje jeszcze więcej metod niż te, które zostały omówione w tej sekcji. Pod koniec samouczka dowiesz się, jak zapoznać się z pozostałymi metodami.

Wyświetlanie komunikatów zarejestrowanych przez przeglądarkę

Przeglądarka również rejestruje komunikaty w konsoli. Zwykle dzieje się tak, gdy wystąpił problem z tą stroną.

1. Kliknij Przyczyna błędu 404. Przeglądarka rejestruje błąd sieci 404, ponieważ kod JavaScript na stronie próbował pobrać plik, którego nie ma.

   

2. Kliknij Sprawiaj błąd. Przeglądarka rejestruje nieprzechwycony błąd TypeError, ponieważ kod JavaScript próbuje zaktualizować nieistniejący węzeł DOM.

   

3. Kliknij menu Poziomy logowania i włącz opcję Szczegółowe, jeśli jest wyłączona. Więcej informacji o filtrowaniu znajdziesz w następnej sekcji. Musisz to zrobić, aby mieć pewność, że następna wiadomość będzie widoczna. Uwaga: jeśli menu poziomów domyślnych jest wyłączone, konieczne może być zamknięcie paska bocznego konsoli. Aby dowiedzieć się więcej o bocznym pasku konsoli, wybierz poniżej opcję Źródło wiadomości.

   

4. Kliknij Przyczyna naruszenia. Strona przestaje reagować na kilka sekund, a potem przeglądarka rejestruje w konsoli komunikat [Violation] 'click' handler took 3000ms. Dokładny czas trwania może się różnić.

   

Filtruj wiadomości

Na niektórych stronach Konsola jest zalewana wiadomościami. W DevTools masz wiele sposobów na odfiltrowywanie wiadomości, które nie są istotne dla danego zadania.

Ważna informacja: Konsola odfiltrowuje tylko komunikaty wyjściowe, a wszystkie dane wejściowe, które wpiszesz w Konsoli, pozostaną w niej.

Filtrowanie według poziomu logowania

Każdej metodzie console.* przypisany jest poziom ważności: Verbose, Info, Warning lub Error. Na przykład console.log() to wiadomość na poziomie Info, a console.error() to wiadomość na poziomie Error.

Uwaga: pełną listę metod console.* i ich poziomów ważności znajdziesz w dokumentacji interfejsu API konsoli.

Aby filtrować według poziomu logowania:

1. Kliknij menu Poziomy logowania i wyłącz opcję Błędy. Poziom jest wyłączony, gdy obok niego nie ma już znacznika wyboru. Wiadomości na poziomie Error znikną.

   

2. Ponownie kliknij menu Poziomy logowania i ponownie włącz opcję Błędy. Wiadomości na poziomie Error znów się pojawiają.

Ważne: Konsola zawsze zapamiętuje zastosowany filtr z menu. Ustawienia są zachowywane na wszystkich stronach, a także po ponownym załadowaniu strony, Narzędzi deweloperskich i Chrome. Aby szybko zastosować tymczasowy filtr, użyj paska bocznego.

Filtrowanie według tekstu

Jeśli chcesz wyświetlić tylko wiadomości zawierające określony ciąg znaków, wpisz go w polu tekstowym Filtr.

1. Wpisz Dave w polu tekstowym Filtr. Wszystkie wiadomości, które nie zawierają ciągu znaków Dave, są ukryte. Możesz też zobaczyć etykietę Adolescent Irradiated Espionage Tortoises. To jest błąd.

   

2. Usuń Dave z pola tekstowego Filtr. Wszystkie wiadomości pojawią się ponownie.

Filtrowanie według wyrażenia regularnego

Jeśli chcesz wyświetlać wszystkie wiadomości, które zawierają wzór tekstu, a nie konkretny ciąg znaków, użyj wyrażenia regularnego.

1. Wpisz /^[AH]/ w polu tekstowym Filtr. Wpisz ten wzór w RegExr, aby uzyskać wyjaśnienie, jak działa.

   

2. Usuń /^[AH]/ z pola tekstowego Filtr. Wszystkie wiadomości są ponownie widoczne.

Filtrowanie według źródła wiadomości

Jeśli chcesz wyświetlić tylko wiadomości pochodzące z określonego adresu URL, użyj paska bocznego.

Ważne: filtry na pasku bocznym są tymczasowe. Konsola nie zachowuje takich filtrów na wszystkich stronach ani po ponownym załadowaniu strony, narzędzi deweloperskich i Chrome.

1. Kliknij Pokaż pasek boczny konsoli.

   

2. Kliknij ikonę Rozwiń obok opcji 12 wiadomości. Pasek boczny zawiera listę adresów URL, które spowodowały zarejestrowanie wiadomości. Na przykład log.js spowodowało 11 wiadomości.

   

Filtrowanie według wiadomości użytkownika

Gdy wcześniej kliknąłeś(-aś) Zapisz informacje, skrypt o nazwie console.log('Hello, Console!') został uruchomiony, aby zapisać wiadomość w Konsoli. Komunikaty rejestrowane w JavaScript w taki sposób nazywamy wiadomościami użytkownika. Natomiast po kliknięciu Przyczyna 404 przeglądarka zarejestrowała komunikat o poziomie Error, informujący, że żądany zasób nie został znaleziony. Takie wiadomości są uznawane za wiadomości przeglądarki. Możesz użyć paska bocznego, aby odfiltrować wiadomości z przeglądarki i wyświetlić tylko wiadomości od użytkowników.

1. Kliknij 9 Komunikaty dla użytkowników. komunikaty przeglądarki są ukryte;

   

2. Aby ponownie wyświetlić wszystkie wiadomości, kliknij 12 wiadomości.

Korzystanie z Konsoli w połączeniu z dowolnym innym panelem

Co zrobić, jeśli edytujesz style, ale musisz szybko sprawdzić coś w logu Konsoli? Użyj menu.

1. Kliknij kartę Elementy.

2. Naciśnij Escape. Otworzy się karta Konsola w schowku. Zawiera ona wszystkie funkcje Konsoli, z których korzystasz w tym samouczku.

   

Dalsze kroki

Gratulacje! Samouczek został ukończony. Aby otrzymać trofeum, kliknij Wydaj trofeum.

• Więcej informacji o funkcjach i procesach związanych z interfejsem Konsoli znajdziesz w dokumentacji Konsoli.
• Więcej informacji o wszystkich metodach console, które zostały zaprezentowane w artykule Wyświetlanie wiadomości zarejestrowanych w JavaScriptzie, znajdziesz w dokumentacji interfejsu Console API. Znajdziesz tam też inne metody console, które nie zostały omówione w tym samouczku.
• Aby dowiedzieć się, co jeszcze możesz zrobić w Narzędziach deweloperskich, zobacz Pierwsze kroki.
• Aby dowiedzieć się więcej o wszystkich metodach formatowania i stylizacji console, przeczytaj artykuł Formatowanie i stylizowanie wiadomości w Konsoli.