Dokumentacja interfejsu Console Utilities API

Sofia Emelianova
Sofia Emelianova

Interfejs Console Utilities API zawiera zbiór funkcji ułatwiających wykonywanie typowych zadań: wybieranie i przeglądanie elementów DOM, wysyłanie zapytań do obiektów, wyświetlanie danych w czytelnym formacie, zatrzymywanie i uruchamianie profilatora, monitorowanie zdarzeń DOM oraz wywołań funkcji itp.

Szukasz funkcji console.log(), console.error() i reszty funkcji console.*? Zobacz dokumentację interfejsu Console API.

_ USD

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

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

$_ to ostatnio oceniony wyrażenie.

W następnym przykładzie oceniane wyrażenie początkowo zawiera tablicę nazw. Podczas wykonywania operacji $_.length w celu znalezienia długości tablicy wartość przechowywana w elementach $_ zmienia się na ostatnio oceniony wyrażenie, czyli 4:

$_ zmienia się, gdy oceniane są nowe polecenia.

0–4 PLN

Polecenia $0, $1, $2, $3$4 działają jako odniesienie historyczne do ostatnich 5 elementów DOM zbadanych w panelu Elementy lub ostatnich 5 obiektów stosu JavaScript wybranych w panelu Profile. $0 zwraca ostatnio wybrany element lub obiekt JavaScript, $1 – drugi z ostatnich itd.

W tym przykładzie w panelu Elementy wybrany jest element img. W panelu Konsola $0 został sprawdzony i wyświetla ten sam element:

Przykład: $0.

Na obrazie poniżej widać inny element wybrany na tej samej stronie. Teraz $0 odnosi się do nowo wybranego elementu, a $1 zwraca wcześniej wybrany element:

Przykład: $1.

$(selektor [, startNode])

$(selector) zwraca odwołanie do pierwszego elementu DOM z określonym selektorem CSS. Gdy jest wywoływana z jednym argumentem, jest skrótem do funkcji document.querySelector().

W tym przykładzie zwracane jest odniesienie do pierwszego elementu <img> w dokumencie:

Przykład użycia funkcji $(&#39;img&#39;).

Kliknij prawym przyciskiem myszy zwrócony wynik i wybierz Pokaż w panelu Elementy, aby znaleźć go w DOM, lub Przewijaj, aby wyświetlić, aby pokazać go na stronie.

W tym przykładzie zwracana jest referencja do aktualnie wybranego elementu i wyświetlana jest jego właściwość src:

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

Ta funkcja obsługuje też drugi parametr startNode, który określa „element” lub węzeł, w których szukać elementów. Wartością domyślną tego parametru jest document.

Ten przykład zwraca odwołanie do pierwszego elementu img, który jest potomkiem elementu devsite-header-background, i wyświetla jego właściwość src:

Przykład użycia funkcji $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(selektor) zwraca tablicę elementów pasujących do podanego selektora arkusza CSS. To polecenie 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 instrukcji<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> w celu utworzenia tablicy wszystkich instrukcji <code translate=Elementy<img>, które pojawiają się 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 $(), aby wybrać wszystkie obrazy pojawiające się po elemencie div w dokumencie i wyświetlić ich źródła.

$x(path [, startNode])

$x(path) zwraca tablicę elementów DOM, które pasują do podanego wyrażenia XPath.

Na przykład ten fragment kodu 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 złożonego selektora XPath

Podobnie jak inne funkcje selektora, $x(path) ma opcjonalny drugi parametr startNode, który określa element lub węzeł, w których mają być wyszukiwane elementy.

Przykład użycia selektora XPath z startNode.

clear()

clear() wyczyści konsolę historii.

clear();

copy(object)

copy(object) kopiuje do schowka ciąg znaków reprezentujący podany obiekt.

copy($0);

debug(function)

Gdy wywołana zostanie określona funkcja, uruchamiany jest debuger, który przerywa działanie w funkcjach w panelu Źródła, co umożliwia przechodzenie po kodzie i jego debugowanie.

debug(getData);

Przerwanie w funkcji za pomocą debug().

Użyj undebug(fn), aby zatrzymać przerwanie funkcji, lub użyj 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(obiekt)

dir(object) wyświetla listę wszystkich właściwości wybranego obiektu w formacie obiektu. Ta metoda jest skrótem do metody console.dir() interfejsu Console API.

W tym przykładzie widać różnicę między oceną document.body bezpośrednio na linii poleceń a wyświetleniem tego samego elementu za pomocą polecenia dir():

document.body;
dir(document.body);

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

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

dirxml(obiekt)

dirxml(object) wypisuje reprezentację XML określonego obiektu, jaką widać w panelu Elementy. Ta metoda jest równoważna metodzie console.dirxml().

inspect(object/function)

inspect(object/function) otwiera i wybiera określony element lub obiekt w odpowiednim panelu: Elementy (elementy DOM) lub panel Profile (obiekty stosu JavaScript).

W tym przykładzie document.body otwiera się w panelu Elementy:

inspect(document.body);

Sprawdzanie elementu za pomocą metody inspect().

Gdy przekazujesz funkcję do sprawdzenia, otwiera ona dokument w panelu Źródła.

getEventListeners(object)

getEventListeners(object) zwraca detektory zdarzeń zarejestrowane w wybranym obiekcie. Zwracana wartość to obiekt zawierający tablicę dla każdego zarejestrowanego typu zdarzenia (np. click lub keydown). Elementy każdej tablicy to obiekty opisujące zarejestrowanego odsłuchiwanie w przypadku danego typu. Na przykład poniżej znajduje się lista wszystkich detektorów zdarzeń zarejestrowanych w obiekcie dokumentu:

getEventListeners(document);

Wyjście funkcji getEventListeners().

Jeśli w przypadku określonego obiektu zarejestrowanych jest więcej niż 1 słuchacz, tablica zawiera po jednym elemencie dla każdego z nich. W poniższym przykładzie są 2 detektory zdarzeń zarejestrowane w elemencie dokumentu dla zdarzenia click:

wielu słuchaczy;

Możesz rozwinąć każdy z tych obiektów, aby zapoznać się z ich właściwościami:

Rozwinięty widok obiektu listener

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 Twoja aplikacja zdefiniowała ten 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), wpisanie w Konsoli keys(player) i values(player) spowoduje następujący wynik:

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

monitor(function)

Gdy wywołana zostanie określona funkcja, w konsoli zostanie zarejestrowany komunikat zawierający jej nazwę oraz argumenty przekazane do niej podczas 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 wybranym obiekcie wystąpi jedno ze zdarzeń, obiekt Event zostanie zarejestrowany w konsoli. Możesz określić jedno zdarzenie do monitorowania, tablicę zdarzeń lub jedno z typów zdarzeń ogólnych zmapowanych 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ższy kod definiuje tablicę do monitorowania zdarzeń „resize” i „scroll” w obiekcie window:

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

Możesz też podać jeden z dostępnych „typów” zdarzeń, czyli ciągów znaków, które są mapowane na wstępnie zdefiniowane zbiory zdarzeń. Tabela poniżej zawiera listę dostępnych typów zdarzeń i powiązanych z nimi mapowań zdarzeń:

Typ zdarzenia i odpowiednie zmapowane zdarzenia
mysz„mousedown”, „mouseup”, „click”, „dblclick”, „mousemove”, „mouseover”, „mouseout”, „mousewheel”
klucz„keydown”, „keyup”, „keydown”, „textInput”
dotknij„touchstart”, „touchmove”, „touchend”, „touchcancel”.
kontrola„resize”, „scroll”, „zoom”, „focus”, „blur”, „select”, „change”, „submit”, „reset”.

Na przykład poniższy kod używa typu zdarzenia „key” (kluczowe) dla wszystkich odpowiadających mu kluczowych zdarzeń w polu tekstowym, które jest aktualnie wybrane w panelu Elementy.

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([name]) i profileEnd([name])

profile() rozpoczyna sesję profilowania procesora JavaScript z opcjonalną nazwą. profileEnd()zawiera profil i wyświetla wyniki na ścieżce Skuteczność > Główna.

Aby rozpocząć profilowanie:

profile("Profile 1")

Aby zatrzymać profilowanie i wyświetlić wyniki na ścieżce Skuteczność > Główna:

profileEnd("Profile 1")

Wynik na ścieżce Skuteczność > Główny:

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

Profile można też zagnieżdżać. To polecenie działa na przykład w dowolnej kolejności:

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

queryObjects(Constructor)

Wywołaj w konsoli queryObjects(Constructor), aby zwrócić tablicę obiektów utworzonych przy użyciu określonego konstruktora. Na przykład:

  • queryObjects(Promise). Zwraca wszystkie wystąpienia parametru Promise.
  • queryObjects(HTMLElement). Zwraca wszystkie elementy HTML.
  • queryObjects(foo), gdzie foo to nazwa klasy. Zwraca wszystkie obiekty, które zostały zainicjowane za pomocą funkcji new foo().

Zakres funkcji queryObjects() to wybrany w konsoli bieżący kontekst wykonania.

tabela(dane [, kolumny])

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

Aby na przykład wyświetlić listę nazw za pomocą tabeli w konsoli, wykonaj te czynności:

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

Przykład metody table().

undebug(function)

undebug(function) przerywa debugowanie określonej funkcji, tak aby podczas jej wywołania nie był już wywoływany debuger. Jest on używany w połączeniu z elementem debug(fn).

undebug(getData);

unmonitor(function)

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

unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) zatrzymuje monitorowanie zdarzeń w przypadku wskazanego obiektu i zdarzeń. Na przykład następujący kod zatrzymuje wszystkie monitorowanie zdarzeń obiektu okna:

unmonitorEvents(window);

Możesz też selektywnie zatrzymać monitorowanie określonych zdarzeń w obiekcie. Na przykład ten kod zaczyna monitorować wszystkie zdarzenia myszy dotyczące aktualnie wybranego elementu, a potem przestaje monitorować zdarzenia „mousemove” (być może w celu zmniejszenia ilości niepotrzebnych danych w wyprowadzach konsoli):

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 funkcji wartości(gracz).