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.
- Otwórz prezentację.
Opcjonalnie: przenieś wersję demonstracyjną do osobnego okna. W tym przykładzie samouczek jest po lewej, a wersja demonstracyjna – po prawej.
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.
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.
W wersji demonstracyjnej kliknij przycisk Informacje o logu. Użytkownik
Hello, Console!
zaloguje się w konsoli.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!')
.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.
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.
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.
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 nazwiequoteDante
. 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()
.Kliknij Błąd logu. Logowany jest ten komunikat o błędzie:
I'm sorry, Dave. I'm afraid I can't do that.
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.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
.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ą.
Kliknij Przyczyna 404. Przeglądarka zgłasza błąd sieci
404
, ponieważ skrypt JavaScript strony próbował pobrać nie istnieje plik.Kliknij Przyczyna błędu. Przeglądarka rejestruje nieprzechwycony element
TypeError
, ponieważ JavaScript próbuje zaktualizować nieistniejący węzeł DOM.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.
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.
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
.
Aby filtrować według poziomu logowania:
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ą.Kliknij ponownie menu Log Levels (Poziomy dziennika) i włącz opcję Errors (Błędy). Komunikaty na poziomie
Error
pojawią się ponownie.
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.
Wpisz
Dave
w polu tekstowym Filtr. Wszystkie wiadomości, które nie zawierają ciąguDave
, zostaną ukryte. Możesz też zobaczyć etykietęAdolescent Irradiated Espionage Tortoises
. To jest błąd.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.
Wpisz
/^[AH]/
w polu tekstowym Filtr. Aby dowiedzieć się, co się dzieje, wpisz ten wzorzec w polu RegExr.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.
Kliknij Pokaż pasek boczny konsoli .
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.
Kliknij 9 wiadomości użytkownika. Komunikaty przeglądarki są ukryte.
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.
- Kliknij kartę Elementy.
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 metodyconsole
, 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.