Komunikaty logu w konsoli

Kayce Basques

Ten interaktywny samouczek pokazuje, jak rejestrować i filtrować wiadomości w konsoli Chrome Dev Tools (Narzędzia deweloperskie w Chrome).

Ten samouczek należy ukończyć po kolei. Zakładamy, że znasz podstawy tworzenia stron internetowych, np. wiesz, jak za pomocą JavaScriptu dodać interaktywność na stronie.

Skonfiguruj wersję demonstracyjną i Narzędzia deweloperskie

Z tego samouczka dowiesz się, jak otworzyć wersję demonstracyjną i samodzielnie wypróbować wszystkie przepływy pracy. Gdy będziesz fizycznie ją śledzić, z większym prawdopodobieństwem zapamiętasz cały proces.

1. Otwórz prezentację.

2. Opcjonalnie: przenieś wersję demonstracyjną do osobnego okna. W tym przykładzie samouczek jest po lewej stronie, a wersja demonstracyjna po prawej.

   

3. Zaznacz wersję demonstracyjną i naciśnij Control + Shift + J lub Command + Option + J (Mac), aby otworzyć Narzędzia deweloperskie. Domyślnie Narzędzia deweloperskie otwierają się po prawej stronie wersji demonstracyjnej.

   

4. Opcjonalnie: zadokuj Narzędzia deweloperskie u dołu okna lub oddokuj je w osobnym oknie.

   Narzędzia deweloperskie zadokowane u dołu wersji demonstracyjnej:

   Narzędzia deweloperskie oddokowane w osobnym oknie:

Wyświetl komunikaty rejestrowane za pomocą JavaScriptu

Większość wiadomości, które widzisz w Konsoli, pochodzi od programistów stron internetowych, którzy napisały JavaScript na stronie. W tej sekcji omówimy różne typy wiadomości, które prawdopodobnie będziesz widzieć w konsoli, oraz wyjaśnimy, jak możesz samodzielnie rejestrować każdy z nich z poziomu własnego JavaScriptu.

1. W prezentacji kliknij przycisk Log Info (Informacje o logu). Hello, Console! loguje się w konsoli.

   

2. W konsoli kliknij log.js:2 obok komunikatu Hello, Console!. Otworzy się panel Źródła z wyróżnionym wierszem kodu, który spowodował logowanie komunikatu w konsoli.

   

   Komunikat został zarejestrowany, gdy skrypt JavaScript strony o nazwie console.log('Hello, Console!').

3. Wróć do Konsoli, korzystając z dowolnego z tych przepływów pracy:

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

4. W prezentacji kliknij przycisk Log Ostrzeżenie. Abandon Hope All Ye Who Enter loguje się w konsoli.

   

   Wiadomości sformatowane w ten sposób to ostrzeżenia.

5. Opcjonalnie: kliknij log.js:12, aby wyświetlić kod, który spowodował sformatowanie wiadomości w ten sposób, a gdy skończysz, wróć do Konsoli. Zrób to zawsze, gdy chcesz zobaczyć kod, który spowodował logowanie wiadomości w określony sposób.

6. Kliknij ikonę Rozwiń przed tagiem Abandon Hope All Ye Who Enter. W Narzędziach deweloperskich wyświetli się zrzut stosu prowadzący do wywołania.

   

   Zrzut stosu informuje, że wywołano funkcję o nazwie logWarning, która z kolei wywołała funkcję o nazwie quoteDante. Inaczej mówiąc, pierwsze wywołanie znajduje się na dole zrzutu stosu. Zrzuty stosu możesz zarejestrować w dowolnym momencie, wywołując funkcję console.trace().

7. Kliknij Log Error (Błąd dziennika). Logowany jest ten komunikat o błędzie: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Kliknij Tabela logów. W Konsoli Play pojawia się tabela z informacjami o sławnych wykonawcach.

   

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

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

   

10. Kliknij Log Custom (Włącz niestandardowe). W konsoli jest rejestrowany komunikat z czerwonym obramowaniem i niebieskim tłem.

    

Główną ideą jest to, że jeśli chcesz rejestrować wiadomości do Konsoli za pomocą JavaScriptu, musisz użyć jednej z metod console. Każda metoda różnie formatuje wiadomości.

Jest jeszcze więcej metod, niż omówiliśmy w tej sekcji. Po zakończeniu samouczka dowiesz się, jak zapoznać się z pozostałymi metodami.

Wyświetl komunikaty zarejestrowane przez przeglądarkę

Przeglądarka także rejestruje komunikaty w konsoli. Zwykle dzieje się tak, gdy występuje problem ze stroną.

1. Kliknij Przyczyna 404. Przeglądarka rejestruje błąd sieci 404, ponieważ JavaScript strony próbował pobrać plik, który nie istnieje.

   

2. Kliknij Przyczyna błędu. Przeglądarka rejestruje nieobsłużony parametr TypeError, ponieważ JavaScript próbuje zaktualizować węzeł DOM, który nie istnieje.

   

3. Kliknij menu Log Levels (Poziomy logów) i włącz opcję Verbose (Szczegółowo), jeśli jest wyłączona. Więcej informacji o filtrowaniu znajdziesz w następnej sekcji. Musisz to zrobić, aby następna wiadomość była widoczna. Uwaga: jeśli menu Poziomy domyślne jest wyłączone, konieczne może być zamknięcie paska bocznego konsoli. Aby uzyskać więcej informacji o pasku bocznym konsoli, filtruj według źródła wiadomości poniżej.

   

4. Kliknij Przyczyna naruszenia. Strona nie odpowiada przez kilka sekund, a potem przeglądarka rejestruje w konsoli komunikat [Violation] 'click' handler took 3000ms. Dokładny czas trwania może być różny.

   

Filtruj wiadomości

Na niektórych stronach Konsola jest zapełniona wiadomościami. Narzędzia deweloperskie oferują wiele różnych sposobów odfiltrowywania wiadomości, które nie są związane z bieżącym zadaniem.

Ważne: Konsola odfiltrowuje tylko wiadomości wyjściowe, a wszystkie dane wejściowe wpisane w konsoli pozostają w niej.

Filtruj według poziomu logu

Do każdej metody console.* jest przypisany 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 Console API.

Aby filtrować według poziomu logu:

1. Kliknij menu Log Levels (Poziomy logów) i wyłącz opcję Errors (Błędy). Poziom jest wyłączony, gdy nie ma obok niego znacznika wyboru. Znikają wiadomości na poziomie Error.

   

2. Kliknij ponownie menu Log Levels (Poziomy logów) i włącz ponownie opcję Errors (Błędy). Wiadomości na poziomie Error pojawią się ponownie.

Ważne: Konsola zawsze zapamiętuje zastosowany filtr menu. Będzie on widoczny na wszystkich stronach oraz w przypadku stron, Narzędzi deweloperskich i ponownych załadowań w Chrome. Aby szybko zastosować filtr tymczasowy, użyj paska bocznego.

Filtrowanie według tekstu

Jeśli chcesz wyświetlić tylko wiadomości zawierające dokładny ciąg znaków, wpisz odpowiedni ciąg w polu tekstowym Filtr.

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

   

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

Filtruj według wyrażenia regularnego

Jeśli chcesz wyświetlać wszystkie wiadomości zawierające określony wzorzec tekstu, a nie określony ciąg, użyj wyrażenia regularnego.

1. Wpisz /^[AH]/ w polu tekstowym Filtr. Aby wyjaśnić jego działanie, wpisz go w polu RegExr.

   

2. Usuń /^[AH]/ z pola tekstowego Filtr. Wszystkie wiadomości znów będą widoczne.

Filtruj 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 paska bocznego są tymczasowe. Konsola nie zachowuje tych filtrów na wszystkich stronach, a także podczas ponownego wczytywania strony, Narzędzi deweloperskich i wczytywania Chrome.

1. Kliknij Pokaż pasek boczny konsoli .

   

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

   

Filtruj według wiadomości dla użytkowników

Wcześniej po kliknięciu Informacje o logu pojawiał się skrypt o nazwie console.log('Hello, Console!') w celu zarejestrowania komunikatu w konsoli. Wiadomości rejestrowane za pomocą JavaScriptu w takiej sytuacji są nazywane wiadomościami dla użytkowników. Natomiast po kliknięciu Przyczyna 404 przeglądarka zarejestrowała komunikat na poziomie Error z informacją, że nie znaleziono żądanego zasobu. Takie wiadomości są uznawane za wiadomości przeglądarki. Za pomocą paska bocznego możesz odfiltrowywać wiadomości przeglądarki i wyświetlać tylko wiadomości dla użytkowników.

1. Kliknij 9 komunikatów użytkownika. Wiadomości w przeglądarce są ukryte.

   

2. Kliknij 12 wiadomości, aby ponownie wyświetlić wszystkie wiadomości.

Korzystaj z Konsoli razem z każdym innym panelem.

A jeśli edytujesz style, ale chcesz szybko coś sprawdzić w dzienniku Konsoli? za pomocą szuflady.

1. Kliknij kartę Elementy.

2. Naciśnij Escape. W panelu otworzy się karta Console (Konsola). Zawiera on wszystkie funkcje konsoli używane w tym samouczku.

   

Dalsze kroki

Gratulujemy! Udało Ci się ukończyć samouczek. Kliknij Rozdaj trofeum, aby odebrać trofeum.

• W artykule na temat konsoli znajdziesz więcej funkcji i przepływów pracy związanych z interfejsem Konsoli.
• W dokumentacji interfejsu Console API znajdziesz więcej informacji o wszystkich metodach console przedstawionych w sekcji Wyświetlanie wiadomości zarejestrowanych przy użyciu JavaScriptu, a także innych metod console, które nie zostały omówione w tym samouczku.
• Z artykułu Pierwsze kroki dowiesz się, co jeszcze możesz zrobić w Narzędziach deweloperskich.
• Więcej informacji o formacie console i metodach określania stylu znajdziesz w artykule Formatowanie i styl komunikatów w konsoli.