Komunikaty logu w konsoli

Kayce Basques

W tym interaktywnym samouczku dowiesz się, jak rejestrować i filtrować wiadomości w konsoli Narzędzi deweloperskich w Chrome.

Ten samouczek należy przejść w podanej kolejności. Zakładamy, że znasz podstawy tworzenia stron internetowych, np. wiesz, jak za pomocą JavaScriptu dodać interaktywność do strony.

Konfigurowanie wersji demonstracyjnej i Narzędzi deweloperskich

Ten samouczek został zaprojektowany tak, aby można było otworzyć wersję demonstracyjną i samodzielnie wypróbować wszystkie procesy. Gdy będziesz wykonywać kolejne kroki, łatwiej zapamiętasz procesy.

1. Otwórz wersję demonstracyjną.

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

   

3. Skup się na wersji demonstracyjnej, a następnie naciśnij Ctrl+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 do osobnego okna.

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

   Narzędzia deweloperskie oddokowane w osobnym oknie:

Wyświetlanie wiadomości rejestrowanych przez JavaScript

Większość wiadomości wyświetlanych w konsoli pochodzi od programistów stron internetowych, którzy napisali kod JavaScript strony. Celem tej sekcji jest zapoznanie Cię z różnymi typami wiadomości, które prawdopodobnie zobaczysz w konsoli, oraz wyjaśnienie, jak samodzielnie rejestrować każdy typ wiadomości za pomocą własnego kodu JavaScript.

1. W wersji demonstracyjnej kliknij przycisk Log Info (Zarejestruj informacje). W konsoli zostanie zarejestrowany komunikat Hello, Console!.

   

2. Obok komunikatu Hello, Console! w konsoli kliknij log.js:2. Otworzy się panel Źródła i zostanie wyróżniony wiersz kodu, który spowodował zarejestrowanie komunikatu w konsoli.

   

   Komunikat został zarejestrowany, gdy kod JavaScript strony wywołał funkcję console.log('Hello, Console!').

3. Wróć do konsoli , korzystając z dowolnego z tych procesów:

   • Kliknij kartę Konsola.
   • Naciśnij Ctrl+[ lub Command+[ (Mac), aż konsola będzie aktywna.
   • Otwórz menu poleceń, zacznij wpisywać Console, wybierz polecenie Show Console Panel, a następnie naciśnij Enter.

4. W wersji demonstracyjnej kliknij przycisk Log Warning (Zarejestruj ostrzeżenie). W konsoli zostanie zarejestrowany komunikat Abandon Hope All Ye Who Enter.

   

   Komunikaty sformatowane w ten sposób są ostrzeżeniami.

5. Opcjonalnie: kliknij log.js:12 , aby wyświetlić kod, który spowodował sformatowanie komunikatu w ten sposób, a następnie wróć do konsoli. Zrób to, gdy chcesz zobaczyć kod, który spowodował zarejestrowanie komunikatu w określony sposób.

6. Kliknij ikonę Rozwiń przed komunikatem Abandon Hope All Ye Who Enter. Narzędzia deweloperskie wyświetlają 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. Innymi słowy, wywołanie, które nastąpiło jako pierwsze, znajduje się u dołu zrzutu stosu. Zrzuty stosu możesz rejestrować w dowolnym momencie, wywołując funkcję console.trace().

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

   

8. Kliknij Log Table (Zarejestruj tabelę). W konsoli zostanie zarejestrowana tabela o znanych artystach.

   

   Zwróć uwagę, że kolumna birthday jest wypełniona tylko w jednym wierszu. Sprawdź kod, aby dowiedzieć się, dlaczego tak jest.

9. Kliknij Log Group (Zarejestruj grupę). Nazwy 4 znanych żółwi walczących z przestępczością są zgrupowane pod etykietą Adolescent Irradiated Espionage Tortoises.

   

10. Kliknij Log Custom (Zarejestruj niestandardowe). W konsoli zostanie zarejestrowany komunikat z czerwoną obwódką i niebieskim tłem.

    

Główna idea jest taka, że gdy chcesz rejestrować komunikaty w konsoli z poziomu JavaScriptu, używasz jednej z metod console. Każda metoda formatuje komunikaty inaczej.

Istnieje więcej metod niż te, które zostały zaprezentowane w tej sekcji. Na końcu samouczka dowiesz się, jak poznać pozostałe metody.

Wyświetlanie wiadomości rejestrowanych przez przeglądarkę

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

1. Kliknij Cause 404 (Wywołaj błąd 404). Przeglądarka rejestruje błąd sieci 404, ponieważ kod JavaScript strony próbował pobrać plik, który nie istnieje.

   

2. Kliknij Cause Error (Wywołaj błąd). Przeglądarka rejestruje nieobsłużony błąd TypeError, ponieważ kod JavaScript próbuje zaktualizować węzeł DOM, który nie istnieje.

   

3. Kliknij menu Log Levels (Poziomy logowania) i włącz opcję Verbose (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ępny zarejestrowany komunikat będzie widoczny. Uwaga: jeśli menu rozwijane Domyślne poziomy jest wyłączone, może być konieczne zamknięcie paska bocznego konsoli. Więcej informacji o pasku bocznym konsoli znajdziesz w sekcji Filtrowanie według źródła komunikatu poniżej.

   

4. Kliknij Cause Violation (Wywołaj naruszenie). Strona przestaje odpowiadać na kilka sekund, a następnie przeglądarka rejestruje w konsoli komunikat [Violation] 'click' handler took 3000ms. Dokładny czas trwania może się różnić.

   

Filtrowanie wiadomości

Na niektórych stronach konsola może być zalewana komunikatami. Narzędzia deweloperskie oferują wiele różnych sposobów filtrowania komunikatów, które nie są istotne dla wykonywanego zadania.

Ważne: konsola filtruje tylko komunikaty wyjściowe. Wszystkie dane wejściowe wpisane w konsoli pozostają w niej.

Filtrowanie według poziomu logowania

Każda metoda console.* ma przypisany poziom ważności: Verbose (Szczegółowe), Info (Informacje), Warning (Ostrzeżenie) lub Error (Błąd). Na przykład console.log() to komunikat na poziomie Info, a console.error() to komunikat 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 logowania:

1. Kliknij menu Log Levels (Poziomy logowania) i wyłącz opcję Errors (Błędy). Poziom jest wyłączony, gdy nie ma już obok niego znacznika wyboru. Komunikaty na poziomie Error znikają.

   

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

Ważne: konsola zawsze zapamiętuje zastosowany filtr menu. Jest on zachowywany na wszystkich stronach oraz po ponownym wczytaniu strony, Narzędzi deweloperskich i Chrome. Aby szybko zastosować filtr tymczasowy, użyj paska bocznego.

Filtrowanie według tekstu

Jeśli chcesz wyświetlać tylko komunikaty zawierające dokładny ciąg znaków, wpisz ten ciąg w polu Filtr.

1. Wpisz Dave w polu Filtr. Wszystkie komunikaty, które nie zawierają ciągu znaków Dave, zostaną ukryte.

   

2. Usuń Dave z pola Filtr. Wszystkie komunikaty pojawią się ponownie.

Filtrowanie według wyrażenia regularnego

Jeśli chcesz wyświetlać wszystkie komunikaty zawierające wzorzec tekstu, a nie konkretny ciąg znaków, użyj wyrażenia regularnego.

1. Wpisz /^[AH]/ w polu Filtr. Wpisz ten wzorzec w RegExr, aby dowiedzieć się, co robi.

   

2. Usuń /^[AH]/ z pola Filtr. Wszystkie komunikaty będą ponownie widoczne.

Filtrowanie według źródła komunikatu

Jeśli chcesz wyświetlać tylko komunikaty pochodzące z określonego adresu URL, użyj paska bocznego.

Ważne: filtry paska bocznego są tymczasowe. Konsola nie zachowuje takich filtrów na wszystkich stronach oraz po ponownym wczytaniu strony, Narzędzi deweloperskich i Chrome.

1. Kliknij Pokaż pasek boczny konsoli .

   

2. Kliknij ikonę Rozwiń obok opcji 12 Messages (12 komunikatów). Na pasku bocznym wyświetla się lista adresów URL, które spowodowały zarejestrowanie komunikatów. Na przykład log.js spowodował zarejestrowanie 11 komunikatów.

   

Filtrowanie według komunikatów użytkownika

Gdy wcześniej klikniesz Log Info, skrypt wywoła funkcję console.log('Hello, Console!'), aby zarejestrować komunikat w konsoli. Komunikaty rejestrowane w ten sposób z poziomu JavaScriptu są nazywane komunikatami użytkownika. Natomiast gdy klikniesz Cause 404, przeglądarka zarejestruje komunikat na poziomie Error informujący, że nie można znaleźć żądanego zasobu. Takie komunikaty są uważane za komunikaty przeglądarki. Za pomocą paska bocznego możesz odfiltrować komunikaty przeglądarki i wyświetlać tylko komunikaty użytkownika.

1. Kliknij 9 User Messages (9 komunikatów użytkownika). Komunikaty przeglądarki zostaną ukryte.

   

2. Kliknij 12 Messages (12 komunikatów), aby ponownie wyświetlić wszystkie komunikaty.

Korzystanie z konsoli razem z dowolnym innym panelem

Co zrobić, jeśli edytujesz style, ale musisz szybko sprawdzić log konsoli? Użyj szuflady.

1. Kliknij kartę Elementy.

2. Naciśnij Escape. Otworzy się karta Konsola w szufladzie. Ma ona wszystkie funkcje konsoli , których używasz w tym samouczku.

   

Dalsze kroki

Gratulacje! Samouczek został ukończony. Kliknij Dispense Trophy (Wydaj trofeum), aby otrzymać trofeum.

• Aby poznać więcej funkcji i procesów związanych z interfejsem konsoli, zapoznaj się z dokumentacją konsoli.
• Aby dowiedzieć się więcej o wszystkich metodach console, które zostały zaprezentowane w sekcji Wyświetlanie wiadomości rejestrowanych przez JavaScript, i poznać inne metody console, które nie zostały omówione w tym samouczku, zapoznaj się z dokumentacją interfejsu Console API.
• Aby dowiedzieć się, co jeszcze możesz zrobić za pomocą Narzędzi deweloperskich, zapoznaj się z przewodnikiem Pierwsze kroki.
• Aby dowiedzieć się więcej o wszystkich metodach formatowania i stylizowania console, zapoznaj się z artykułem Formatowanie i stylizowanie komunikatów w konsoli.