Referenz zur Console Utilities API

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
 verwendet.
<img>-Elemente
die nach dem ausgewählten Knoten im aktuellen Dokument angezeigt werden:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, startNode])

$x(path) gibt ein Array von DOM-Elementen zurück, die mit dem angegebenen XPath-Ausdruck übereinstimmen.

Mit dem folgenden Befehl werden beispielsweise alle <p>-Elemente auf der Seite zurückgegeben:
$x("//p")



Im folgenden Beispiel werden alle <p> Elemente zurückgegeben, die <a> Elemente enthalten:
$x("//p[a]")



Ähnlich wie bei den anderen Selektorfunktionen hat $x(path) einen optionalen zweiten Parameter, startNode, der ein Element oder einen Knoten angibt, ab dem nach Elementen gesucht werden soll.



clear()

clear() löscht den Verlauf der Console.
clear();

copy(object)

copy(object) kopiert eine Stringdarstellung des angegebenen Objekts in die Zwischenablage.
copy($0);

debug(function)

Wenn die angegebene Funktion aufgerufen wird, wird der Debugger aufgerufen und hält die Ausführung innerhalb der Funktion im Bereich Quellen an. So können Sie den Code durchgehen und debuggen.
debug(getData);



Verwenden Sie undebug(fn), um das Anhalten der Ausführung bei der Funktion zu beenden, oder deaktivieren Sie alle Breakpoints über die Benutzeroberfläche.

Weitere Informationen zu Breakpoints finden Sie unter Code mit Breakpoints anhalten.

dir(object)

dir(object) zeigt eine objektartige Liste aller Properties des angegebenen Objekts an. Diese Methode ist eine Abkürzung für die Methode console.dir() der Console API.

Im folgenden Beispiel wird der Unterschied zwischen der direkten Auswertung von document.body in der Befehlszeile und der Verwendung von dir() zur Anzeige desselben Elements gezeigt:
document.body;
dir(document.body);



Weitere Informationen finden Sie im console.dir() Eintrag in der Console API.

dirxml(object)

dirxml(object) gibt eine XML-Darstellung des angegebenen Objekts aus, wie sie im Bereich Elemente zu sehen ist.
Diese Methode entspricht der console.dirxml() Methode.

inspect(object/function)

inspect(object/function) öffnet und wählt das angegebene Element oder Objekt im entsprechenden Bereich aus: entweder den Bereich Elemente für DOM-Elemente oder den Bereich „Profile“ für JavaScript-Heap-Objekte.

Im folgenden Beispiel wird document.body im Bereich Elemente geöffnet:
inspect(document.body);



Wenn Sie eine Funktion zur Überprüfung übergeben, wird das Dokument im Bereich Quellen geöffnet, damit Sie es untersuchen können.

getEventListeners(object)

getEventListeners(object) gibt die Event-Listener zurück, die für das angegebene Objekt registriert sind. Der Rückgabewert ist ein Objekt, das ein Array für jeden registrierten Ereignistyp enthält (z. B. click oder keydown). Die Elemente der einzelnen Arrays sind Objekte, die den für jeden Typ registrierten Listener beschreiben. Im folgenden Beispiel werden alle Event-Listener aufgeführt, die für das Dokumentobjekt registriert sind:
getEventListeners(document);



Wenn für das angegebene Objekt mehr als ein Listener registriert ist, enthält das Array für jeden Listener ein Element. Im folgenden Beispiel sind für das click-Ereignis zwei Event-Listener für das Dokumentelement registriert:



Sie können jedes dieser Objekte weiter maximieren, um seine Properties zu untersuchen:



Weitere Informationen finden Sie unter Objekteigenschaften untersuchen.

keys(object)

keys(object) gibt ein Array mit den Namen der Properties des angegebenen Objekts zurück. Verwenden Sie values(), um die zugehörigen Werte derselben Properties zu erhalten.

Angenommen, Ihre Anwendung hat das folgende Objekt definiert:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

Wenn player (der Einfachheit halber) im globalen Namespace definiert wurde, führt die Eingabe von keys(player) und
values(player) in der Console zu Folgendem:



monitor(function)

Wenn die angegebene Funktion aufgerufen wird, wird eine Meldung in der Console protokolliert, die den Funktionsnamen zusammen mit den Argumenten angibt, die an die Funktion übergeben wurden, als sie aufgerufen wurde.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Verwenden Sie unmonitor(function), um die Überwachung zu beenden.

monitorEvents(object [, events])

Wenn eines der angegebenen Ereignisse für das angegebene Objekt auftritt, wird das Ereignisobjekt in der Console protokolliert. Sie können ein einzelnes Ereignis, ein Array von Ereignissen oder einen der generischen Ereignistypen angeben, die einer vordefinierten Sammlung von Ereignissen zugeordnet sind. Unten finden Sie Beispiele dazu.

Im folgenden Beispiel werden alle Größenänderungsereignisse für das Fensterobjekt überwacht.
monitorEvents(window, "resize");



Im folgenden Beispiel wird ein Array definiert, um sowohl Größenänderungs- als auch Scrollereignisse für das Fensterobjekt zu überwachen:
monitorEvents(window, ["resize", "scroll"])

Sie können auch einen der verfügbaren Ereignistypen angeben, also Strings, die vordefinierten Ereignissätzen zugeordnet sind. In der folgenden Tabelle sind die verfügbaren Ereignistypen und die zugehörigen Ereigniszuordnungen aufgeführt:

Ereignistyp und zugeordnete Ereignisse
Maus
„mousedown“, „mouseup“, „click“, „dblclick“, „mousemove“, „mouseover“, „mouseout“, „mousewheel“
Schlüssel
„keydown“, „keyup“, „keypress“, „textInput“
Berühren
„touchstart“, „touchmove“, „touchend“, „touchcancel“
Steuerung
„resize“, „scroll“, „zoom“, „focus“, „blur“, „select“, „change“, „submit“, „reset“

Im folgenden Beispiel wird der Ereignistyp „Schlüssel“ für alle entsprechenden Schlüsselereignisse in einem Texteingabefeld verwendet, das derzeit im Bereich Elemente ausgewählt ist.
monitorEvents($0, "key");

Unten sehen Sie eine Beispielausgabe, nachdem Zeichen in das Textfeld eingegeben wurden:



Verwenden Sie unmonitorEvents(object[, events]), um die Überwachung zu beenden.

profile([name]) und profileEnd([name])

profile() startet eine JavaScript-CPU-Profiling-Sitzung mit einem optionalen Namen. profileEnd()
schließt das Profil ab, öffnet automatisch den Bereich Leistung und zeigt die Ergebnisse im Track Main an.



So starten Sie das Profiling:
profile("Profile 1")

So beenden Sie das Profiling und sehen die Ergebnisse im Track Leistung > Main:
profileEnd("Profile 1")

Ergebnis im Track Leistung > Main:



Profile können auch verschachtelt werden. Beispielsweise funktioniert dies in beliebiger Reihenfolge:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Rufen Sie queryObjects(Constructor) über die Console auf, um ein Array von Objekten zurückzugeben, die mit dem angegebenen Konstruktor erstellt wurden. Beispiel:


queryObjects(Promise) gibt alle Instanzen von Promise zurück.
queryObjects(HTMLElement) gibt alle HTML-Elemente zurück.
queryObjects(foo), wobei foo ein Klassenname ist. Gibt alle Objekte zurück, die über new foo() instanziiert wurden.


Der Bereich von queryObjects() ist der aktuell ausgewählte Ausführungskontext in der Console.

table(data [, columns])

Protokollieren Sie Objektdaten mit Tabellenformatierung, indem Sie ein Datenobjekt mit optionalen Spaltenüberschriften übergeben.
Dies ist eine Abkürzung für console.table().

Wenn Sie beispielsweise eine Liste von Namen in einer Tabelle in der Console anzeigen möchten, gehen Sie so vor:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Wenn Sie eine protokollierte Tabelle als formatierte Markdown-Tabelle oder CSV-Daten in die Zwischenablage kopieren möchten, rechtsklicken Sie in der Console auf die Tabelle und wählen Sie im Kontextmenü die entsprechende Kopieroption aus.

undebug(function)

undebug(function) beendet das Debugging der angegebenen Funktion. Wenn die Funktion aufgerufen wird, wird der Debugger nicht mehr aufgerufen. Diese Funktion wird zusammen mit debug(fn) verwendet.
undebug(getData);

unmonitor(function)

unmonitor(function) beendet die Überwachung der angegebenen Funktion. Diese Funktion wird zusammen mit monitor(fn) verwendet.
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) beendet die Überwachung von Ereignissen für das angegebene Objekt und die angegebenen Ereignisse. Im folgenden Beispiel wird die gesamte Ereignisüberwachung für das Fensterobjekt beendet:
unmonitorEvents(window);

Sie können die Überwachung bestimmter Ereignisse für ein Objekt auch selektiv beenden. Im folgenden Beispiel werden alle Mausereignisse für das aktuell ausgewählte Element überwacht und dann die Überwachung von „mousemove“-Ereignissen beendet (um die Ausgabe in der Console zu reduzieren):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) gibt ein Array mit den Werten aller Properties des angegebenen Objekts zurück.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);