Die Console Utilities API enthält eine Reihe von praktischen Funktionen zum Ausführen allgemeiner Aufgaben: DOM-Elemente auswählen und prüfen, Objekte abfragen, Daten in einem lesbaren Format anzeigen, den Profiler beenden und starten, DOM-Ereignisse und Funktionsaufrufe überwachen und mehr.
Suchen Sie nach console.log(), console.error() und den restlichen 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. Wenn $_.length ausgewertet wird, um die Länge des Arrays zu ermitteln, ändert sich der in $_ gespeicherte Wert und wird zum zuletzt ausgewerteten Ausdruck (4):
0 $ bis 4 $
Die Befehle $0, $1, $2, $3 und $4 dienen als Verlaufsverweis auf die letzten fünf DOM-Elemente, die im Steuerfeld Elemente geprüft werden, oder die letzten fünf JavaScript-Heap-Objekte, die im Bereich „Profile“ ausgewählt sind. $0 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück, $1 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück und so weiter.
Im folgenden Beispiel wird im Steuerfeld Elemente ein img-Element ausgewählt. In der Leiste Console wurde $0 ausgewertet. Hier wird dasselbe Element angezeigt:
Die Abbildung unten zeigt ein anderes Element, das auf derselben Seite ausgewählt ist. $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 Elementbereich anzeigen aus, um es im DOM zu finden, oder Zur Ansicht scrollen, 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 Aufruf 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(), um ein Array aller <img>-Elemente zu erstellen, die im aktuellen Dokument nach dem ausgewählten Knoten 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 mit 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 in der Konsole.
clear();
copy(Objekt)
copy(object) kopiert eine Stringdarstellung des angegebenen Objekts in die Zwischenablage.
copy($0);
debug(Funktion)
Wenn die angegebene Funktion aufgerufen wird, wird der Debugger aufgerufen und funktioniert innerhalb der Funktion im Bereich Quellen. So können Sie den Code durchgehen und Fehler beheben.
debug(getData);
Verwenden Sie undebug(fn), um Unterbrechungen der Funktion zu vermeiden, oder verwenden Sie die UI, 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 im Stil eines Objekts an. Diese Methode ist eine Kurzform für die Methode console.dir() der Console API.
Das folgende Beispiel zeigt den Unterschied zwischen der direkten Auswertung von document.body in der Befehlszeile und der Verwendung von dir() zum Anzeigen desselben Elements:
document.body;
dir(document.body);
Weitere Informationen finden Sie in der Console API im Eintrag console.dir().
dirxml(Objekt)
dirxml(object) gibt eine XML-Darstellung des angegebenen Objekts aus, wie im Steuerfeld Elemente zu sehen.
Diese Methode entspricht der Methode console.dirxml().
inspect(object/function)
inspect(object/function) öffnet das angegebene Element oder Objekt und wählt es im entsprechenden Bereich aus: entweder im Bereich Elemente bei DOM-Elementen oder im Bereich „Profile“ bei JavaScript-Heap-Objekten.
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 enthält (z. B. click oder keydown). Die Mitglieder jedes Arrays sind Objekte, die den Listener beschreiben, der für jeden Typ registriert ist. Im Folgenden werden beispielsweise alle Event-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 Ereignis click im Dokumentelement zwei Event-Listener registriert:
Sie können die einzelnen Objekte weiter maximieren, um ihre Eigenschaften zu untersuchen:
Weitere Informationen finden Sie unter Objekteigenschaften untersuchen.
keys(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 der Console zu folgendem Ergebnis:
monitor(function)
Beim Aufrufen der angegebenen Funktion wird eine Meldung in der Konsole protokolliert, die den Funktionsnamen zusammen mit den Argumenten angibt, 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 am angegebenen Objekt auftritt, wird das Ereignisobjekt in der Konsole protokolliert. Sie können ein einzelnes Ereignis, das überwacht werden soll, ein Array von Ereignissen oder einen der generischen Ereignistypen angeben, die einer vordefinierten Sammlung von Ereignissen zugeordnet sind. Siehe nachstehende Beispiele
Mit dem folgenden Befehl werden alle Ereignisse zur Größenänderung für das Fensterobjekt überwacht.
monitorEvents(window, "resize");
Im Folgenden wird ein Array zur Überwachung der Ereignisse "size" und "scroll" für das Fensterobjekt definiert:
monitorEvents(window, ["resize", "scroll"])
Sie können auch einen der verfügbaren Ereignistypen angeben. Das sind 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" |
| Kontrolle | „Größe ändern“, „scrollen“, „zoomen“, „Fokus“, „Weichzeichnen“, „Auswählen“, „Ändern“, „Senden“, „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");
Im Folgenden sehen Sie eine Beispielausgabe nach Eingabe eines Zeichens in das Textfeld:
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:
profileEnd("Profile 1")
Ergebnis im Track Leistung > Haupt:
Haupttrack." width="800" height="606">
Profile können auch verschachtelt sein. Dies funktioniert beispielsweise in jeder 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])
Objektdaten mit Tabellenformatierung protokollieren, indem ein Datenobjekt mit optionalen Spaltenüberschriften übergeben wird.
Dies ist ein Kurzbefehl für console.table().
Um beispielsweise eine Liste von Namen mithilfe einer Tabelle in der Konsole anzuzeigen, würden Sie Folgendes tun:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(Funktion)
undebug(function) stoppt die Fehlerbehebung 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(Funktion)
unmonitor(function) beendet das Monitoring der angegebenen 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. Mit dem folgenden Befehl wird beispielsweise die gesamte Ereignisüberwachung für das Fensterobjekt beendet:
unmonitorEvents(window);
Sie können das Monitoring bestimmter Ereignisse für ein Objekt auch selektiv beenden. Mit dem folgenden Code wird beispielsweise das Monitoring aller Mausereignisse für das aktuell ausgewählte Element gestartet und dann die Überwachung von "mousemove"-Ereignissen beendet (z. B. um das Rauschen in der Konsolenausgabe zu reduzieren):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
Werte(Objekt)
values(object) gibt ein Array mit den Werten aller Attribute zurück, die zum angegebenen Objekt gehören.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
