Komunikaty logu w konsoli

Kayce Basques

Twitter GitHub Usterka

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

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

Konfigurowanie wersji demonstracyjnej i Narzędzi deweloperskich

Ten samouczek został zaprojektowany tak, aby umożliwić Ci otwarcie wersji demonstracyjnej i samodzielne wypróbowanie wszystkich przepływów pracy. Jeśli będziesz ćwiczyć, łatwiej zapamiętasz przepływ pracy w przyszłości.

1. Otwórz prezentację.

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

   

3. Aktywuj 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świetlanie komunikatów zarejestrowanych przez JavaScript

Większość wiadomości, które widzisz w Konsoli, pochodzi od programistów, którzy napisali kod JavaScript strony. W tej sekcji zapoznasz się z różnymi typami wiadomości, które prawdopodobnie zauważysz w konsoli, i wyjaśnisz, jak możesz samodzielnie rejestrować każdy typ wiadomości z poziomu własnego kodu JavaScript.

1. W wersji demonstracyjnej kliknij przycisk Informacje o logu. Użytkownik Hello, Console! zaloguje się w konsoli.

   

2. W konsoli obok komunikatu Hello, Console! kliknij log.js:2. Otworzy się panel Źródła i wyróżni wiersz kodu, który spowodował zalogowanie wiadomości 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.
   • Naciśnij Control+[ lub Command+[ (Mac), aż pojawi się konsola.
   • Otwórz menu poleceń, zacznij wpisywać Console, wybierz polecenie Pokaż panel konsoli i naciśnij Enter.

4. W wersji demonstracyjnej kliknij przycisk Ostrzeżenie dotyczące logu. Abandon Hope All Ye Who Enter jest logowany w konsoli.

   

   Wiadomości sformatowane w ten sposób są ostrzeżeniami.

5. Opcjonalnie: kliknij log.js:12, aby wyświetlić kod, który spowodował formatowanie wiadomości, a potem wróć do Console. Możesz to zrobić, jeśli chcesz zobaczyć kod, który spowodował zarejestrowanie wiadomości w określony sposób.

6. Kliknij ikonę Rozwiń przed elementem Abandon Hope All Ye Who Enter. Narzędzia deweloperskie pokazują 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, wywołanie, które miało miejsce jako pierwsze, znajduje się na dole zrzutu stosu. Zrzuty stosu możesz rejestrować w dowolnym momencie, wywołując funkcję console.trace().

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

   

8. Kliknij Log Table (Tabela logów). W konsoli zostanie zapisana tabela z informacjami o sławnych artystach.

   

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

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

   

10. Kliknij Logowanie niestandardowe. W konsoli zostanie rejestrowana wiadomość z czerwonym obramowaniem i niebieskim tłem.

    

Główną kwestią jest to, że gdy chcesz logować z JavaScriptu komunikaty do konsoli, używasz jednej z metod console. Każda metoda formatuje wiadomości w inny sposób.

Dostępnych jest jeszcze więcej metod niż wykazano w tej sekcji. Z końcowego samouczka dowiesz się, jak zapoznać się z pozostałymi metodami.

Wyświetl wiadomości zarejestrowane przez przeglądarkę

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

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

   

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

   

3. Kliknij menu Log Levels (Poziomy logu) i włącz opcję Verbose (Wyczerpująco), jeśli jest wyłączona. Więcej informacji o filtrowaniu znajdziesz w następnej sekcji. Jest to konieczne, aby mieć pewność, że następna wiadomość jest widoczna. Uwaga: jeśli menu Poziomy domyślne jest wyłączone, konieczne może być zamknięcie paska bocznego konsoli. Aby dowiedzieć się więcej o pasku bocznym konsoli, użyj filtra poniżej.

   

4. Kliknij Przyczyna naruszenia. Strona nie odpowiada na 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 zapewniają wiele różnych sposobów odfiltrowywania wiadomości, które nie są związane z wykonywanym zadaniem.

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

Filtruj według poziomu logowania

Każda metoda console.* ma 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.* wraz z poziomami ważności znajdziesz w dokumentacji interfejsu Console API.

Aby filtrować według poziomu logowania:

1. Kliknij menu Poziomy logu i wyłącz opcję Błędy. Poziom jest wyłączany, gdy nie ma już obok niego znacznika wyboru. Komunikaty na poziomie Error znikną.

   

2. Kliknij ponownie menu Log Levels (Poziomy dziennika) i włącz opcję Errors (Błędy). Komunikaty na poziomie Error pojawią się ponownie.

Ważne: Konsola zawsze pamięta zastosowany filtr menu. Utrzymuje się na wszystkich stronach, a także na stronie, w Narzędziach deweloperskich i ponownie odświeżając Chrome. Aby szybko zastosować filtr tymczasowy, użyj paska bocznego.

Filtruj według tekstu

Jeśli chcesz wyświetlić tylko wiadomości zawierające konkretny 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 Dave, zostaną ukryte. Możesz też zobaczyć etykietę Adolescent Irradiated Espionage Tortoises. To jest błąd.

   

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

Filtruj według wyrażenia regularnego

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

1. Wpisz /^[AH]/ w polu tekstowym Filtr. Aby dowiedzieć się, co się dzieje, wpisz ten wzorzec w polu RegExr.

   

2. Usuń kolumnę /^[AH]/ z pola tekstowego Filtr. Wszystkie wiadomości są ponownie 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 na pasku bocznym są tymczasowe. Konsola nie utrzymuje takich filtrów na wszystkich stronach, w Narzędziach deweloperskich ani na stronach ponownie odświeżanych w 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 błąd log.js spowodował 11 wiadomości.

   

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

Wcześniej kliknięcie opcji Informacje dziennika powodowało utworzenie skryptu o nazwie console.log('Hello, Console!') w celu zarejestrowania komunikatu w konsoli. Takie wiadomości rejestrowane w JavaScript jest nazywane wiadomościami użytkowników. Natomiast po kliknięciu Przyczyna 404 przeglądarka zarejestrowała komunikat na poziomie Error z informacją, że nie można znaleźć żądanego zasobu. Takie wiadomości są uznawane za wiadomości przeglądarki. Za pomocą paska bocznego możesz odfiltrowywać wiadomości w przeglądarce i wyświetlać tylko wiadomości od użytkowników.

1. Kliknij 9 wiadomości użytkownika. Komunikaty przeglądarki są ukryte.

   

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

Korzystaj z Konsoli obok dowolnego innego panelu.

Co zrobić, gdy edytujesz style, ale chcesz szybko sprawdzić dziennik konsoli? użyj panelu.

1. Kliknij kartę Elementy.

2. Naciśnij Escape. W panelu otworzy się karta Konsola. Oferuje wszystkie funkcje Konsoli używane w tym samouczku.

   

Dalsze kroki

Gratulacje, udało Ci się ukończyć samouczek. Kliknij Dispense Trophy, aby otrzymać trofeum.

• W sekcji Materiały dotyczące konsoli znajdziesz więcej funkcji i przepływów pracy związanych z interfejsem konsoli.
• Zapoznaj się z dokumentacją interfejsu Console API, aby dowiedzieć się więcej o wszystkich metodach console używanych w sekcji Wyświetlanie wiadomości rejestrowanych przez JavaScript, a także poznać inne metody console, których nie omówiliśmy w tym samouczku.
• Zobacz Wprowadzenie, aby dowiedzieć się, co jeszcze możesz zrobić przy użyciu Narzędzi deweloperskich.
• Zobacz Formatowanie i styl wiadomości w konsoli, aby dowiedzieć się więcej o wszystkich console metodach formatowania i stylu.