Interfejs Console utilities API zawiera zbiór wygodnych funkcji do wykonywania typowych zadań, takich jak wybieranie i sprawdzanie elementów DOM, wysyłanie zapytań dotyczących obiektów, wyświetlanie danych w czytelnym formacie, zatrzymywanie i uruchamianie narzędzia do profilowania, monitorowanie zdarzeń DOM oraz wywołań funkcji i nie tylko.
Szukasz funkcji console.log()
, console.error()
i pozostałych funkcji console.*
? Zapoznaj się z dokumentacją interfejsu Console API.
$_
$_
zwraca wartość ostatnio ocenionego wyrażenia.
W poniższym przykładzie oceniane jest wyrażenie proste (2 + 2
). Następnie zostanie poddana ocenie właściwość $_
, która zawiera tę samą wartość:
W następnym przykładzie oceniane wyrażenie początkowo zawiera tablicę nazw. Podczas wyznaczania wartości $_.length
w celu znalezienia długości tablicy wartość zapisana w funkcji $_
zmieni się w najnowsze oceniane wyrażenie 4:
0–4 USD
Polecenia $0
, $1
, $2
, $3
i $4
działają jako odwołanie historyczne do ostatnich 5 elementów DOM sprawdzanych w panelu Elementy lub ostatnich 5 obiektów stosu JavaScript wybranych w panelu Profile. $0
zwraca ostatnio wybrany element lub obiekt JavaScript, $1
zwraca drugi ostatnio wybrany element i tak dalej.
W poniższym przykładzie w panelu Elementy został wybrany element img
. W panelu Konsola $0
został sprawdzony i wyświetla ten sam element:
Ilustracja poniżej przedstawia inny element wybrany na tej samej stronie. Parametr $0
odnosi się teraz do nowo wybranego elementu, a pole $1
zwraca wartość wybraną wcześniej:
$(selektor [, startNode])
$(selector)
zwraca odwołanie do pierwszego elementu DOM z określonym selektorem arkusza CSS. W przypadku wywołania z 1 argumentem ta funkcja stanowi 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, lub Przewiń do widoku, aby wyświetlić go na stronie.
Ten przykład zwraca odwołanie do aktualnie wybranego elementu i wyświetla jego właściwość src
:
Ta funkcja obsługuje też drugi parametr (startNode
), który określa „element” lub węzeł, z którego ma być szukany element. Wartość domyślna tego parametru to document
.
Ten przykład zwraca odwołanie do pierwszego elementu img
, który jest elementem potomnym 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, które pasują 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);
}
l10n-placeholder3(), aby utworzyć tablicę wszystkich elementów <img>
, które pojawią 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(ś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
), który określa element lub węzeł, z którego ma nastąpić wyszukiwanie elementów.
wyczyść()
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 przestaje działać w obrębie funkcji w panelu Źródła, co pozwala na przejrzenie kodu i jego debugowanie.
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 jest skrótem do metody console.dir()
interfejsu Console API.
Poniższy przykład pokazuje różnicę między wartością document.body
bezpośrednio w wierszu poleceń a użyciem 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 Elementy.
Ta metoda jest odpowiednikiem metody console.dirxml()
.
inspect(object/function)
inspect(object/function)
otworzy się i wybierze w odpowiednim panelu określony element lub obiekt: panel Elementy 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 Elementy:
inspect(document.body);
Gdy przekazujesz funkcję do sprawdzenia, otwiera dokument w panelu Źródła, gdzie możesz go sprawdzić.
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 (np. click
lub keydown
). Elementy każdej tablicy są obiektami opisującymi detektor zarejestrowany dla każdego typu. Na przykład poniżej znajduje się lista wszystkich detektorów zdarzeń zarejestrowanych w obiekcie dokumentu:
getEventListeners(document);
Jeśli w określonym obiekcie zarejestrowany jest więcej niż 1 detektor, tablica będzie zawierać użytkownika dla każdego z nich. W poniższym przykładzie są 2 detektory zdarzeń zarejestrowane w elemencie 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), wpisanie w Konsoli keys(player)
i values(player)
spowoduje następujący wynik:
monitor(function)
Gdy określona funkcja zostanie wywołana, w konsoli zostanie zarejestrowany komunikat zawierający nazwę funkcji wraz z argumentami przekazanymi 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 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żej zdefiniowaliśmy tablicę do monitorowania zdarzeń „resize” i „scroll” w obiekcie window:
monitorEvents(window, ["resize", "scroll"])
Możesz też określić jeden z dostępnych „typów” zdarzeń, czyli ciągów zmapowanych 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 zdarzenia na mapie | |
---|---|
mysz | „mousedown”, „mouseup”, „click”, „dblclick”, „mousemove”, „mouseover”, „mouseout”, „mousewheel” |
klucz | „keydown”, „keyup”, „keydown”, „textInput” |
dotknij | „touchstart”, „touchmove”, „touchend”, „touchcancel” |
głośności | „zmień rozmiar”, „przewijanie”, „powiększenie”, „fokus”, „rozmycie”, „wybierz”, „zmień”, „prześlij”, „reset” |
Poniższy przykład pokazuje użycie typu „kluczowe” wszystkich odpowiednich kluczowych zdarzeń w polu tekstu wejściowego aktualnie wybranym 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([nazwa]) i profileEnd([nazwa])
profile()
rozpoczyna sesję profilowania procesora JavaScript z opcjonalną nazwą. profileEnd()
wypełnia profil i wyświetla wyniki w ś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 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 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 funkcjiPromise
.queryObjects(HTMLElement)
. Zwraca wszystkie elementy HTML.queryObjects(foo)
, gdziefoo
to nazwa klasy. Zwraca wszystkie obiekty utworzone za pomocą funkcjinew 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, więc po jej wywołaniu debuger nie będzie już wywoływany. Jest używany w połączeniu z zasadą debug(fn)
.
undebug(getData);
unmonitor(funkcja)
unmonitor(function)
zatrzymuje monitorowanie określonej funkcji. Używany w połączeniu z zasadą monitor(fn)
.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events])
przestaje monitorować zdarzenia dla określonego obiektu i zdarzeń. Na przykład spowoduje to zatrzymanie monitorowania wszystkich zdarzeń obiektu window:
unmonitorEvents(window);
Możesz też wybiórczo zatrzymywać monitorowanie konkretnych zdarzeń dotyczących obiektu. Na przykład ten kod rozpoczyna monitorowanie wszystkich zdarzeń myszy w wybranym elemencie, a następnie przestaje monitorować zdarzenia „mousemove” (być może w celu ograniczenia 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);