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 za pomocą konsoli. Jeśli nie, zapoznaj się z 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 menu poleceń, zacznij wpisywać Console i uruchom polecenie Show Console (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 następnie wybierz Pokaż panel konsoli.

Pojawi się panel u dołu okna Narzędzi deweloperskich z otwartą kartą Console (Konsola).

Aby otworzyć kartę konsoli z menu poleceń, zacznij wpisywać Console i uruchom polecenie Show Console (Pokaż konsolę), które ma obok plakietki Panel.

Otwórz ustawienia konsoli

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

Poniższe linki opisują poszczególne ustawienia:

• Ukryj sieć
• Zachowaj dziennik
• Tylko wybrany kontekst
• Grupowanie podobnych wiadomości w konsoli
• Wyświetlaj błędy CORS w konsoli
• Rejestrowanie żądań XMLHttpRequests
• Wymagana ocena
• Autouzupełnianie z historii

Otwieranie paska bocznego konsoli

Kliknij Pokaż pasek boczny konsoli , aby wyświetlić pasek boczny, który jest przydatny 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 artykule Wyświetlanie wiadomości.

Wyłącz grupowanie wiadomości

Otwórz ustawienia konsoli i wyłącz opcję Podobne do grup, aby wyłączyć domyślne zachowanie konsoli do grupowania wiadomości. 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 kotwicy obok komunikatu punktu 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. W konsoli są one wyświetlane w odwrotnej kolejności: najnowsza klatka znajduje się na górze.

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

Wyświetl asynchroniczne zrzuty stosu

Jeśli ta platforma 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 tym przypadku zrzut stosu pokazuje pełną historię operacji asynchronicznej.

Pokaż w zrzucie stosu znane ramki innych firm

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

Aby wyświetlić pełny zrzut stosu z ramkami innych firm, kliknij Pokaż więcej klatek (N) 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 rejestrowanie żądań XMLHttpRequests, aby na bieżąco rejestrować w konsoli wszystkie żądania XMLHttpRequest i Fetch.

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

Zachowywanie wiadomości po wczytaniu stron

Domyślnie konsola jest czyszczona przy każdym wczytaniu nowej strony. Aby zachowywać komunikaty po 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. Na przykład najważniejszy komunikat w tym przykładzie oznacza błąd 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świetlać błędy CORS, jeśli żądania sieciowe nie powiodą się z powodu współdzielenia zasobów z różnych domen (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 je napotkasz, możesz kliknąć te przyciski obok błędów:

• , aby otworzyć żądanie z polem 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 komunikatów z przeglądarki

Otwórz pasek boczny konsoli i kliknij Komunikaty 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 dokumentacji interfejsu Console API znajdziesz informacje o poziomie ważności poszczególnych metod.

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

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

Możesz też filtrować dane według poziomu logowania, otwierając pasek boczny konsoli, a następnie klikając Błędy, Ostrzeżenia, Informacje lub Szczegółowo.

Filtruj wiadomości według adresu URL

Wpisz url: i URL, aby wyświetlać tylko wiadomości pochodzące z tego adresu. Po wpisaniu url:Narzędzia deweloperskie wyświetlą 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 umożliwia Ci skoncentrowanie się na wiadomościach z tych 2 skryptów.

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

Możesz też wyświetlać wiadomości z jednego adresu URL. W tym celu otwórz pasek boczny konsoli, rozwiń sekcję Wiadomości użytkowników i kliknij 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. Reklama jest wyświetlana w innym kontekście JavaScript, więc jednym ze sposobów na ukrycie jej komunikatów jest otwarcie ustawień konsoli i zaznaczenie pola Tylko wybrany kontekst.

Odfiltrowywanie wiadomości, które nie pasują do wzorca wyrażenia regularnego

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

Na przykład poniższy filtr odfiltrowuje wszystkie wiadomości, które nie pasują do hasła /[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ć wyrażenie regularne.
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 JavaScriptu w konsoli. Praktyczny przewodnik znajdziesz w artykule Uruchamianie JavaScriptu.

Opcje kopiowania ciągu znaków

Konsola domyślnie zwraca ciągi tekstowe jako prawidłowe literały JavaScript. Kliknij dane wyjściowe prawym przyciskiem myszy i wybierz jedną z 3 opcji kopiowania:

• Kopiuj jako literał JavaScript. Zmienia znaczenie odpowiednich znaków specjalnych i zawija ciąg znaków w pojedyncze, podwójne cudzysłowy lub grawis (w zależności od treści).
• Kopiowanie treści ciągu znaków. Kopiuje nieprzetworzony ciąg do schowka, w tym nowe wiersze i inne znaki specjalne.
• Kopiuj jako literał JSON Formatuje ciąg znaków na prawidłowy plik JSON.

Ponownie uruchom wyrażenia z historii

Naciskaj klawisz strzałki w górę, aby przeglądać historię wyrażeń JavaScript uruchamianych wcześniej w konsoli. Aby ponownie uruchomić to wyrażenie, naciśnij Enter.

Obserwowanie wartości wyrażenia w czasie rzeczywistym dzięki Wyrażeniom na żywo

Jeśli często będziesz wpisywać w konsoli to samo wyrażenie JavaScript, łatwiejszym sposobem może być utworzenie wyrażenia aktywnego. Za pomocą aktywnych wyrażeń wpisujesz wyrażenie raz, a następnie przypinasz je do górnej części konsoli. Wartość wyrażenia jest aktualizowana niemal w czasie rzeczywistym. Przeczytaj artykuł Przeglądanie wartości wyrażeń JavaScript w czasie rzeczywistym za pomocą wyrażeń w czasie rzeczywistym.

Wyłącz ocenę wartości oczekującej

Gdy wpisujesz w konsoli wyrażenia JavaScript, funkcja Eager Evaluation (Ewaluacja zaangażowania) wyświetla podgląd wartości zwracanej przez to wyrażenie. Otwórz ustawienia konsoli i odznacz pole wyboru Eager Evaluation (Eagerująca ocena), aby wyłączyć podgląd wartości zwracanych.

Aktywuj aktywację użytkownika za pomocą oceny

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

Aby wywołać aktywację użytkownika z dowolną oceną, otwórz Ustawienia konsoli i zaznacz Ocena aktywacji użytkownika.

Wyłącz autouzupełnianie z historii

Podczas wpisywania wyrażenia, w wyskakującym okienku autouzupełniania konsoli wyświetlają się wcześniejsze wyrażenia. 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 wyświetlać 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 swojej stronie masz reklamę umieszczoną w elemencie <iframe>. Chodzi o uruchamianie JavaScriptu do poprawiania DOM reklamy. Aby to zrobić, musisz najpierw wybrać kontekst przeglądania reklamy z menu Kontekst JavaScript.

Sprawdzanie 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 artykule Wyświetlanie właściwości obiektów DOM.

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

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

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

Ocenianie niestandardowych metod dostępu

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 niewymierne

Wymienne właściwości mają jasny kolor. Właściwości, których nie można wyliczyć, są wyciszone. Właściwości wyliczane można iterować za pomocą pętli for … in lub 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 spoza zakresu klasy.

Sprawdzanie właściwości wewnętrznego JavaScriptu

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

W przypadku różnych obiektów 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]] oraz [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Oprócz właściwości specyficznych dla ArrayBuffer obiekty WebAssembly.Memory mają właściwość [[WebAssemblyMemory]].
• Kolekcje z kluczami (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 klient został zrealizowany, <reason> w przypadku odrzucenia
• Obiekty Proxy mają te właściwości: obiekt [[Handler]], obiekt [[Target]] i [[isRevoked]] (wyłączony lub nie).

Sprawdzanie funkcji

W języku JavaScript funkcje są również obiektami o właściwościach. Jeśli jednak wpiszesz nazwę funkcji w konsoli, Narzędzia deweloperskie wywołają ją zamiast wyświetlić 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 ograniczające mają te właściwości:
  • [[TargetFunction]]. Cel (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 swojej strony internetowej.
• Gdy konsola jest aktywna, naciśnij Control + L.