Dokumentacja interfejsu Console Utilities API

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

Elementy<img>
które pojawiają 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 to polecenie 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ł, od którego ma się rozpocząć wyszukiwanie elementów.



clear()

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

copy(obiekt)

copy(object) kopiuje do schowka reprezentację ciągu znaków określonego obiektu.
copy($0);

debug(funkcja)

Gdy wywoływana jest określona funkcja, wywoływany jest debugger, który zatrzymuje się w funkcji w panelu Źródła , co umożliwia przechodzenie przez kod i jego debugowanie.
debug(getData);



Aby zatrzymać zatrzymywanie się w funkcji, użyj undebug(fn) lub wyłącz wszystkie punkty przerwania w interfejsie.

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

dir(obiekt)

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() Console API.

Ten przykład pokazuje różnicę między ocenianiem document.body bezpośrednio w wierszu poleceń a używaniem dir() do wyświetlania tego samego elementu:
document.body;
dir(document.body);



Więcej informacji znajdziesz w artykule console.dir() w Console API.

dirxml(obiekt)

dirxml(object) drukuje reprezentację XML określonego obiektu, tak jak jest ona widoczna w panelu Elementy.
Ta metoda jest równoważna metodzie console.dirxml().

inspect(obiekt/funkcja)

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

Ten przykład otwiera document.body w panelu Elementy:
inspect(document.body);



Gdy przekazujesz funkcję do sprawdzenia, funkcja otwiera dokument w panelu Źródła , aby można było go sprawdzić.

getEventListeners(object)

getEventListeners(object) zwraca detektory zdarzeń zarejestrowane w określonym obiekcie. Wartość zwracana to obiekt, który zawiera tablicę dla każdego zarejestrowanego typu zdarzenia (np. click lub keydown). Elementy każdej tablicy to obiekty, które opisują detektor zarejestrowany dla każdego typu. Na przykład to polecenie wyświetla 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 dla każdego detektora. 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ć ich właściwości:



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

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

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

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



monitor(funkcja)

Gdy wywoływana jest określona funkcja, w konsoli rejestrowany jest komunikat wskazujący nazwę funkcji oraz argumenty przekazywane do funkcji podczas 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 zdarzenia zostanie zarejestrowany w konsoli. Możesz określić pojedyncze zdarzenie do monitorowania, tablicę zdarzeń lub jeden z ogólnych „typów” zdarzeń, które są powiązane z predefiniowanym zbiorem zdarzeń. Zobacz przykłady poniżej.

To polecenie monitoruje wszystkie zdarzenia zmiany rozmiaru w obiekcie okna.
monitorEvents(window, "resize");



To polecenie definiuje tablicę, która monitoruje zdarzenia „resize” i „scroll” w obiekcie okna:
monitorEvents(window, ["resize", "scroll"])

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

Typ zdarzenia i odpowiadające mu mapowane 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 to polecenie używa typu zdarzenia „key” do wszystkich odpowiadających mu zdarzeń klawiatury 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, użyj unmonitorEvents(object[, events]).

profile([nazwa]) i profileEnd([nazwa])

profile() rozpoczyna sesję profilowania procesora JavaScript z opcjonalną nazwą. profileEnd()
kończy profil, automatycznie otwiera panel Wydajność i wyświetla wyniki na ścieżce Główna.



Aby rozpocząć profilowanie:
profile("Profile 1")

Aby zatrzymać profilowanie i zobaczyć wyniki na ścieżce Wydajność > Główna:
profileEnd("Profile 1")

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



Profile można też zagnieżdżać. Na przykład to polecenie będzie działać w dowolnej kolejności:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Wywołaj queryObjects(Constructor) z konsoli, aby zwrócić tablicę obiektów utworzonych
za pomocą określonego konstruktora. Na przykład:


queryObjects(Promise). Zwraca wszystkie instancje Promise.
queryObjects(HTMLElement). Zwraca wszystkie elementy HTML.
queryObjects(foo), gdzie foo to nazwa klasy. Zwraca wszystkie obiekty, które zostały utworzone za pomocą new foo().


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

table(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 za pomocą tabeli w konsoli, wykonaj te czynności:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Aby skopiować zarejestrowaną tabelę do schowka jako sformatowaną tabelę Markdown lub dane CSV, kliknij tabelę w Konsoli prawym przyciskiem myszy i wybierz odpowiednią opcję kopiowania z menu kontekstowego.

undebug(funkcja)

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

unmonitor(funkcja)

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

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) zatrzymuje monitorowanie zdarzeń w przypadku określonego obiektu i zdarzeń. Na przykład to polecenie zatrzymuje monitorowanie wszystkich zdarzeń w obiekcie okna:
unmonitorEvents(window);

Możesz też selektywnie zatrzymać monitorowanie określonych zdarzeń w obiekcie. Na przykład ten kod rozpoczyna monitorowanie wszystkich zdarzeń myszy w aktualnie 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, "mousemove");

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