Dokumentacja interfejsu Console Utilities API

W poniższym przykładzie użyto atrybutu $$() 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:

 Główna ścieżka dźwiękowa." width="800" height="606">

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 funkcji 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.

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