Informacje o funkcjach konsoli

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Ta strona zawiera informacje o funkcjach związanych z konsolą Narzędzi deweloperskich w Chrome. Zakładamy, że wiesz już, jak wyświetlać zapisane wiadomości i uruchamiać JavaScript w konsoli. Jeśli nie, zapoznaj się z artykułem Rozpoczynanie.

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

Otwórz konsolę

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

Otwieranie panelu Konsoli

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

Konsola.

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

Polecenie wyświetlania panelu konsoli.

Otwórz konsolę w panelu

Naciśnij Escape lub kliknij Dostosowywanie i sterowanie narzędziami dla programistów Dostosowywanie i zarządzanie Narzędziami deweloperskimi., a następnie wybierz Pokaż panel konsoli.

Pokaż panel konsoli.

U dołu okna DevTools pojawi się panel z otwartą kartą Konsola.

Karta Konsole w panelu.

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

Polecenie wyświetlania karty Konsola w panelu.

Otwórz ustawienia konsoli.

W prawym górnym rogu Konsoli kliknij Ustawienia. Ustawienia konsoli.

Ustawienia konsoli.

Linki poniżej zawierają opisy poszczególnych ustawień:

Kliknij Pokaż pasek boczny konsoli Pokaż pasek boczny konsoli., aby wyświetlić pasek boczny, który jest przydatny do filtrowania.

Pasek boczny konsoli.

Wyświetl wiadomości

Ta sekcja zawiera funkcje, które zmieniają sposób wyświetlania wiadomości w Konsoli. Aby zapoznać się z praktycznymi wskazówkami, przeczytaj artykuł 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 Rejestrowanie żądań XHR i Fetch.

Wyświetlanie wiadomości z punktów przerwania

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

Konsola oznacza komunikaty utworzone przez warunkowe punkty przerwania i punkty logowania.

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

Wyświetlanie zrzutów stosu

Konsola automatycznie rejestruje ścieżki wywołań błędów i ostrzeżeń. Ślad 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ć ślad stosu, kliknij ikonę rozwijania Rozwiń. obok błędu lub ostrzeżenia.

Ślady stosu.

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

Console może wyświetlać w śladzie stosu łańcuchy przyczyn błędów.

Aby ułatwić debugowanie, możesz określić przyczyny błędów podczas przechwytywania i ponownie zgłaszania błędów. Gdy Console przechodzi w górę łańcucha przyczyn, wyświetla każdy stos błędów z prefiksem Caused by:, aby można było znaleźć pierwotny błąd.

Łańcuch przyczyn błędów z prefiksem „Spowodzony przez:” w wyświetleniu ścieżki wywołania.

Wyświetlanie asynchronicznych zrzutów stosu

Jeśli używana przez Ciebie platforma obsługuje tę funkcję lub jeśli używasz bezpośrednio prymitywnych funkcji planowania w przeglądarce, takich jak setTimeout, DevTools może śledzić operacje asynchroniczne, łącząc obie części kodu asynchronicznego.

W tym przypadku zrzut stosu pokazuje „pełną historię” operacji asynchronicznej.

Asynchroniczny zrzut stosu.

wyświetlanie znanych ramek innych firm w śladach stosu,

Gdy mapy źródeł zawierają pole ignoreList, Console domyślnie ukrywa w śladach stosu ramki zewnętrzne ze źródeł wygenerowanych przez narzędzia do tworzenia pakietów (np. webpack) lub frameworki (np. Angular).

Aby wyświetlić pełny ślad wywołania, w tym ramki kodu innych firm, u dołu ścieżki wywołania kliknij Pokaż N dodatkowych ramek.

Pokaż N dodatkowych klatek.

Aby zawsze wyświetlać pełny ślad 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.

Rejestrowanie żądań XHR i pobierania

Otwórz Ustawienia konsoli i włącz opcję Rejestruj żądania XMLHttpRequest, aby rejestrować w konsoli wszystkie żądania XMLHttpRequest i Fetch w miarę ich pojawiania się.

Rejestrowanie żądań XMLHttpRequest i Fetch.

Górny komunikat w przykładzie powyżej pokazuje domyślne zachowanie konsoli podczas grupowania. 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 odgrupowaniu.

zachowywać wiadomości po wczytaniu stron;

Domyślnie Konsola jest czyszczona po załadowaniu nowej strony. Aby wiadomości były dostępne podczas wczytywania strony, otwórz Ustawienia konsoli i odznacz pole wyboru Zachowaj dziennik.

Ukrywanie komunikatów sieciowych

Domyślnie przeglądarka rejestruje wiadomości sieciowe w konsoli. Na przykład pierwsza wiadomość w tym przykładzie to błąd 404.

komunikat 404 w konsoli.

Aby ukryć komunikaty o sieci:

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

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

Konsola może wyświetlać błędy CORS, jeśli żądania sieciowe nie powiedzie się z powodu współdzielenia zasobów mię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.

wyświetlać błędy CORS w konsoli.

Jeśli konsola jest skonfigurowana tak, aby wyświetlać błędy CORS, możesz kliknąć przyciski obok błędów:

Przyciski Sieć i Problemy.

Filtruj wiadomości

Wiadomości w Konsoli można filtrować na wiele sposobów.

Filtrowanie komunikatów przeglądarki

Otwórz pasek boczny konsoli i kliknij Komunikaty dla użytkownika, aby wyświetlać tylko wiadomości pochodzące z kodu JavaScript strony.

wyświetlanie wiadomości od użytkowników;

Filtrowanie według poziomu logowania

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

Są 4 poziomy:

  • Verbose
  • Info
  • Warning
  • Error

Na przykład console.log() należy do grupy Info, a console.error() do grupy Error. W przewodniku po interfejsie API Konsoli znajdziesz informacje o poważnym poziomie każdej metody.

Każdy komunikat, który przeglądarka rejestruje 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 dziennika, aby włączyć lub wyłączyć wiadomości Verbose, Info, Warning lub Error.

Menu Poziomy logowania.

Możesz też filtrować według poziomu logowania. Aby to zrobić, Pokaż pasek boczny konsoli. otwórz pasek boczny konsoli, a potem kliknij Błędy, Ostrzeżenia, Informacje lub Szczegóły.

wyświetlanie ostrzeżeń za pomocą paska bocznego;

Filtrowanie wiadomości według adresu URL

Aby wyświetlić tylko wiadomości pochodzące z tego adresu URL, wpisz url:, a następnie adres URL. Po wpisaniu url: DevTools wyświetla wszystkie odpowiednie adresy URL.

Filtr adresów 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, możesz użyć opcji url:https://example.com, aby skupić się na wiadomościach z tych 2 skryptów.

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

Filtr wykluczający adresy URL. Narzędzia dla programistów ukrywają wszystkie komunikaty pasujące do podanego adresu URL.

Możesz też wyświetlać wiadomości z pojedynczego 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 Ci zależy.

Wyświetlanie wiadomości z konkretnego skryptu.

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

Załóżmy, że masz reklamę na stronie. Reklama jest umieszczona w <iframe> i generuje dużo wiadomości w konsoli. Ta reklama znajduje się w innym kontekście JavaScriptu, więc aby ukryć jej komunikaty, możesz otworzyć Ustawienia konsoli i odznaczyć pole wyboru Tylko wybrany kontekst.

odfiltrowywać wiadomości, które nie pasują do wyrażenia regularnego;

Aby odfiltrować wiadomości, które nie pasują do tego wzorca, wpisz wyrażenie regularne, np. /[foo]\s[bar]/, w polu tekstowym Filtr. Spacje nie są obsługiwane. Zamiast nich użyj \s. DevTools sprawdza, czy wzór występuje w tekście wiadomości lub skrypcie, który spowodował zapisanie komunikatu.

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

Odfiltrowuje wiadomości, które nie pasują do wzorca /[gm][ta][mi]/.

Aby wyszukać tekst w wiadomościach z logu:

  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. Pisze zapytanie.Opcjonalnie możesz:
    • Aby zapytanie uwzględniało wielkość liter, kliknij Uwzględniaj wielkość liter. Zgodność wielkości liter.
    • Aby wyszukać za pomocą wyrażenia regularnego, kliknij Przycisk Wyrażenie regularne Użyj 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 kodu JavaScript w Konsoli. Aby zapoznać się z tą funkcją, przeczytaj artykuł Uruchami JavaScript.

Opcje kopiowania tekstu

Konsole domyślnie wyświetla ciągi jako prawidłowe literale JavaScript. Kliknij prawym przyciskiem myszy wyjście i wybierz jedną z trzech opcji kopiowania:

  • Kopiuj jako literał JavaScript. Zmienia znaczenie odpowiednich znaków specjalnych i okala ciąg znaków w cudzysłowie pojedynczym, podwójnym lub odwróconym w zależności od treści.
  • Kopiowanie zawartości ciągu znaków. Kopiuje do schowka dokładny ciąg znaków, w tym nowe linie i inne znaki specjalne.
  • Kopiowanie jako literał JSON. Formatuje ciąg na prawidłowy kod JSON.

Opcje kopiowania.

Ponowne wykonywanie wyrażeń z historii

Aby przewijać historię wyrażeń JavaScript, które zostały wcześniej wykonane w Konsoli, naciskaj klawisz strzałka w górę. Aby ponownie uruchomić wyrażenie, naciśnij Enter.

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

Jeśli w Konsoli wielokrotnie wpisujesz ten sam wyrażenie JavaScriptu, łatwiej Ci będzie utworzyć wyrażenie na żywo. Dzięki wyrażeniami na żywo możesz wpisać wyrażenie raz, a następnie przypiąć je u góry konsoli. Wartość wyrażenia jest aktualizowana niemal w czasie rzeczywistym. Zobacz wartości wyrażeń JavaScript w czasie rzeczywistym za pomocą wyrażeń na żywo

Wyłączanie szybkiej oceny

Gdy wpisujesz wyrażenia JavaScript w Konsoli, funkcja Eager Evaluation wyświetla podgląd wartości zwracanej przez wyrażenie. Otwórz Ustawienia konsoli i odznacz pole wyboru Szybka ocena, aby wyłączyć podgląd wartości zwracanej.

Aktywowanie 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 jej wczytania.

Aby aktywować użytkownika za pomocą dowolnej oceny, otwórz Ustawienia konsoli i zaznacz Pole wyboru. Treści Traktuj ocenę kodu jako działanie użytkownika.

Wyłączanie autouzupełniania z historii

Gdy wpisujesz wyrażenie, wyskakujące okienko autouzupełniania w Konsoli wyświetla wyrażenia, które zostały wcześniej wykonane. Te wyrażenia są poprzedzone znakiem >. W tym przykładzie DevTools wcześniej oceniły document.querySelector('a') i document.querySelector('img').

Wyskakujące okienko autouzupełniania z wyrazami z historii.

Otwórz Ustawienia konsoli i odznacz pole wyboru Autouzupełnianie z historii, aby zatrzymać wyświetlanie wyrażeń z historii.

Wybieranie kontekstu JavaScript

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

Menu kontekstu JavaScript.

Załóżmy, że na stronie masz reklamę umieszczoną w elementach <iframe>. Chcesz uruchomić JavaScript, aby zmienić DOM reklamy. Aby to zrobić, musisz najpierw wybrać kontekst przeglądania reklamy w menu Kontekst JavaScript.

Wybór innego kontekstu JavaScript.

Sprawdzanie właściwości obiektu

Konsola może wyświetlać interaktywną listę właściwości wybranego 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.

rozpoznawać właściwości własne i odziedziczone;

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

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

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

Wyświetlanie odziedziczonych właściwości.

Ocena akcesoriów niestandardowych

Domyślnie narzędzia DevTools nie oceniają utworzonych przez Ciebie funkcji dostępu. Akcesor niestandardowy.Aby ocenić niestandardowy interfejs dostępu obiektu, kliknij (...). Oceniany niestandardowy uchwyt.

Właściwości zliczalne i niewyliczalne

Właściwości zliczalne mają jaskrawy kolor. Właściwości niewyliczalne są wyciszone. Właściwości zliczalne i niewyliczalne.Właściwości z metodą pętli for … in lub metodą Object.keys() mogą być iterowane.

sprawdzać prywatne właściwości instancji klasy,

Konsola oznacza właściwości prywatne wystąpień klasy z prefiksem #.

Prywatna właściwość instancji klasy.

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

Autouzupełnianie danych o własności prywatnej.

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

Korzystając z notacji ECMAScript, konsola otacza niektóre właściwości wewnętrzne JavaScriptu podwójnymi nawiasami kwadratowymi. Nie możesz wchodzić w interakcję z tymi usługami w kodze. Warto jednak je sprawdzić.

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

Sprawdzanie funkcji

W JavaScriptie funkcje są też obiektami z właściwościami. Jeśli jednak wpiszesz nazwę funkcji w konsoli, DevTools ją wywoła, zamiast wyświetlać jej właściwości.

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

sprawdzać 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]]. Wyświetla wartości i wyrażenia, do których ma dostęp funkcja. Aby sprawdzić zakresy funkcji podczas debugowania, zapoznaj się z artykułem Wyświetlanie i edytowanie właściwości lokalnych, zamkniętych i globalnych.
  • Funkcje związane mają te właściwości:
    • [[TargetFunction]]. Docelowy element bind().
    • [[BoundThis]]. Wartość this.
    • [[BoundArgs]]. Tablica argumentów funkcji. Funkcja ograniczona.
  • Funkcje generatora są oznaczone właściwością [[IsGenerator]]: true.Funkcja generatora.
  • Generatory zwracają obiekty iteracyjne, które 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 odbiera wartość. Obiekt Iterator.

Wyczyszczenie konsoli

Aby wyczyścić konsolę, możesz użyć dowolnego z tych procesów:

  • Kliknij Wyczyść konsolę.Wyczyść.
  • Kliknij wiadomość prawym przyciskiem myszy i wybierz Wyczyść konsolę.
  • Wpisz clear() w Konsoli i naciśnij Enter.
  • Wywołaj funkcję console.clear() z JavaScriptu swojej strony internetowej.
  • Naciśnij Control + L, gdy konsola jest aktywna.