Dokumentacja interfejsu Console Utilities API

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

Elementy<img> występujące 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 [, węzeł początkowy])

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

Na przykład poniższy kod 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, funkcja $x(path) ma opcjonalny drugi parametr startNode, który określa element lub węzeł, w którym należy wyszukiwać elementy.



clear()

clear() czyści historię konsoli.
clear();

copy(object)

copy(object) kopiuje do schowka ciąg znaków reprezentujący określony obiekt.
copy($0);

debug(function)

Gdy wywoływana jest określona funkcja, debuger jest wywoływany i przerywa działanie w funkcji w panelu Źródła, co umożliwia przechodzenie przez kod i jego debugowanie.
debug(getData);



Użyj undebug(fn), aby zatrzymać przerywanie funkcji, lub użyj interfejsu, aby wyłączyć wszystkie punkty przerwania.

Więcej informacji o punktach przerwania znajdziesz w artykule Wstrzymywanie kodu za pomocą punktów przerwania.

dir(object)

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

Poniższy przykład pokazuje różnicę między oceną 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 w artykule console.dir() w interfejsie API konsoli.

dirxml(object)

dirxml(object) wyświetla reprezentację XML określonego obiektu, tak jak w panelu Elementy.
Ta metoda jest odpowiednikiem metody console.dirxml().

inspect(object/function)

inspect(object/function) otwiera i zaznacza określony element lub obiekt w odpowiednim panelu: Elementy w przypadku elementów DOM lub Profile w przypadku obiektów sterty JavaScript.

W tym przykładzie otwieramy element document.body w panelu Elementy:
inspect(document.body);



Gdy przekażesz funkcję do sprawdzenia, otworzy ona dokument w panelu Źródła, aby umożliwić Ci jego sprawdzenie.

getEventListeners(object)

getEventListeners(object) zwraca detektory zdarzeń zarejestrowane w określonym obiekcie. Wartość zwracana to obiekt zawierający tablicę dla każdego zarejestrowanego typu zdarzenia (np. click lub keydown). Elementami każdej tablicy są obiekty opisujące zarejestrowany odbiornik
dla każdego typu. Na przykład poniższy kod wyświetla listę wszystkich odbiorców zdarzeń zarejestrowanych w obiekcie dokumentu:
getEventListeners(document);



Jeśli w określonym obiekcie zarejestrowano więcej niż 1 odbiorcę, tablica zawiera element dla każdego z nich. W tym przykładzie w elemencie dokumentu zarejestrowane są 2 detektory zdarzeń dla zdarzenia click:



Możesz rozwinąć każdy z tych obiektów, aby poznać jego właściwości:



Więcej informacji znajdziesz w artykule Sprawdzanie właściwości obiektu.

keys(object)

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 values().

Załóżmy na przykład, że aplikacja zdefiniowała ten obiekt:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

Zakładając, że zmienna player została zdefiniowana w globalnej przestrzeni nazw (dla uproszczenia), wpisanie w konsoli znaków keys(player) i values(player) spowoduje wyświetlenie tych wyników:



monitor(function)

Gdy wywoływana jest określona funkcja, w konsoli rejestrowany jest komunikat, który zawiera nazwę funkcji oraz argumenty przekazywane do niej podczas wywołania.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Aby zatrzymać monitorowanie, kliknij unmonitor(function).

monitorEvents(object [, events])

Gdy na określonym obiekcie wystąpi jedno z określonych zdarzeń, obiekt zdarzenia zostanie zalogowany w konsoli. Możesz określić jedno zdarzenie do monitorowania, tablicę zdarzeń lub jedno z ogólnych zdarzeń „typu” mapowanych na predefiniowany zbiór zdarzeń. Zobacz przykłady poniżej.

Poniższy monitor śledzi wszystkie zdarzenia zmiany rozmiaru obiektu okna.
monitorEvents(window, "resize");



Poniższy kod definiuje tablicę, która monitoruje zdarzenia „resize” i „scroll” w obiekcie window:
monitorEvents(window, ["resize", &quot;scroll"])

Możesz też określić jeden z dostępnych „typów” zdarzeń, czyli ciągów znaków, które są mapowane na predefiniowane zbiory zdarzeń. W tabeli poniżej znajdziesz dostępne typy zdarzeń i powiązane z nimi mapowania zdarzeń:

Typ zdarzenia i odpowiadające mu zamapowane zdarzenia
mysz
„mousedown”, „mouseup”, „click”, „dblclick”, „mousemove”, „mouseover”, „mouseout”, „mousewheel”
klucz
„keydown”, „keyup”, „keypress”, „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” dla wszystkich odpowiednich kluczowych zdarzeń w polu tekstowym, które jest obecnie wybrane w panelu Elementy.
monitorEvents($0, "key");

Poniżej znajdziesz przykładowe dane wyjściowe po wpisaniu znaków w polu tekstowym:



Aby zatrzymać monitorowanie, kliknij unmonitorEvents(object[, events]).

profile([name]) i profileEnd([name])

profile() rozpoczyna sesję profilowania CPU JavaScriptu z opcjonalną nazwą. profileEnd()
uzupełnia 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 Wydajność > Główna:
profileEnd("Profile 1")

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



Profile można też zagnieżdżać. Na przykład to zadziała w dowolnej kolejności:
profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');



queryObjects(Constructor)

Wywołaj funkcję queryObjects(Constructor) w konsoli, aby zwrócić tablicę obiektów utworzonych za pomocą 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 utworzone za pomocą funkcji new foo().


Zakres queryObjects() to aktualnie wybrany kontekst wykonania w konsoli.

tabela(dane [, kolumny])

Rejestruj dane obiektu w formacie tabeli, przekazując obiekt danych z opcjonalnymi nagłówkami kolumn.
Jest to skrót do console.table().

Aby na przykład wyświetlić listę nazw w tabeli w konsoli, wykonaj te czynności:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

undebug(function) zatrzymuje debugowanie określonej funkcji, dzięki czemu po jej wywołaniu debugger nie jest już uruchamiany. Jest ona używana w połączeniu z właściwością debug(fn).
undebug(getData);

unmonitor(function)

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

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) przestaje monitorować zdarzenia dotyczące określonego obiektu i zdarzeń. Na przykład poniższy kod zatrzymuje monitorowanie wszystkich zdarzeń w obiekcie okna:
unmonitorEvents(window);

Możesz też selektywnie zatrzymać monitorowanie określonych zdarzeń na obiekcie. Na przykład poniższy kod rozpoczyna monitorowanie wszystkich zdarzeń myszy na obecnie wybranym elemencie, a następnie zatrzymuje monitorowanie zdarzeń „mousemove” (być może w celu zmniejszenia szumu w danych wyjściowych konsoli):
monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;mousemove");

values(object)

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);