Informacje o funkcjach konsoli

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

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

Otwórz konsolę w panelu

Naciśnij Escape lub kliknij Dostosuj i steruj narzędziami deweloperskimi , a potem wybierz Pokaż panel konsoli.

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

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

Otwórz ustawienia konsoli

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

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

• Ukryj sieć
• Zachowaj dziennik
• Tylko wybrany kontekst
• Grupowanie podobnych wiadomości w konsoli
• Pokaż błędy CORS w konsoli
• Rejestrowanie żądań XMLHttpRequest
• Ocenianie z zainteresowaniem
• Autouzupełnianie z historii

Otwieranie paska bocznego konsoli

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

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:

• Wywołania console.* w warunkowych punktach przerwania z pomarańczowym znakiem zapytania ?
• Komunikaty Logpoint z 2 różowymi kropkami ..

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 obok błędu lub ostrzeżenia.

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.

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.

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.

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

Rejestruj żądania XHR i Fetch

Otwórz ustawienia konsoli i włącz opcję Loguj XMLHttpRequests, aby rejestrować w konsoli wszystkie żądania 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.

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.

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.

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:

• , aby otworzyć żądanie z TypeError związanym z CORS w panelu Sieć.
• , aby znaleźć potencjalne rozwiązanie na karcie 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.

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.

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

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.

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.

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

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

Wyszukiwanie tekstu w dziennikach

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. Opcjonalnie możesz:
   • Kliknij Uwzględniaj wielkość liter, aby w zapytaniu uwzględniać wielkość liter.
   • Kliknij 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.

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

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.

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.

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

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.

Ocenianie akcesorów niestandardowych

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

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

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

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:

• Każdy obiekt ma atrybut [[Prototype]].
• Kody podstawowe mają właściwość [[PrimitiveValue]].
• Obiekty ArrayBuffer mają te właściwości:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Oprócz właściwości specyficznych ArrayBuffer obiekty WebAssembly.Memory mają właściwość [[WebAssemblyMemory]].
• Kolekcje z kluczem (mapy i zbiory) mają właściwość [[Entries]], która zawiera ich wpisy z kluczem.
• Obiekty Promise mają te właściwości:
  • [[PromiseState]]: oczekujące, zrealizowane lub odrzucone
  • [[PromiseResult]]: undefined w przypadku oczekiwania, <value>, jeśli prośba została zrealizowana, <reason> w przypadku odrzucenia
• Obiekty Proxy mają te właściwości: obiekt [[Handler]], obiekt [[Target]] i obiekt [[isRevoked]] (wyłączony lub nie).

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

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.
• Funkcje generatora są oznaczone właściwością [[IsGenerator]]: true.
• 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ść.

Wyczyść konsolę

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

• Kliknij Wyczyść konsolę .
• 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.