Referenz zur Console Utilities API

Im folgenden Beispiel wird $$() 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);
}
 verwendet.
<img>-Elemente, die im aktuellen Dokument nach dem ausgewählten Knoten erscheinen:
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 Code 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 die anderen Auswahlfunktionen hat $x(path) einen optionalen zweiten Parameter, startNode, mit dem ein Element oder Knoten angegeben wird, nach dem nach Elementen gesucht werden soll.



clear()

clear() löscht den Konsolenverlauf.
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 es wird im Bereich Quellen eine Unterbrechung innerhalb der Funktion ausgelöst, damit der Code Schritt für Schritt durchlaufen und behoben werden kann.
debug(getData);



Verwenden Sie undebug(fn), um die Ausführung nicht mehr an der Funktion anzuhalten, oder deaktivieren Sie alle Haltestellen über die Benutzeroberfläche.

Weitere Informationen zu Haltepunkten finden Sie unter Code mithilfe von Haltepunkten pausieren.

dir(object)

dir(object) zeigt eine Auflistung aller Properties des angegebenen Objekts im Objektstil an. Diese Methode ist eine Verknüpfung für die console.dir()-Methode der Console API.

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



Weitere Informationen finden Sie im Console API-Eintrag zu console.dir().

dirxml(object)

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

inspect(object/function)

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

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



Wenn Sie eine Funktion zum Prüfen übergeben, wird das Dokument im Bereich Quellen geöffnet.

getEventListeners(object)

getEventListeners(object) gibt die Ereignis-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 Mitglieder jedes Arrays sind Objekte, die den für jeden Typ registrierten Listener beschreiben. Im Folgenden sind beispielsweise alle Ereignis-Listener aufgeführt, die für das Dokumentobjekt registriert sind:
getEventListeners(document);



Wenn für das angegebene Objekt mehrere Listener registriert sind, enthält das Array ein Mitglied für jeden Listener. Im folgenden Beispiel sind für das click-Ereignis zwei Ereignis-Listener für das Dokumentelement registriert:



Sie können jedes dieser Objekte maximieren, um die zugehörigen Properties zu sehen:



Weitere Informationen finden Sie unter Objekteigenschaften prüfen.

keys(object)

keys(object) gibt ein Array mit den Namen der Properties zurück, die zum angegebenen Objekt gehören. Mit values() kannst du die zugehörigen Werte derselben Properties abrufen.

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

Angenommen, player wurde im globalen Namespace definiert (zur Vereinfachung), führt das Eintippen von keys(player) und values(player) in der Konsole zu folgendem Ergebnis:



monitor(function)

Wenn die angegebene Funktion aufgerufen wird, wird in der Konsole eine Nachricht protokolliert, die den Funktionsnamen und die Argumente enthält, die beim Aufruf an die Funktion übergeben wurden.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Verwenden Sie unmonitor(function), um das Monitoring zu beenden.

monitorEvents(object [, events])

Wenn eines der angegebenen Ereignisse für das angegebene Objekt auftritt, wird das Ereignisobjekt in der Konsole protokolliert. Sie können ein einzelnes Ereignis, eine Reihe von Ereignissen oder einen der generischen Ereignistypen angeben, der einer vordefinierten Sammlung von Ereignissen zugeordnet ist. Siehe nachstehende Beispiele

Im Folgenden werden alle Ereignisse zum Ändern der Größe des Fensterobjekts überwacht.
monitorEvents(window, "resize");



Im Folgenden wird ein Array definiert, mit dem sowohl „resize“- als auch „scroll“-Ereignisse für das Fensterobjekt überwacht werden:
monitorEvents(window, ["resize", "scroll"])

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

Ereignistyp und entsprechende zugeordnete Ereignisse
Maus
„mousedown“, „mouseup“, „click“, „dblclick“, „mousemove“, „mouseover“, „mouseout“, „mousewheel“
Schlüssel
„keydown“, „keyup“, „keypress“, „textInput“
Touchscreen
„touchstart“, „touchmove“, „touchend“, „touchcancel“
Kontrollgruppe
„Größe ändern“, „Scrollen“, „Zoomen“, „Fokus“, „Unscharfstellen“, „Auswählen“, „Ändern“, „Senden“, „Zurücksetzen“

Im folgenden Beispiel wird der Ereignistyp „key“ verwendet, um alle entsprechenden Schlüsselereignisse in einem Eingabetextfeld zu erfassen, 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 das Monitoring zu beenden.

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

profile() startet eine JavaScript-CPU-Profilierungssitzung mit einem optionalen Namen. profileEnd() schließt das Profil ab und zeigt die Ergebnisse im Leistung > Haupt-Track an.



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

So beenden Sie das Profiling und sehen sich die Ergebnisse im Tab Leistung > Haupt an:
profileEnd("Profile 1")

Das Ergebnis wird auf dem Tab Leistung > Haupt angezeigt:



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



queryObjects(Constructor)

Rufen Sie queryObjects(Constructor) in der Konsole 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 Umfang von queryObjects() ist der aktuell ausgewählte Ausführungskontext in der Konsole.

table(data [, columns])

Sie können Objektdaten in Tabellenformat erfassen, indem Sie ein Datenobjekt mit optionalen Spaltenüberschriften übergeben.
Dies ist eine Tastenkombination für console.table().

So können Sie beispielsweise eine Liste von Namen in einer Tabelle in der Konsole anzeigen lassen:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

undebug(function) beendet das Debuggen der angegebenen Funktion, sodass der Debugger beim Aufrufen der Funktion nicht mehr aufgerufen wird. Diese Option wird in Verbindung mit debug(fn) verwendet.
undebug(getData);

unmonitor(function)

unmonitor(function) stoppt das Monitoring der angegebenen Funktion. Diese Option wird in Verbindung 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. Mit dem folgenden Code wird beispielsweise die gesamte Ereignisüberwachung für das Fensterobjekt beendet:
unmonitorEvents(window);

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

values(object)

values(object) gibt ein Array zurück, das die Werte aller Attribute enthält, die zum angegebenen Objekt gehören.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);