Interfejs Console Utilities API zawiera zbiór funkcji ułatwiających wykonywanie 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 programu profilującego, monitorowanie zdarzeń DOM oraz wywołań funkcji i nie tylko.
Szukasz funkcji console.log(), console.error() i innych funkcji console.*? Zobacz dokumentację interfejsu Console API.
$_
$_ zwraca wartość ostatnio ocenionego wyrażenia.
W poniższym przykładzie sprawdzane 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 zawiera początkowo tablicę nazw. Gdy oceniasz $_.length w celu znalezienia długości tablicy, wartość zapisana w elemencie $_ zmienia się w ostatnio ocenione wyrażenie, czyli 4:
0–4 USD
Polecenia $0, $1, $2, $3 i $4 działają jako historyczne odniesienie do pięciu ostatnich elementów DOM sprawdzanych w panelu Elementy lub ostatnich 5 obiektów sterty JavaScript wybranych w panelu Profile. $0 zwraca ostatnio wybrany element lub obiekt JavaScript, $1 zwraca drugi ostatnio wybrany element lub obiekt JavaScript.
W poniższym przykładzie w panelu Elementy wybierany jest element img. W panelu Konsola wartość $0 została oceniona i wyświetla ten sam element:
Ilustracja poniżej przedstawia inny element wybrany na tej samej stronie. Element $0 odwołuje się teraz do nowo wybranego elementu, a pole $1 zwraca element wybrany wcześniej:
$(selektor [, startNode])
$(selector) zwraca odwołanie do pierwszego elementu DOM z określonym selektorem arkusza CSS. Wywoływana z jednym argumentem jest skrótem do funkcji document.querySelector().
Ten przykład zwraca odwołanie do pierwszego elementu <img> w dokumencie:
Kliknij prawym przyciskiem myszy zwrócony wynik i wybierz Pokaż w panelu Elementy, aby znaleźć go w modelu DOM, lub Przewiń, by wyświetlić widok, aby wyświetlić go na stronie.
Ten przykład zwraca odwołanie do obecnie 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 mają być wyszukiwane elementy. Wartość domyślna tego parametru to document.
Ten przykład zwraca odwołanie do pierwszego elementu img, który jest elementem potomnym devsite-header-background, i wyświetla jego właściwość src:
$$(selector [, startNode])
W tym przykładzie użyto właściwości $$(selektor) zwraca tablicę elementów pasujących do danego selektora arkusza CSS. To polecenie odpowiada wywołaniu funkcji 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ę ze wszystkimi elementami <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, które pasują do danego wyrażenia XPath.
Poniższy przykład zwróci wszystkie elementy <p> na stronie:
$x("//p")
Poniższy przykład zwraca wszystkie elementy <p> zawierające elementy <a>:
$x("//p[a]")
Podobnie jak inne funkcje selektora, $x(path) zawiera opcjonalny drugi parametr startNode, który określa element lub węzeł, w którym mają być wyszukiwane elementy.
wyczyść()
clear() czyści konsolę ze swojej historii.
clear();
kopiuj(obiekt)
copy(object) kopiuje do schowka ciąg reprezentujący określony obiekt.
copy($0);
debugowanie(funkcja)
Po wywołaniu określonej funkcji debuger zostaje wywołany i wadliwy w obrębie funkcji w panelu Źródła, co pozwoli Ci przejść przez kod i go debugować.
debug(getData);
Użyj polecenia undebug(fn), aby zatrzymać przerywanie funkcji, lub wyłącz wszystkie punkty przerwania w interfejsie użytkownika.
Więcej informacji o punktach przerwania znajdziesz w artykule Wstrzymywanie kodu z punktami przerwania.
dir(object)
dir(object) wyświetla listę wszystkich właściwości określonego obiektu w stylu obiektu. Ta metoda jest skrótem do metody console.dir() interfejsu Console API.
Poniższy przykład pokazuje różnicę między obliczaniem wartości document.body bezpośrednio w wierszu poleceń a wyświetlaniem tego samego elementu przy użyciu metody dir():
document.body;
dir(document.body);
Więcej informacji znajdziesz w sekcji console.dir() w interfejsie Console API.
dirxml(obiekt)
dirxml(object) wyświetla obiekt w formacie XML, który jest widoczny w panelu Elementy.
Jest to odpowiednik metody console.dirxml().
inspect(object/function)
inspect(object/function) otwiera i wybiera określony element lub obiekt w odpowiednim panelu: Elementy w przypadku elementów DOM lub Profile w przypadku obiektów sterty JavaScriptu.
Ten przykład powoduje otwarcie elementu document.body w panelu Elementy:
inspect(document.body);
Przekazując funkcję do sprawdzenia, otwiera się ona w panelu Źródła, aby umożliwić Ci sprawdzenie dokumentu.
getEventListeners(object)
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 to obiekty opisujące detektor zarejestrowany dla poszczególnych typów. Na przykład poniżej znajdziesz listę wszystkich detektorów zdarzeń zarejestrowanych w obiekcie dokumentu:
getEventListeners(document);
Jeśli w określonym obiekcie zarejestrowano więcej niż 1 detektor, tablica zawiera element odpowiadający każdemu detektorowi. W przykładzie poniżej są 2 detektory zdarzeń zarejestrowane w elemencie dokumentu dla zdarzenia click:
Każdy z tych obiektów możesz rozszerzyć, aby poznać jego właściwości:
Więcej informacji znajdziesz w sekcji 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 usług, 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
};
Zakładając, że player jest zdefiniowany w globalnej przestrzeni nazw (dla uproszczenia), to wpisanie keys(player) i values(player) w konsoli daje taki wynik:
monitor(function)
Wywołanie określonej funkcji powoduje zarejestrowanie w konsoli komunikatu wskazującego jej nazwę wraz z argumentami przekazanymi do tej 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 określonych zdarzeń, obiekt Event jest logowany w konsoli. Możesz określić pojedyncze 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.
Poniższy przykład umożliwia monitorowanie wszystkich zdarzeń zmiany rozmiaru w obiekcie window.
monitorEvents(window, "resize");
Poniżej zdefiniowano tablicę do monitorowania zdarzeń „resize” (zmiana rozmiaru) i „scroll” (przewijanie) w obiekcie window:
monitorEvents(window, ["resize", "scroll"])
Możesz też określić jeden z dostępnych „typów” zdarzeń, czyli ciągi znaków zmapowane na wstępnie zdefiniowane zestawy zdarzeń. Tabela poniżej zawiera dostępne typy zdarzeń i powiązane z nimi mapowania zdarzeń:
| Typ zdarzenia i odpowiadające mu zmapowane zdarzenia | |
|---|---|
| mysz | „mousedown”, „mouseup”, „click”, „dblclick”, „mousemove”, „mouseover”, „mouseout”, „kółko myszy” |
| klucz | „keydown”, „keyup”, „keydown”, „textInput” |
| dotknij | „touchstart”, „touchmove”, „touchend”, „touchcancel” |
| kontrola | „zmień rozmiar”, „przewiń”, „powiększ”, „fokus”, „rozmycie”, „wybierz”, „zmień”, „prześlij”, „zresetuj” |
Przykład poniżej używa typu zdarzenia „kluczowe” w przypadku wszystkich odpowiednich zdarzeń kluczowych w polu tekstowym danych wejściowych wybranym obecnie w panelu Elementy.
monitorEvents($0, "key");
Poniżej znajdziesz przykładowe dane wyjściowe po wpisaniu znaków w polu tekstowym:
Aby zatrzymać monitorowanie, użyj unmonitorEvents(object[, events]).
profile([nazwa]) i profileEnd([name])
profile() rozpoczyna sesję profilowania procesora JavaScript z opcjonalną nazwą. profileEnd()
uzupełni profil i wyświetli wyniki na ścieżce Skuteczność > Główna.
Aby rozpocząć profilowanie:
profile("Profile 1")
Aby zatrzymać profilowanie i wyświetlić wyniki w ścieżce Skuteczność > Główna:
profileEnd("Profile 1")
Wynik na ścieżce Skuteczność > Główna:
Ścieżka główna."width="800"height="606">
Profile mogą być również zagnieżdżone. Przykładowy kod będzie działać 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 podanego konstruktora. Na przykład:
queryObjects(Promise). Zwraca wszystkie wystąpienia elementuPromise.queryObjects(HTMLElement). Zwraca wszystkie elementy HTML.queryObjects(foo), gdziefooto nazwa zajęć. Zwraca wszystkie obiekty utworzone za pomocą instancjinew foo().
Zakres queryObjects() to aktualnie wybrany w konsoli kontekst wykonania.
tabela(dane [, kolumny])
Loguj dane obiektów z formatowaniem tabeli, przekazując do niej 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 te 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 po jej wywołaniu debuger nie był już wywoływany. Jest używany w połączeniu z usługą debug(fn).
undebug(getData);
niemonitorowany(funkcja)
unmonitor(function) zatrzymuje monitorowanie określonej funkcji. Jest ona używana w połączeniu z funkcją monitor(fn).
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]) przestaje monitorować zdarzenia dotyczące określonego obiektu i zdarzeń. Na przykład spowoduje to zatrzymanie monitorowania zdarzeń w obiekcie window:
unmonitorEvents(window);
Możesz też selektywnie zatrzymać monitorowanie określonych zdarzeń w obiekcie. Na przykład ten kod rozpoczyna monitorowanie wszystkich zdarzeń myszy w wybranym elemencie, a następnie przestaje monitorować zdarzenia „mousemove” (być może po to, aby zmniejszyć szum w danych wyjściowych 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);
