Informacje o funkcjach konsoli

Ta strona zawiera informacje o funkcjach związanych z konsolą Narzędzi deweloperskich w Chrome. Zakłada się, że znasz już konsolę i wiesz, jak wyświetlać zalogowane wiadomości i uruchamiać JavaScript. Jeśli nie, przeczytaj sekcję Wprowadzenie.

Jeśli szukasz dokumentacji interfejsu API dotyczącej funkcji takich jak console.log(), zobacz Dokumentacja interfejsu Console API. Informacje o funkcjach takich jak monitorEvents() znajdziesz w dokumentacji interfejsu Console Utilities API.

Otwieranie konsoli

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

Otwieranie panelu Konsola

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

Aby otworzyć konsolę z menu poleceń, zacznij wpisywać Console, a potem uruchom polecenie Pokaż konsolę z etykietą Panel.

Otwieranie konsoli w panelu

Naciśnij Escape lub kliknij Dostosuj i kontroluj Narzędzia deweloperskie , a następnie wybierz Pokaż panel konsoli.

U dołu okna narzędzi deweloperskich pojawi się panel z otwartą kartą Konsola.

Aby otworzyć kartę Konsola z poziomu menu poleceń, zacznij wpisywać Console, a potem uruchom polecenie Pokaż konsolę, obok którego znajduje się plakietka Panel.

Otwórz ustawienia konsoli

W prawym górnym rogu Konsoli kliknij  Ustawienia konsoli.

Linki poniżej zawierają wyjaśnienia poszczególnych ustawień:

• Ukryj sieć
• Zachowaj dziennik
• Tylko wybrany kontekst
• Grupowanie podobnych wiadomości w konsoli
• Pokaż błędy CORS w konsoli
• Rejestruj żądania XMLHttpRequest
• Wartościowanie zachłanne
• 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świetl wiadomości

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

Wyłączanie grupowania wiadomości

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

Wyświetlanie komunikatów z punktów przerwania

Konsola oznacza wiadomości wywołane przez punkty przerwania w ten sposób:

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

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

Wyświetlanie zrzutów stosu

Konsola automatycznie rejestruje ślady stosu błędów i ostrzeżeń. Ślad 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 jest na górze.

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

Wyświetlanie przyczyn błędów w zrzutach stosu

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

Aby ułatwić debugowanie, możesz określać przyczyny błędów podczas przechwytywania i ponownego zgłaszania błędów. Gdy konsola przechodzi przez łańcuch przyczyn, drukuje każdy stos błędów z prefiksem Caused by:, dzięki czemu możesz znaleźć pierwotny błąd.

Wyświetlanie asynchronicznych zrzutów stosu

Jeśli używasz platformy, która obsługuje śledzenie operacji asynchronicznych, lub bezpośrednio korzystasz z funkcji planowania w przeglądarce, 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.

Wyświetlanie znanych ramek innych firm w śladach stosu

Gdy mapy źródłowe zawierają pole ignoreList, Konsola domyślnie ukrywa w śladach stosu ramki pochodzące ze źródeł wygenerowanych przez narzędzia do łączenia (np. webpack) lub platformy (np. Angular).

Aby wyświetlić pełny zrzut stosu, w tym ramki innych firm, kliknij Pokaż N więcej ramek u dołu zrzutu stosu.

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

Logowanie żądań XHR i pobierania

Otwórz Ustawienia konsoli i włącz Log XMLHttpRequests, aby rejestrować w konsoli wszystkie żądania XMLHttpRequest i Fetch na bieżąco.

Górny komunikat w przykładzie powyżej pokazuje domyślne grupowanie w konsoli. Poniższy przykład pokazuje, jak wygląda ten sam dziennik po wyłączeniu grupowania wiadomości.

Zachowywanie wiadomości po wczytaniu strony

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

Ukrywanie komunikatów o sieci

Domyślnie przeglądarka rejestruje komunikaty sieciowe w konsoli. Na przykład najważniejszy komunikat w poniższym przykładzie oznacza błąd 404.

Aby ukryć komunikaty o sieci:

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

Wyświetlanie i ukrywanie błędów CORS

W konsoli mogą się pojawiać błędy CORS, jeśli żądania sieciowe nie powiodą się z powodu współdzielenia zasobów pomiędzy serwerami 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 włączono wyświetlanie błędów CORS i wystąpią one, możesz kliknąć te przyciski obok błędów:

• , aby otworzyć żądanie z TypeError związanym z CORS w panelu Sieć.
• , aby uzyskać potencjalne rozwiązanie na karcie Problemy.

Filtruj wiadomości

W konsoli możesz odfiltrować wiadomości na wiele sposobów.

Odfiltrowywanie komunikatów przeglądarki

Otwórz pasek boczny konsoli i kliknij Komunikaty użytkownika, aby wyświetlić tylko komunikaty pochodzące z JavaScriptu strony.

Filtrowanie według poziomu logowania

Narzędzia deweloperskie przypisują większości metod console.* poziomy ważności.

Są 4 poziomy:

• Verbose
• Info
• Warning
• Error

Na przykład console.log() należy do grupy Info, a console.error() należy do grupy Error. W dokumentacji interfejsu API konsoli znajdziesz informacje o poziomie ważności każdej odpowiedniej metody.

Każda wiadomość, którą 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 Error, możesz ukryć pozostałe 3 grupy.

Kliknij menu Poziomy logowania, aby włączyć lub wyłączyć wiadomości Verbose, Info, Warning lub Error.

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

Filtrowanie wiadomości według adresu URL

Wpisz url:, a potem adres URL, aby wyświetlić 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 skrypty https://example.com/a.js i https://example.com/b.js rejestrują wiadomości, url:https://example.com umożliwia skupienie się na wiadomościach z tych 2 skryptów.

Aby ukryć wszystkie wiadomości z określonego adresu URL, wpisz -url:, a potem adres URL, np. https://b.wal.co. Jest to filtr wykluczający adresy URL.

Możesz też wyświetlać wiadomości z jednego adresu URL, otwierając pasek boczny konsoli, rozwijając sekcję Wiadomości dla użytkowników, a następnie 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 Twojej stronie jest reklama. Reklama jest umieszczona w elemencie <iframe> i generuje w konsoli wiele komunikatów. Ponieważ ta reklama znajduje się w innym kontekście JavaScriptu, jednym ze sposobów na ukrycie jej komunikatów jest otwarcie ustawień konsoli i zaznaczenie pola wyboru Tylko wybrany kontekst.

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

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

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

Wyszukiwanie tekstu w logach

Aby wyszukać tekst w wiadomościach logu:

1. Aby otworzyć wbudowany pasek wyszukiwania, naciśnij Command+F (Mac) lub Ctrl+F (Windows, Linux).
2. Wpisz zapytanie na pasku. W tym przykładzie zapytanie to legacy. Opcjonalnie możesz:
   • Kliknij  Uwzględniaj wielkość liter, aby wyszukiwanie uwzględniało wielkość liter.
   • Kliknij  Użyj wyrażenia regularnego, aby wyszukiwać za pomocą 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 JavaScriptu w konsoli. Praktyczne wskazówki znajdziesz w artykule Uruchamianie JavaScriptu.

Opcje kopiowania ciągów znaków

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

• Skopiuj jako literał JavaScript. Zmienia znaczenie odpowiednich znaków specjalnych i otacza ciąg znaków apostrofami, cudzysłowami lub znakami ` w zależności od treści.
• Skopiuj zawartość ciągu znaków. Kopiuje dokładny nieprzetworzony ciąg znaków do schowka, w tym nowe wiersze i inne znaki specjalne.
• Kopiuj jako literał JSON. Formatuje ciąg znaków do prawidłowego formatu JSON.

Ponowne uruchamianie poprzednich wyrażeń i czyszczenie historii

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

Aby wyczyścić historię konsoli, kliknij prawym przyciskiem myszy puste miejsce w Konsoli i w menu kontekstowym wybierz Wyczyść historię konsoli.

Czyszczenie, kopiowanie, rozwijanie, zwijanie i zapisywanie wiadomości

Aby wyczyścić okno Konsola, wykonaj jedną z tych czynności:

• Na pasku działań u góry kliknij block Wyczyść konsolę.
• Naciśnij Ctrl + L lub Cmd + K.
• Kliknij prawym przyciskiem myszy puste miejsce w konsoli i z menu wybierz Wyczyść konsolę.

Aby rozwinąć lub zwinąć wszystkie wiadomości, na pasku działań u góry kliknij rozwiń Rozwiń wszystko lub zwiń Zwiń wszystko.

W menu kontekstowym możesz też:

• Kopiuj konsolę: skopiuj wszystkie bieżące wiadomości do schowka, ale nie historię poprzednich poleceń.
• Zapisz jako… Zapisz wszystkie bieżące wiadomości w pliku .log w formacie zwykłego tekstu.

Obserwowanie wartości wyrażenia w czasie rzeczywistym za pomocą funkcji Live Expressions

Jeśli często wpisujesz w Konsoli to samo wyrażenie JavaScript, możesz utworzyć wyrażenie na żywo. Dzięki wyrażeniom na żywo możesz wpisać wyrażenie tylko raz, a potem przypiąć je u góry konsoli. Wartość wyrażenia jest aktualizowana niemal w czasie rzeczywistym. Zobacz Watch JavaScript Expression Values In Real-Time With Live Expressions (Obserwowanie wartości wyrażeń JavaScript w czasie rzeczywistym za pomocą wyrażeń na żywo).

Wyłączanie natychmiastowej oceny

Podczas wpisywania w konsoli wyrażeń w JavaScript funkcja Eager Evaluation wyświetla podgląd wartości zwracanej przez to wyrażenie. Otwórz ustawienia konsoli i odznacz pole wyboru Eager Evaluation, aby wyłączyć podgląd wartości zwracanej.

Uruchamianie aktywacji użytkownika za pomocą oceny

Aktywacja użytkownika to stan sesji przeglądania, który zależy od działań użytkownika. Stan „aktywny” oznacza, że użytkownik obecnie wchodzi w interakcję ze stroną lub wszedł w nią od momentu wczytania strony.

Aby wywołać aktywację użytkownika przy dowolnej ocenie, otwórz Ustawienia konsoli i zaznacz pole wyboru  Traktuj ocenę kodu jako działanie użytkownika.

Wyłącz autouzupełnianie z historii

Podczas wpisywania wyrażenia w wyskakującym okienku autouzupełniania w konsoli wyświetlają się wyrażenia, które zostały wcześniej uruchomione. Wyrażenia te są poprzedzone znakiem >. W tym przykładzie Narzędzia deweloperskie wcześniej sprawdziły document.querySelector('a') i document.querySelector('img').

Otwórz ustawienia konsoli i odznacz pole wyboru Autouzupełniaj z historii, aby przestać wyświetlać wyrażenia z historii.

Wybieranie kontekstu JavaScript

Domyślnie w menu Kontekst JavaScriptu jest ustawiona wartość top, która reprezentuje kontekst przeglądania głównego dokumentu.

Załóżmy, że na stronie masz reklamę osadzoną w <iframe>. Chcesz uruchomić JavaScript, aby dostosować DOM reklamy. Aby to zrobić, najpierw wybierz kontekst przeglądania reklamy z menu Kontekst JavaScript.

Sprawdzanie właściwości obiektu

W konsoli możesz wyświetlić interaktywną listę właściwości określonego obiektu JavaScriptu.

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.

Wykrywanie właściwości własnych i odziedziczonych

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

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

Ocena niestandardowych funkcji dostępu

Domyślnie Narzędzia deweloperskie nie oceniają utworzonych przez Ciebie funkcji dostępu. Aby ocenić niestandardowy akcesor na obiekcie, kliknij (...).

Wykrywanie właściwości, które można wyliczyć, i tych, których nie można

Właściwości, które można wyliczyć, są jasne. Właściwości, których nie można wyliczyć, są wyciszone. Właściwości, które można wyliczyć, można iterować za pomocą pętli for … in lub metody Object.keys().

Wykrywanie prywatnych właściwości instancji klasy

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

Konsola może też automatycznie uzupełniać właściwości prywatne, nawet jeśli oceniasz je poza zakresem klasy.

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

Zgodnie z notacją ECMAScript obiekt Console umieszcza niektóre właściwości wewnętrzne JavaScriptu w podwójnych nawiasach kwadratowych. Nie możesz wchodzić w interakcje z takimi właściwościami w kodzie. Warto jednak je sprawdzić.

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

• Każdy obiekt ma [[Prototype]].
• Otoczki typów prostych mają właściwość [[PrimitiveValue]].
• ArrayBuffer obiekty mają te właściwości:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Oprócz właściwości specyficznych dla ArrayBuffer obiekty WebAssembly.Memory mają właściwość [[WebAssemblyMemory]].
• Kolekcje kluczowe (mapy i zbiory) mają właściwość [[Entries]], która zawiera ich wpisy kluczowe.
• Promise obiekty mają te właściwości:
  • [[PromiseState]]: oczekuje, zrealizowano lub odrzucono
  • [[PromiseResult]]: undefined – jeśli oczekuje, <value> – jeśli zrealizowano, <reason> – jeśli odrzucono
• Obiekty Proxy mają te właściwości: obiekt [[Handler]], obiekt [[Target]] i [[isRevoked]] (włączony lub wyłączony).

Sprawdzanie funkcji

W JavaScript funkcje są też obiektami z właściwościami. 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 dla JavaScriptu, 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. Aby sprawdzić zakresy funkcji podczas debugowania, przeczytaj artykuł Wyświetlanie i edytowanie właściwości lokalnych, zamknięć i globalnych.
• Funkcje powiązane 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 skorzystać z jednego z tych procesów:

• Kliknij Wyczyść konsolę .
• Kliknij wiadomość prawym przyciskiem myszy, a następnie wybierz Wyczyść konsolę.
• Wpisz clear() w konsoli, a potem naciśnij Enter.
• Wywołaj funkcję console.clear() z JavaScriptu na stronie.
• Naciśnij Control+L, gdy konsola jest aktywna.