Dokumentacja interfejsu Console Utilities API

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Interfejs Console utilities API zawiera zbiór wygodnych funkcji do wykonywania typowych czynności zadania: wybieranie i sprawdzanie elementów DOM, wysyłanie zapytań dotyczących obiektów, wyświetlanie danych w czytelnym formacie, zatrzymywanie uruchamianie programu profilującego, monitorowanie zdarzeń DOM, wywołań funkcji itd.

Szukasz funkcji console.log(), console.error() i pozostałych funkcji console.*? Zobacz Dokumentacja interfejsu Console API.

$_

$_ zwraca wartość ostatnio ocenionego wyrażenia.

W poniższym przykładzie oceniane jest wyrażenie proste (2 + 2). Właściwość $_ będzie wtedy , która zawiera tę samą wartość:

$_ to ostatnio oceniane wyrażenie.

W następnym przykładzie oceniane wyrażenie początkowo zawiera tablicę nazw. Sprawdzanie $_.length, aby znaleźć długość tablicy, wartość przechowywana w $_ zmienia się na najnowszą oceniane wyrażenie, 4:

Zmienna $_ zmienia się wraz z ocenianiem nowych poleceń.

0–4 USD

Polecenia $0, $1, $2, $3 i $4 działają jako odniesienie historyczne do 5 ostatnich DOM elementów sprawdzanych w panelu Elements lub ostatnich 5 obiektów stosu JavaScript wybranych w w panelu Profile. $0 zwraca ostatnio wybrany element lub obiekt JavaScript ($1) zwraca drugi ostatnio wybrany i tak dalej.

W poniższym przykładzie w panelu Elements został wybrany element img. W panelu Konsola Sprawdzono $0 i wyświetla ten sam element:

Przykład: $0.

Ilustracja poniżej przedstawia inny element wybrany na tej samej stronie. Etykieta $0 odnosi się teraz do nowych wybrany element, natomiast $1 zwraca wybrany wcześniej:

Przykład: $1.

$(selektor [, startNode])

$(selector) zwraca odwołanie do pierwszego elementu DOM z określonym selektorem arkusza CSS. Kiedy jest wywoływana za pomocą jednego argumentu, jest to skrót do funkcji document.querySelector().

Ten przykład zwraca odwołanie do pierwszego elementu <img> w dokumencie:

Przykład $(&#39;img&#39;).

kliknij zwrócony wynik prawym przyciskiem myszy i wybierz Pokaż w panelu Elementy, aby znaleźć go w modelu DOM. Przewiń do widoku, aby wyświetlić go na stronie.

Ten przykład zwraca odwołanie do obecnie wybranego elementu i wyświetla jego src usługa:

Przykład $(&#39;img&#39;).src.

Ta funkcja obsługuje również drugi parametr, startNode, który określa „element” lub Węzeł z aby wyszukać elementy. Wartość domyślna tego parametru to document.

Poniższy przykład zwraca odwołanie do pierwszego elementu img, który jest elementem potomnym elementu devsite-header-background. wyświetla właściwość src:

Przykład $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(selektor) zwraca tablicę elementów, które pasują do podanego selektora arkusza CSS. To polecenie jest odpowiada wywołaniu Array.from(document.querySelectorAll()).

W poniższym przykładzie użyto atrybutu $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}


Przykład użycia <!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> do utworzenia tablicy zawierającej wszystkie elementy <codetranslate=&lt;img&gt; elementy
wyświetlane w bieżącym dokumencie po wybranym węźle:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



Przykład użycia funkcji $() do zaznaczenia wszystkich obrazów widocznych w dokumencie po kliknięciu elementu div w celu wyświetlenia ich źródeł.





$x(ścieżka [, startNode])



$x(path) zwraca tablicę elementów DOM pasujących do danego wyrażenia XPath.



Na przykład ten ciąg zwraca wszystkie elementy <p> na stronie:


$x("//p")



Przykład użycia selektora XPath.



Ten przykład zwraca wszystkie elementy <p>, które zawierają elementy <a>:


$x("//p[a]")



Przykład użycia bardziej skomplikowanego selektora XPath.



Podobnie jak inne funkcje selektora $x(path) ma opcjonalny drugi parametr: startNode,
określające element lub węzeł, z którego ma nastąpić wyszukiwanie elementów.



Przykład użycia selektora XPath z elementem startNode.



clear()



clear() wyczyści konsolę historii.


clear();



kopiuj(obiekt)



copy(object) kopiuje do schowka reprezentację ciągu tekstowego określonego obiektu.


copy($0);



debug(funkcja)



Po wywołaniu określonej funkcji debuger jest wywoływany i działa w środku funkcji na
Panel Źródła umożliwiający przejście przez kod i debugowanie go.


debug(getData);



Podział funkcji w obrębie funkcji za pomocą funkcji debug().



Użyj polecenia undebug(fn), aby przestać przerywać działanie funkcji, lub skorzystaj z interfejsu, aby wyłączyć wszystkie punkty przerwania.



Więcej informacji o punktach przerwania znajdziesz w artykule Pause Your Code With Breakpoints (Wstrzymaj kod za pomocą punktów przerwania).



dir(object)



dir(object) wyświetla listę w stylu obiektu wszystkich właściwości określonego obiektu. Ta metoda
to skrót do metody console.dir() interfejsu Console API.



Poniższy przykład pokazuje różnicę między wartością document.body bezpośrednio w funkcji
wiersza poleceń i dir() do wyświetlenia tego samego elementu:


document.body;
dir(document.body);



Logowanie document.body z funkcją dir() i bez niej.



Więcej informacji znajdziesz we wpisie console.dir() w interfejsie Console API.



dirxml(obiekt)



dirxml(object) wyświetla reprezentację określonego obiektu w formacie XML, tak jak w panelu Elements.
Ta metoda jest odpowiednikiem metody console.dirxml().



inspect(object/function)



inspect(object/function) otworzy i wybierze określony element lub obiekt w odpowiednim
panel: panel Elements w przypadku elementów DOM lub panel Profile w przypadku obiektów na stercie JavaScriptu.



Ten przykład pozwala otworzyć element document.body w panelu Elements:


inspect(document.body);



Sprawdzanie elementu za pomocą metody inspect().



Podczas przekazywania funkcji do sprawdzenia funkcja otwiera za Ciebie dokument w panelu Źródła.
do sprawdzenia.



getEventListeners(object)



Funkcja getEventListeners(object) zwraca detektory zdarzeń zarejestrowane w określonym obiekcie. 
zwracana wartość to obiekt zawierający tablicę dla każdego zarejestrowanego typu zdarzenia (click lub
keydown). Elementy każdej tablicy są obiektami opisującymi zarejestrowany detektor
dla każdego typu reklamy. Na przykład poniższa lista zawiera wszystkie detektory zdarzeń zarejestrowane w dokumencie
obiekt:


getEventListeners(document);



Dane wyjściowe funkcji getEventListeners().



Jeśli w określonym obiekcie zarejestrowany jest więcej niż jeden detektor, tablica zawiera element składowy.
dla każdego słuchacza. W przykładzie poniżej mamy 2 detektory zdarzeń zarejestrowane na
element dokumentu dla zdarzenia click:



Wielu słuchaczy.



Możesz rozwijać każdy z tych obiektów, aby poznać ich właściwości:



Rozwinięty widok obiektu odbiornika.



Więcej informacji znajdziesz w artykule Sprawdzanie właściwości obiektu.



klucze(obiekt)



keys(object) zwraca tablicę zawierającą nazwy właściwości należących do określonego
obiektu. Aby uzyskać powiązane wartości tych samych właściwości, użyj funkcji values().



Załóżmy na przykład, że aplikacja zdefiniowała następujący obiekt:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



Przy założeniu, że pole player zostało zdefiniowane w globalnej przestrzeni nazw (dla uproszczenia), wpisz keys(player) i
values(player) w konsoli daje taki wynik:



Przykład metod keys() i value().



monitor(funkcja)



Gdy wskazana funkcja zostanie wywołana, w konsoli zostanie zarejestrowany komunikat wskazujący
nazwa funkcji wraz z argumentami, które są przekazywane do funkcji w momencie jej wywołania.


function sum(x, y) {
  return x + y;
}
monitor(sum);



Przykład metody monitor().



Aby zatrzymać monitorowanie, użyj unmonitor(function).



monitorEvents(object [, events])



Gdy w określonym obiekcie wystąpi jedno z podanych zdarzeń, obiekt Event jest logowany w funkcji
konsoli. Możesz określić jedno zdarzenie do monitorowania, tablicę zdarzeń lub jedno ze zdarzeń ogólnych.
"typy" zmapowane na wstępnie zdefiniowany zbiór zdarzeń. Zobacz przykłady poniżej.



To pokazuje, jak monitorować wszystkie zdarzenia zmiany rozmiaru obiektu window.


monitorEvents(window, "resize");



Monitorowanie zdarzeń zmiany rozmiaru okna.



Poniżej zdefiniowaliśmy tablicę, która ma monitorować zarówno „zmianę rozmiaru” i „scroll” zdarzeń na obiekcie window:


monitorEvents(window, ["resize", "scroll"])



Możesz też określić jeden z dostępnych „typów” zdarzeń, czyli ciągów mapowanych na wstępnie zdefiniowane zbiory
zdarzeń. W tabeli poniżej znajdziesz dostępne typy zdarzeń i powiązane z nimi mapowania zdarzeń:



Typ zdarzenia i Odpowiadające im zmapowane zdarzenia
mysz„mousedown”, „mouseup”, „click”, „dblclick”, „mousemove”, „mouseover”, „mouseout”, „mousewheel”
klucz„keydown”, „keyup”, „keydown”, „textInput”
dotknij„touchstart”, „touchmove”, „touchend”, „touchcancel”
kontrola„zmień rozmiar”, „przewijanie”, „powiększenie”, „fokus”, „rozmycie”, „wybierz”, „zmień”, „prześlij”, „reset”



Na przykład w poniższym przykładzie użyto „klucza” typ zdarzenia wszystkie odpowiednie kluczowe zdarzenia w tekście wejściowym
obecnie wybrane w panelu Elements.


monitorEvents($0, "key");



Poniżej znajdują się przykładowe dane wyjściowe po wpisaniu znaków w polu tekstowym:



Monitorowanie kluczowych zdarzeń.



Aby zatrzymać monitorowanie, użyj unmonitorEvents(object[, events]).



profile([nazwa]) i profileEnd([nazwa])



profile() rozpoczyna sesję profilowania procesora JavaScript z opcjonalną nazwą. profileEnd()
wypełnia profil i wyświetla wyniki w sekcji Skuteczność > Ścieżka główna.





Aby rozpocząć profilowanie:


profile("Profile 1")



Aby zatrzymać profilowanie i zobaczyć wyniki w sekcji Skuteczność > Główny utwór:


profileEnd("Profile 1")



Wynik w sekcji Skuteczność > Główny utwór:



Profil 1 na głównej ścieżce skuteczności.



Profile mogą być również zagnieżdżone. To polecenie działa na przykład w dowolnej kolejności:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



Wywołaj z konsoli queryObjects(Constructor), aby zwrócić tablicę utworzonych obiektów
za pomocą określonego konstruktora. Na przykład:



    

  • queryObjects(Promise) Zwraca wszystkie wystąpienia funkcji Promise.
    • 

  • queryObjects(HTMLElement) Zwraca wszystkie elementy HTML.
    • 

  • queryObjects(foo), gdzie foo to nazwa klasy. Zwraca wszystkie obiekty, które zostały utworzone
przez: new foo().
    • 




Zakres queryObjects() to aktualnie wybrany kontekst wykonania w konsoli.



table(dane [, kolumny])



Rejestruj dane obiektów za pomocą formatowania tabeli, przekazując obiekt danych z opcjonalnymi nagłówkami kolumn.
To jest skrót do console.table().



Aby na przykład wyświetlić listę nazw przy użyciu tabeli w konsoli, wykonaj następujące czynności:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Przykład metody table().



undebug(funkcja)



undebug(function) zatrzymuje debugowanie określonej funkcji, tak aby gdy funkcja
, debuger nie jest już wywoływany. Jest używany w połączeniu z zasadą debug(fn).


undebug(getData);



unmonitor(funkcja)



unmonitor(function) zatrzymuje monitorowanie określonej funkcji. Jest używany w połączeniu z
monitor(fn)


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) przestaje monitorować zdarzenia dla określonego obiektu i zdarzeń. Dla:
następujący przykład zatrzymuje monitorowanie zdarzeń dotyczących obiektu window:


unmonitorEvents(window);



Możesz też wybiórczo zatrzymywać monitorowanie konkretnych zdarzeń dotyczących obiektu. Na przykład:
kod rozpoczyna monitorowanie wszystkich zdarzeń myszy w aktualnie wybranym elemencie, a następnie przestaje monitorować
„mousemove” zdarzenia (np. w celu zmniejszenia szumu generowanego przez konsolę):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



wartości(obiekt)



values(object) zwraca tablicę zawierającą wartości wszystkich właściwości należących do określonego
obiektu.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



Wynik wartości(odtwarzacz).