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).

Wiadomości w konsoli.

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.

    Ten samouczek 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.

    Narzędzia deweloperskie otworzy 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 zadokowano u dołu wersji demonstracyjnej.

    Narzędzia deweloperskie oddokowane w osobnym oknie: Narzędzia deweloperskie zostały 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.

    Konsola po kliknięciu informacji o logu.

  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.

    Po kliknięciu log.js:2 otwiera się panel Źródła.

    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.

    Konsola po kliknięciu ostrzeżenia o logu.

    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ń 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.

    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.

    Komunikat o błędzie.

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

    Tabela w konsoli.

    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.

    Grupa wiadomości w konsoli.

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

    Komunikat z niestandardowym formatowaniem w konsoli.

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.

    Błąd 404 w konsoli.

  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.

    Błąd typu w konsoli.

  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.

    Włączam poziom rejestrowania szczegółów.

  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.

    Naruszenie zasad w konsoli.

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.

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.

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.

    Wyłączenie w konsoli komunikatów na poziomie błędów.

  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.

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.

    Odfiltrowywanie wszystkich wiadomości, które nie zawierają tekstu „Dawid”.

  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.

    Odfiltrowywanie wszystkich wiadomości, które nie pasują do wzorca `/^[AH]/.

  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.

  1. Kliknij Pokaż pasek boczny konsoli Pokaż pasek boczny konsoli..

    Pasek boczny

  2. Kliknij ikonę Rozwiń 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.

    Wyświetlanie źródła wiadomości na pasku bocznym.

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.

    Odfiltrowywanie komunikatów wyświetlanych w przeglądarce

  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.

    Karta **Konsola** w panelu.

Dalsze kroki

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