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ść:
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:
0–4 PLN
Polecenia $0
, $1
, $2
, $3
i $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:
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:
$(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:
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
:
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
:
$$(selector [, startNode])
W poniższym przykładzie użyto atrybutu $$(selektor) zwraca tablicę elementów pasujących do podanego selektora arkusza CSS. To polecenie odpowiada wywołaniu
Array.from(document.querySelectorAll())
.
$$()
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);
}
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);
}
$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")
Ten przykład zwraca wszystkie elementy <p>
, które zawierają elementy <a>
:
$x("//p[a]")
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.
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);
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);
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);
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);
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
:
Możesz rozwinąć każdy z tych obiektów, aby zapoznać się z ich właściwościami:
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:
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);
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");
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:
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:
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 parametruPromise
.queryObjects(HTMLElement)
. Zwraca wszystkie elementy HTML.queryObjects(foo)
, gdziefoo
to nazwa klasy. Zwraca wszystkie obiekty, które zostały zainicjowane za pomocą funkcjinew 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);
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);