Informacje o funkcjach konsoli

Sofia Emelianova
Sofia Emelianova

Ta strona zawiera informacje o funkcjach związanych z konsolą Narzędzi deweloperskich w Chrome. Zakładamy, że wiesz już, jak wyświetlać zarejestrowane komunikaty i uruchamiać JavaScript w konsoli. Jeśli nie, przeczytaj sekcję Pierwsze kroki.

Jeśli szukasz dokumentacji API dotyczącej funkcji takich jak console.log(), zapoznaj się z dokumentacją interfejsu Console API. Więcej informacji o funkcjach takich jak monitorEvents() znajdziesz w dokumentacji interfejsu Console Utilities API.

Otwórz konsolę

Konsolę możesz otworzyć jako panel lub kartę w panelu.

Otwieranie panelu konsoli

Naciśnij Control+Shift+J lub Command+Option+J (Mac).

Konsola.

Aby otworzyć konsolę z poziomu menu poleceń, zacznij wpisywać Console, a następnie uruchom polecenie Pokaż konsolę, które ma obok plakietkę Panel.

Polecenie wyświetlające panel konsoli.

Otwórz konsolę w panelu

Naciśnij Escape lub kliknij Dostosuj i steruj narzędziami deweloperskimi Narzędzia deweloperskie z możliwością dostosowywania i kontrolowania., a potem wybierz Pokaż panel konsoli.

Pokaż panel konsoli.

Szuflada pojawi się u dołu okna Narzędzi deweloperskich z otwartą kartą Konsola.

Karta Konsola w panelu.

Aby otworzyć kartę konsoli z menu poleceń, zacznij wpisywać Console, a potem uruchom polecenie Pokaż konsolę, które ma obok plakietkę Panel.

Polecenie umożliwiające wyświetlenie karty Console (Konsola) w panelu.

Otwórz ustawienia konsoli

Kliknij Ustawienia. Console Settings (Ustawienia konsoli) w prawym górnym rogu konsoli.

Ustawienia konsoli.

Poniższe linki wyjaśniają każde ustawienie:

Kliknij Pokaż pasek boczny konsoli Pokaż pasek boczny konsoli., aby wyświetlić pasek boczny, który przydaje się do filtrowania.

Pasek boczny konsoli.

Wyświetlanie wiadomości

Ta sekcja zawiera funkcje, które zmieniają sposób wyświetlania wiadomości w konsoli. Praktyczne instrukcje znajdziesz w sekcji Wyświetlanie wiadomości.

Wyłącz grupowanie wiadomości

Otwórz Ustawienia konsoli i wyłącz opcję Grupuj podobne grupy, aby wyłączyć domyślne grupowanie wiadomości w konsoli. Przykład znajdziesz w sekcji Rejestrowanie żądań XHR i pobierania.

Wyświetl wiadomości z punktów przerwania

Konsola oznacza wiadomości aktywowane przez punkty przerwania w taki sposób:

Konsola oznacza wiadomości utworzone przez warunkowe punkty przerwania i punkty logowania.

Aby przejść do wbudowanego edytora punktów przerwania w panelu Źródła, kliknij link zakotwiczony obok komunikatu o punkcie przerwania.

Wyświetl zrzuty stosu

Konsola automatycznie rejestruje zrzuty stosu pod kątem błędów i ostrzeżeń. Zrzut stosu to historia wywołań funkcji (ramek), które doprowadziły do błędu lub ostrzeżenia. Konsola wyświetla je w odwrotnej kolejności: najnowsza klatka jest na górze.

Aby wyświetlić zrzut stosu, kliknij ikonę rozwijania Rozwiń. obok błędu lub ostrzeżenia.

Zrzuty stosu.

Wyświetl przyczyny błędów w zrzucie stosu

Konsola może wyświetlać łańcuchy przyczyn błędów w zrzucie stosu (jeśli występują).

Aby ułatwić debugowanie, możesz określić przyczyny błędów podczas wychwytywania i ponownego zgłaszania błędów. W miarę jak konsola przechodzi do łańcucha przyczyn, wyświetla każdy stos błędów z prefiksem Caused by:, dzięki czemu możesz znaleźć pierwotny błąd.

Łańcuch błędów powoduje, że w zrzucie stosu występuje poprzedzony ciągiem „Przyczyna:”.

Wyświetl asynchroniczne zrzuty stosu

Jeśli jest obsługiwana przez używaną platformę lub gdy bezpośrednio korzystasz z podstawowych funkcji planowania przeglądarki, takich jak setTimeout, Narzędzia deweloperskie mogą śledzić operacje asynchroniczne, łącząc ze sobą obie części kodu asynchronicznego.

W takim przypadku zrzut stosu przedstawia „pełną historię” operacji asynchronicznej.

Asynchroniczny zrzut stosu.

Pokaż w zrzucie stosu znane ramki innych firm

Gdy mapy źródeł zawierają pole ignoreList, Konsola domyślnie ukrywa przed zrzutami stosu ramki zewnętrzne ze źródeł wygenerowanych przez pakiety (np. webpack) lub platformy (np. Angular).

Aby wyświetlić pełny zrzut stosu, w tym ramki innych firm, kliknij Pokaż jeszcze N ramek na dole zrzutu stosu.

Pokaż jeszcze N klatek.

Aby zawsze wyświetlać pełny zrzut stosu, wyłącz ustawienie Ustawienia. Ustawienia > Lista ignorowanych > Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych.

Automatycznie dodawaj znane skrypty innych firm do listy ignorowanych fragmentów kodu.

Rejestruj żądania XHR i Fetch

Otwórz ustawienia konsoli i włącz opcję Loguj XMLHttpRequests, aby rejestrować w konsoli wszystkie żądania XMLHttpRequest i Fetch.

Logowanie żądań XMLHttpRequest i Fetch.

Górny komunikat w przykładzie powyżej pokazuje domyślny sposób grupowania konsoli. Przykład poniżej pokazuje, jak wygląda ten sam dziennik po wyłączeniu grupowania wiadomości.

Jak wyglądają zarejestrowane żądania XMLHttpRequest i Fetch po rozgrupowaniu.

Utrwalaj wiadomości po wczytaniu stron

Domyślnie konsola jest czyszczona przy każdym wczytaniu nowej strony. Aby zachować wiadomości po każdym wczytaniu strony, Otwórz ustawienia konsoli i zaznacz pole wyboru Zachowaj dziennik.

Ukryj komunikaty dotyczące sieci

Domyślnie przeglądarka rejestruje komunikaty sieciowe w konsoli. Przykład: najpopularniejszy komunikat w tym przykładzie oznacza kod 404.

Pojawił się komunikat o błędzie 404 w konsoli.

Aby ukryć komunikaty sieciowe:

  1. Otwórz ustawienia konsoli.
  2. Zaznacz pole wyboru Ukryj sieć.

Pokaż lub ukryj błędy CORS

Konsola może wyświetlić błędy CORS, jeśli żądania sieciowe nie powiodą się z powodu współdzielenia zasobów między serwerami (CORS).

Aby wyświetlić lub ukryć błędy CORS:

  1. Otwórz ustawienia konsoli.
  2. Zaznacz lub odznacz pole wyboru Pokaż błędy CORS w konsoli.

Pokaż błędy CORS w konsoli.

Jeśli w konsoli są wyświetlane błędy CORS i występują te błędy, możesz kliknąć te przyciski obok błędów:

Przyciski Sieć i Problemy.

Filtruj wiadomości

Wiadomości w konsoli można odfiltrowywać na wiele sposobów.

Odfiltrowywanie wiadomości z przeglądarki

Otwórz pasek boczny konsoli i kliknij Wiadomości użytkowników, aby wyświetlić tylko wiadomości pochodzące z kodu JavaScript strony.

Wyświetlanie wiadomości użytkowników

Filtruj według poziomu logowania

Narzędzia deweloperskie przypisują większość poziomów ważności metod (console.*).

Są 4 poziomy:

  • Verbose
  • Info
  • Warning
  • Error

Na przykład console.log() jest w grupie Info, a console.error() jest w grupie Error. W materiałach referencyjnych interfejsu Console API znajdziesz informacje o poziomie ważności poszczególnych metod.

Każdy komunikat, który przeglądarka loguje w konsoli, ma też poziom ważności. Możesz ukryć dowolny poziom wiadomości, który Cię nie interesuje. Jeśli na przykład interesują Cię tylko wiadomości (Error), możesz ukryć pozostałe 3 grupy.

Kliknij menu Poziomy logów, aby włączyć lub wyłączyć komunikaty Verbose, Info, Warning lub Error.

Menu Poziomy rejestrowania.

Możesz też filtrować dane według poziomu logowania: Pokaż pasek boczny konsoli. otwórz pasek boczny konsoli i kliknij Błędy, Ostrzeżenia, Informacje lub Wyczerpujące.

Wyświetlanie ostrzeżeń na pasku bocznym.

Filtruj wiadomości według adresu URL

Wpisz url:, a następnie URL, aby wyświetlić tylko wiadomości pochodzące z tego adresu. Po wpisaniu url: Narzędzia deweloperskie pokazują wszystkie odpowiednie adresy URL.

Filtr adresów URL.

Domeny też działają. Jeśli na przykład https://example.com/a.js i https://example.com/b.js rejestrują komunikaty, url:https://example.com pozwala skupić się na wiadomościach z tych 2 skryptów.

Aby ukryć wszystkie wiadomości z określonego adresu URL, wpisz -url: i dodaj adres URL, na przykład https://b.wal.co. To jest filtr wykluczających adresów URL.

Filtr wykluczających adresów URL. Narzędzia deweloperskie ukrywają wszystkie wiadomości pasujące do określonego adresu URL.

Wiadomości z jednego adresu URL możesz też wyświetlać, otwierając pasek boczny konsoli, rozwijając sekcję Wiadomości użytkowników i klikając adres URL skryptu zawierającego wiadomości, na których chcesz się skupić.

Wyświetlanie wiadomości z określonego skryptu.

Odfiltrowywanie wiadomości z różnych kontekstów

Załóżmy, że na stronie znajduje się reklama. Reklama jest umieszczona w elemencie <iframe> i generuje wiele komunikatów w Konsoli. Ta reklama wyświetla się w innym kontekście JavaScriptu, więc jednym ze sposobów ukrycia jej komunikatów jest otworzenie ustawień konsoli i zaznaczenie pola wyboru Tylko wybrany kontekst.

Odfiltrowywanie wiadomości, które nie pasują do wzorca wyrażeń regularnych

Wpisz wyrażenie regularne, np. /[foo]\s[bar]/, w polu tekstowym Filtr, aby odfiltrować wiadomości, które nie pasują do tego wzorca. Spacje nie są obsługiwane. Zamiast nich używaj elementu \s. Narzędzia deweloperskie sprawdzają, czy tekst komunikatu znajduje się w tekście komunikatu lub czy w skrypcie, który spowodował zarejestrowanie wiadomości.

Na przykład ten filtr odfiltrowuje wszystkie wiadomości, które nie pasują do zapytania /[gm][ta][mi]/.

Odfiltrowywanie wszystkich wiadomości, które nie pasują do ciągu /[gm][ta][mi]/.

Aby wyszukać tekst w komunikatach dziennika:

  1. Aby otworzyć wbudowany pasek wyszukiwania, naciśnij Command+F (Mac) lub Ctrl+F (Windows, Linux).
  2. Na pasku wpisz zapytanie. W tym przykładzie zapytanie to legacy. Wpisz zapytanie. Opcjonalnie możesz:
    • Kliknij Uwzględniaj wielkość liter. Uwzględniaj wielkość liter, aby w zapytaniu uwzględniać wielkość liter.
    • Kliknij Przycisk RegEx. Użyj wyrażenia regularnego, aby wyszukać z użyciem wyrażenia regularnego.
  3. Naciśnij Enter. Aby przejść do poprzedniego lub następnego wyniku wyszukiwania, naciśnij przycisk w górę lub w dół.

Uruchom kod JavaScript

Ta sekcja zawiera funkcje związane z uruchamianiem skryptów JavaScript w Konsoli. W sekcji Uruchamianie JavaScriptu znajdziesz praktyczne instrukcje.

Opcje kopiowania ciągu tekstowego

Konsola domyślnie wyświetla ciągi znaków jako prawidłowe literały JavaScript. Kliknij dane wyjściowe prawym przyciskiem myszy i wybierz jedną z trzech opcji kopiowania:

  • Kopiuj jako literał JavaScript. Zmienia znaczenie odpowiednich znaków specjalnych i zawija ciąg znaków w pojedynczy lub podwójny cudzysłów lub grawis (w zależności od treści).
  • Kopiowanie treści ciągu znaków. Kopiuje do schowka dokładnie nieprzetworzony ciąg znaków łącznie ze znakami nowego wiersza i innymi znakami specjalnymi.
  • Kopiuj jako literał JSON. Formatuje ciąg znaków na prawidłowy plik JSON.

Opcje kopiowania.

Ponownie uruchamiaj wyrażenia z historii

Naciskaj klawisz strzałki w górę, aby przewijać historię wyrażeń JavaScript uruchomionych wcześniej w konsoli. Naciśnij Enter, aby ponownie uruchomić to wyrażenie.

Obserwowanie wartości wyrażenia w czasie rzeczywistym za pomocą wyrażeń w czasie rzeczywistym

Jeśli często wpisujesz to samo wyrażenie JavaScript w konsoli, łatwiejszym rozwiązaniem może być utworzenie wyrażenia aktywnego. Za pomocą wyrażeń aktywnych wystarczy wpisać wyrażenie raz i przypiąć je do górnej części konsoli. Wartość wyrażenia zmienia się niemal w czasie rzeczywistym. Zobacz artykuł Obserwowanie wartości wyrażeń JavaScript w czasie rzeczywistym za pomocą wyrażeń w czasie rzeczywistym.

Wyłącz ocenę zdania

Gdy wpisujesz wyrażenia JavaScript w konsoli, funkcja Eager Evaluation wyświetla podgląd wartości zwracanej przez to wyrażenie. Otwórz Ustawienia konsoli i wyłącz pole wyboru Ocena zainteresowania, aby wyłączyć podgląd wartości zwracanych.

Aktywowanie użytkownika za pomocą oceny

Aktywacja użytkownika to stan sesji przeglądania zależny od działań użytkownika. Stan „aktywny” oznacza, że użytkownik obecnie wchodzi w interakcję ze stroną lub wszedł z nią w interakcję od czasu jej wczytania.

Aby aktywować aktywację użytkownika przy użyciu dowolnej oceny, otwórz Ustawienia konsoli i zaznacz Pole wyboru. Oceniaj aktywatory użytkowników.

Wyłącz autouzupełnianie z historii

Podczas wpisywania wyrażenia w wyskakującym okienku w konsoli pojawiają się wyrażenia użyte wcześniej. Te wyrażenia są poprzedzone znakiem >. W tym przykładzie Narzędzia deweloperskie wcześniej sprawdziły właściwości document.querySelector('a') i document.querySelector('img').

Wyskakujące okienko autouzupełniania pokazujące wyrażenia z historii.

Otwórz Ustawienia konsoli i wyłącz pole Autouzupełnianie z historii, aby nie pokazywać już wyrażeń z historii.

Wybierz kontekst JavaScript

Domyślnie menu Kontekst JavaScript jest ustawione na top, co odzwierciedla kontekst przeglądania głównego dokumentu.

Menu Kontekst JavaScript.

Załóżmy, że na stronie znajduje się reklama umieszczona w elemencie <iframe>. Musisz uruchomić JavaScript, by zmodyfikować DOM reklamy. Aby to zrobić, musisz najpierw wybrać kontekst przeglądania reklamy z menu Kontekst JavaScript.

Wybieranie innego kontekstu JavaScriptu.

Sprawdź właściwości obiektu

Konsola może wyświetlić interaktywną listę właściwości określonego obiektu JavaScript.

Aby przejrzeć listę, wpisz nazwę obiektu w konsoli i naciśnij Enter.

Aby sprawdzić właściwości obiektów DOM, wykonaj czynności opisane w sekcji Wyświetlanie właściwości obiektów DOM.

Właściwości własne i dziedziczone

Konsola najpierw sortuje właściwości własnych obiektów, a potem wyróżnia je pogrubioną czcionką.

Wyświetlam właściwości obiektu.

Właściwości odziedziczone z łańcucha prototypów są zapisane standardową czcionką. Konsola wyświetla je w samym obiekcie, oceniając odpowiednie natywne akcesory obiektów wbudowanych.

Wyświetlam właściwości dziedziczone.

Ocenianie akcesorów niestandardowych

Domyślnie Narzędzia deweloperskie nie oceniają akcesorów, które utworzysz. Niestandardowy akcesor. Aby sprawdzić akcesor niestandardowy dla obiektu, kliknij (...). Oceniony akcesor niestandardowy.

Wskaż właściwości wyliczane i niepoliczalne

Różne właściwości mają jasny kolor. Właściwości, których nie można wyliczyć, są wyciszone. Właściwości liczbowe i niepoliczalne. Wymierne właściwości można powielać za pomocą pętli for … in lub metody Object.keys().

Wykrywaj prywatne właściwości instancji klas

Konsola oznacza właściwości prywatne instancji klas z prefiksem #.

Prywatna właściwość instancji klasy.

Konsola może też automatycznie uzupełniać właściwości prywatne, nawet jeśli są one oceniane poza zakresem zajęć.

Autouzupełnianie właściwości prywatnej.

Sprawdzanie wewnętrznych właściwości JavaScript

Korzystając z notacji ECMAScript, Konsola zawiera w podwójnych nawiasach kwadratowych niektóre właściwości wewnętrzne dla JavaScriptu. Nie możesz wchodzić w interakcje z tymi właściwościami w swoim kodzie. Warto je jednak sprawdzić.

W różnych obiektach możesz zobaczyć te właściwości wewnętrzne:

Sprawdź funkcje

W języku JavaScript funkcje są też obiektami o właściwościach. Jeśli jednak wpiszesz nazwę funkcji w konsoli, Narzędzia deweloperskie wywołają ją zamiast wyświetlać jej właściwości.

Aby wyświetlić właściwości funkcji wewnętrzne w języku JavaScript, użyj polecenia console.dir().

Badanie właściwości funkcji.

Funkcje mają te właściwości:

  • [[FunctionLocation]]. Link do wiersza z definicją funkcji w pliku źródłowym.
  • [[Scopes]]. Zawiera listę wartości i wyrażeń, do których funkcja ma dostęp. Informacje o sprawdzaniu zakresów funkcji podczas debugowania znajdziesz w artykule Wyświetlanie i edytowanie właściwości lokalnych, zamkniętych i globalnych.
  • Funkcje graniczne mają te właściwości:
    • [[TargetFunction]]. Wartość docelowa: bind().
    • [[BoundThis]]. Wartość this.
    • [[BoundArgs]]. Tablica argumentów funkcji. Funkcja wiązana.
  • Funkcje generatora są oznaczone właściwością [[IsGenerator]]: true.Funkcja generatora.
  • Generatory zwracają obiekty iteratora i mają te właściwości:
    • [[GeneratorLocation]]. Link do wiersza z definicją generatora w pliku źródłowym.
    • [[GeneratorState]]: suspended, closed lub running.
    • [[GeneratorFunction]]. Generator, który zwrócił obiekt.
    • [[GeneratorReceiver]]. Obiekt, który otrzymuje wartość. Obiekt iteratora.

Wyczyść konsolę

Aby wyczyścić konsolę, możesz użyć dowolnego z tych przepływów pracy:

  • Kliknij Wyczyść konsolę Przejrzystość..
  • Kliknij wiadomość prawym przyciskiem myszy i wybierz Wyczyść konsolę.
  • Wpisz clear() w konsoli i naciśnij Enter.
  • Wywołaj funkcję console.clear() z kodu JavaScript strony.
  • Gdy konsola jest aktywna, naciśnij Control + L.