Komunikaty logu w konsoli

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

    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.

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

  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ą zadokowane u dołu okna prezentacji.

    Narzędzia deweloperskie są oddokowane w osobnym oknie:Narzędzia programistyczne są odczepione 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.

    Konsola po kliknięciu Informacje z dziennika.

  2. Obok komunikatu Hello, Console!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 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.

    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 Dziennik niestandardowy. W konsoli zostanie zarejestrowany komunikat z czerwoną ramką i niebieskim tłem.

    wiadomość z niestandardowym formatowaniem w konsoli.

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.

    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 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 jest 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łączenie komunikatów o błędach w konsoli.

  2. Ponownie kliknij 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 zarejestrowanie 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 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;

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