Komunikaty logu w konsoli

Kayce Basques
Kayce Basques
X GitHub

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

wiadomości w konsoli,

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 śledzić instrukcje, ł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.

    Po lewej stronie jest 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.

    Po prawej stronie okna demonstracyjnego otworzy się panel Narzędzia deweloperskie.

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

    Narzędzia deweloperskie są zadokowane u dołu okna demonstracyjnego:Narzędzia deweloperskie są zadokowane u dołu okna.

    Narzędzia deweloperskie są oddokowane w osobnym oknie:Narzędzia programistyczne są odłączone w osobnym oknie.

Wyświetlanie komunikatów zarejestrowanych w JavaScript

Większość komunikatów widocznych 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 możesz samodzielnie rejestrować każdy z nich za pomocą kodu JavaScript.

  1. W prezentacji kliknij przycisk Informacje o logach. Hello, Console! jest rejestrowany w konsoli.

    Konsole po kliknięciu informacji z dziennika.

  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.

    Po kliknięciu log.js:2 narzędzia dla deweloperów otworzą panel Źródła.

    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.

    Konsola po kliknięciu Zapisz ostrzeżenie.

    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ń. Rozwiń Abandon Hope All Ye Who Enter. Narzędzia deweloperskie wyświetlają ślad stosu prowadzący do wywołania.

    zrzut stosu,

    Ś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 pakietu, 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.

    komunikat o błędzie.

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

    Tabela w Konsoli

    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.

    Grupa wiadomości w konsoli.

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

    wiadomość z niestandardowym formatowaniem w konsoli.

Główna idea jest taka, ż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 wiadomości zarejestrowanych przez przeglądarkę

Przeglądarka również rejestruje komunikaty w konsoli. Zwykle dzieje się tak, gdy wystąpił problem ze 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.

    błąd 404 w Konsoli.

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

    błąd TypeError w Konsoli.

  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 w Konsoli. Aby dowiedzieć się więcej o bocznym pasku konsoli, wybierz poniżej opcję Źródło wiadomości.

    Włączanie szczegółowego poziomu logowania.

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

    Naruszenie w Konsoli.

Filtruj wiadomości

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

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.

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

    Wyłączanie komunikatów o błędach w konsoli.

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

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.

    Odfiltrowywanie wszystkich wiadomości, które nie zawierają ciągu znaków „Dave”.

  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.

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

  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.

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

    Pasek boczny.

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

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

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 na poziomie Error, informujący, że nie udało się znaleźć żądanego zasobu. 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;

    Filtrowanie komunikatów przeglądarki.

  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 sekcji Menu. Zawiera ona wszystkie funkcje Konsoli, z których korzystasz w tym samouczku.

    Karta **Konsola** w panelu bocznym.

Dalsze kroki

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