Die Console Utilities API enthält eine Reihe praktischer Funktionen zur Ausführung häufiger Aufgaben: DOM-Elemente auswählen und prüfen, Objekte abfragen, Daten im lesbaren Format anzeigen, Profiler beenden und starten, DOM-Ereignisse und Funktionsaufrufe überwachen und vieles mehr.
Suchen Sie nach console.log(), console.error() und den anderen console.*-Funktionen? Siehe Console API-Referenz.
$_
$_ gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.
Im folgenden Beispiel wird ein einfacher Ausdruck (2 + 2) ausgewertet. Anschließend wird das Attribut $_ ausgewertet, das denselben Wert enthält:
Im nächsten Beispiel enthält der ausgewertete Ausdruck anfänglich ein Array mit Namen. Beim Auswerten von $_.length, um die Länge des Arrays zu ermitteln, ändert sich der in $_ gespeicherte Wert und wird zum zuletzt ausgewerteten Ausdruck 4:
0–4 €
Die Befehle $0, $1, $2, $3 und $4 dienen als Verlaufsreferenz zu den letzten fünf DOM-Elementen, die im Bereich Elemente überprüft wurden, oder den letzten fünf JavaScript-Heap-Objekten, die im Bereich "Profile" ausgewählt wurden. $0 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück, $1 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück usw.
Im folgenden Beispiel wird im Steuerfeld Elemente ein img-Element ausgewählt. In der Leiste Console wurde $0 ausgewertet und zeigt dasselbe Element:
Das Bild unten zeigt ein anderes Element, das auf derselben Seite ausgewählt wurde. $0 verweist jetzt auf das neu ausgewählte Element, während $1 das zuvor ausgewählte Element zurückgibt:
$(selector [, startNode])
$(selector) gibt den Verweis auf das erste DOM-Element mit dem angegebenen CSS-Selektor zurück. Wenn diese Funktion mit einem Argument aufgerufen wird, ist sie ein Kürzel für die Funktion document.querySelector().
Im folgenden Beispiel wird ein Verweis auf das erste <img>-Element im Dokument zurückgegeben:
Klicken Sie mit der rechten Maustaste auf das zurückgegebene Ergebnis und wählen Sie Im Bereich „Elemente“ anzeigen aus, um es im DOM zu finden, oder scrollen Sie zur Ansicht, um es auf der Seite anzuzeigen.
Im folgenden Beispiel wird ein Verweis auf das aktuell ausgewählte Element zurückgegeben und das Attribut src angezeigt:
Diese Funktion unterstützt auch den zweiten Parameter startNode, der ein Element oder einen Knoten angibt, von dem aus nach Elementen gesucht werden soll. Der Standardwert dieses Parameters ist document.
Im folgenden Beispiel wird ein Verweis auf das erste img-Element zurückgegeben, das ein Nachfolger von devsite-header-background ist, und dessen Attribut src angezeigt:
$$(selector [, startNode])
Im folgenden Beispiel wird $$(selector) gibt ein Array von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen. Dieser Befehl entspricht dem Aufrufen von Array.from(document.querySelectorAll()).
$$() 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.
l10n-placeholder3() zum Erstellen eines Arrays aller <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(Pfad [, startNode])
$x(path) gibt ein Array von DOM-Elementen zurück, die dem angegebenen XPath-Ausdruck entsprechen.
Im folgenden Beispiel werden 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 Selektorfunktionen hat $x(path) den optionalen zweiten Parameter startNode, der ein Element oder einen Knoten angibt, von dem aus nach Elementen gesucht werden soll.
clear()
clear() löscht den Verlauf der Konsole.
clear();
copy(Objekt)
Mit copy(object) wird eine Stringdarstellung des angegebenen Objekts in die Zwischenablage kopiert.
copy($0);
Debug(Funktion)
Wenn die angegebene Funktion aufgerufen wird, wird der Debugger aufgerufen. Die Funktion innerhalb des Bereichs Quellen wird nicht mehr angezeigt, sodass Sie den Code durchlaufen und Fehler im Code beheben können.
debug(getData);
Verwenden Sie undebug(fn), um die Funktion nicht mehr abzubrechen, oder verwenden Sie die Benutzeroberfläche, um alle Haltepunkte zu deaktivieren.
Weitere Informationen zu Haltepunkten finden Sie unter Code mit Haltepunkten pausieren.
dir(object)
dir(object) zeigt eine Liste aller Eigenschaften des angegebenen Objekts an. Diese Methode ist eine Kurzform für die Methode console.dir() der Console API.
Das folgende Beispiel zeigt den Unterschied zwischen der Auswertung von document.body direkt in der Befehlszeile und der Verwendung von dir() zur Anzeige desselben Elements:
document.body;
dir(document.body);
Weitere Informationen finden Sie in der Console API unter dem Eintrag console.dir().
dirxml(Objekt)
dirxml(object) gibt eine XML-Darstellung des angegebenen Objekts aus, wie im Bereich Elemente zu sehen.
Diese Methode entspricht der Methode console.dirxml().
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“ (Profile) für JavaScript-Heap-Objekte.
Im folgenden Beispiel wird document.body im Bereich Elemente geöffnet:
inspect(document.body);
Wenn Sie eine zu prüfende Funktion übergeben, wird das Dokument im Bereich Quellen geöffnet, damit Sie es überprüfen können.
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 (z. B. click oder keydown) enthält. Die Mitglieder jedes Arrays sind Objekte, die den Listener beschreiben, der für den jeweiligen Typ registriert ist. Im folgenden Beispiel werden alle Ereignis-Listener aufgelistet, 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 ein Mitglied für jeden Listener. Im folgenden Beispiel sind für das click-Ereignis im Dokumentelement zwei Ereignis-Listener registriert:
Sie können die einzelnen Objekte weiter maximieren, um ihre Eigenschaften zu erkunden:
Weitere Informationen finden Sie unter Objekteigenschaften prüfen.
Schlüssel(Objekt)
keys(object) gibt ein Array mit den Namen der Attribute zurück, die zum angegebenen Objekt gehören. Verwenden Sie values(), um die verknüpften Werte derselben Attribute abzurufen.
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 die Console zu folgendem Ergebnis:
monitor(function)
Wenn die angegebene Funktion aufgerufen wird, wird eine Meldung in der Konsole protokolliert, die den Funktionsnamen zusammen mit den Argumenten angibt, die bei ihrem Aufruf an die Funktion übergeben werden.
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 beim angegebenen Objekt eintritt, wird das Ereignisobjekt in der Konsole protokolliert. Sie können ein einzelnes Ereignis, das überwacht werden soll, ein Array von Ereignissen oder einen der allgemeinen Ereignistypen angeben, die einer vordefinierten Ereignissammlung zugeordnet sind. Siehe nachstehende Beispiele
Im Folgenden werden alle Ereignisse zur Größenanpassung des Fensterobjekts überwacht.
monitorEvents(window, "resize");
Im Folgenden wird ein Array definiert, um sowohl die "resize"- als auch die "scroll"-Ereignisse für das Fensterobjekt zu überwachen:
monitorEvents(window, ["resize", "scroll"])
Sie können auch einen der verfügbaren Ereignistypen angeben, also Strings, die vordefinierten Ereignisgruppen zugeordnet werden. 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" |
| Steuerung | "größe ändern", "scrollen", "zoomen", "fokus", "verpixeln", "auswählen", "ändern", "einreichen", "zurücksetzen" |
Im folgenden Beispiel wird der Ereignistyp „Schlüssel“ für alle entsprechenden Schlüsselereignisse für ein Eingabetextfeld verwendet, das derzeit im Bereich Elemente ausgewählt ist.
monitorEvents($0, "key");
Nach der Eingabe eines Zeichens in das Textfeld sehen Sie eine Beispielausgabe:
Verwenden Sie unmonitorEvents(object[, events]), um das Monitoring zu beenden.
profile([name]) und profileEnd([name])
profile() startet eine JavaScript-CPU-Profilsitzung mit einem optionalen Namen. profileEnd() vervollständigt das Profil und zeigt die Ergebnisse im Track Leistung > Haupt an.
So starten Sie die Profilerstellung:
profile("Profile 1")
So beenden Sie die Profilerstellung und sehen die Ergebnisse im Track Leistung > Haupt-Track an:
profileEnd("Profile 1")
Ergebnis im Track Leistung > Haupt-Track:
Hauptspur." width="800" height="606">
Profile können auch verschachtelt sein. Dies funktioniert beispielsweise 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 vonPromisezurück.queryObjects(HTMLElement). Gibt alle HTML-Elemente zurück.queryObjects(foo), wobeifooein Klassenname ist. Gibt alle Objekte zurück, die übernew foo()instanziiert wurden.
Der Bereich von queryObjects() ist der aktuell in der Console ausgewählte Ausführungskontext.
table(Daten [; Spalten])
Protokollieren Sie Objektdaten mit Tabellenformatierung, indem Sie ein Datenobjekt mit optionalen Spaltenüberschriften übergeben.
Dies ist ein Kurzbefehl für console.table().
Um beispielsweise eine Liste von Namen mithilfe einer Tabelle in der Konsole anzuzeigen, gehen Sie wie folgt vor:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(Funktion)
undebug(function) stoppt das Debugging für die angegebene Funktion, sodass der Debugger nicht mehr aufgerufen wird, wenn die Funktion aufgerufen wird. Wird zusammen mit debug(fn) verwendet.
undebug(getData);
unmonitor(function)
unmonitor(function) stoppt das Monitoring der angegebenen Funktion. Diese wird in Verbindung mit monitor(fn) verwendet.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]) beendet das Monitoring von Ereignissen für das angegebene Objekt und die angegebenen Ereignisse. Mit dem folgenden Befehl wird beispielsweise die gesamte Ereignisüberwachung für das Fensterobjekt beendet:
unmonitorEvents(window);
Sie können das Monitoring bestimmter Ereignisse in einem Objekt auch selektiv beenden. Der folgende Code beginnt beispielsweise mit dem Monitoring aller Mausereignisse für das aktuell ausgewählte Element und beendet dann die Überwachung der Ereignisse vom Typ „mousemove“, um eventuelle Rauschen in der Konsolenausgabe zu reduzieren:
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(Objekt)
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);
