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ść:
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:
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:
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:
$(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:
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:
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
:
$$(selector [, startNode])
W poniższym przykładzie użyto atrybutu $$(selektor) zwraca tablicę elementów, które pasują do podanego selektora arkusza CSS. To polecenie jest
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);
}
<img> 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);
}
$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")
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
,
określające element lub węzeł, z którego ma nastąpić wyszukiwanie elementów.
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);
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);
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);
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);
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
:
Możesz rozwijać każdy z tych obiektów, aby poznać ich właściwości:
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:
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);
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");
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:
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:
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 funkcjiPromise
.queryObjects(HTMLElement)
Zwraca wszystkie elementy HTML.queryObjects(foo)
, gdziefoo
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);
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);