Die Console Utilities API enthält eine Reihe von praktischen Funktionen zur Ausführung gängiger Aufgaben: Auswählen und Untersuchen von DOM-Elementen, Abfragen von Objekten, Anzeigen von Daten im lesbaren Format, Anhalten und Starten des Profilers, Überwachen von DOM-Ereignissen und Funktionsaufrufen und mehr.
Suchen Sie nach console.log()
, console.error()
und den anderen console.*
-Funktionen? Weitere Informationen finden Sie unter
Console API-Referenz
$_
$_
gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.
Im folgenden Beispiel wird ein einfacher Ausdruck (2 + 2
) ausgewertet. Das Attribut $_
ist dann
ausgewertet, die denselben Wert enthält:
Im nächsten Beispiel enthält der ausgewertete Ausdruck anfänglich ein Array mit Namen. Wird bewertet
$_.length
zum Ermitteln der Länge des Arrays. Der in $_
gespeicherte Wert wird zum neuesten.
ausgewerteter Ausdruck 4:
0–4 €
Die Befehle $0
, $1
, $2
, $3
und $4
dienen als historische Referenz zu den letzten fünf DOM.
Elemente, die im Steuerfeld Elements oder in den letzten fünf JavaScript-Heap-Objekten überprüft werden,
im Bereich „Profile“. $0
gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück: $1
gibt den zweitletzten Wert zurück usw.
Im folgenden Beispiel wird im Steuerfeld Elements ein img
-Element ausgewählt. Gehen Sie in der Leiste Konsole so vor:
„$0
“ wurde ausgewertet und zeigt dasselbe Element an:
Das Bild unten zeigt ein anderes Element, das auf derselben Seite ausgewählt wurde. $0
bezieht sich jetzt auf neue
ausgewähltes 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. Wann?
die mit einem Argument aufgerufen wird, ist diese Funktion eine Kurzform 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 Steuerfeld „Elemente“ anzeigen aus, um es im DOM aufzurufen, oder Scrollen Sie zur Ansicht „Ansicht“, damit sie auf der Seite angezeigt wird.
Im folgenden Beispiel wird ein Verweis auf das aktuell ausgewählte Element zurückgegeben und die zugehörigen src
angezeigt
Property:
Diese Funktion unterstützt auch den zweiten Parameter startNode
, der ein „Element“ angibt. oder Knoten von
in der 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
zeigt die Eigenschaft src
an:
$$(selector [, startNode])
Im folgenden Beispiel wird $$(selector) gibt ein Array von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen. Dieser Befehl ist
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.
<img> Elemente 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 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
,
gibt ein Element oder einen Knoten an, 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 und funktioniert innerhalb der Funktion auf der Im Bereich Quellen können Sie den Code durchgehen und Fehler im Code beheben.
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 im
und verwenden Sie dir()
, um dasselbe Element anzuzeigen:
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 Elements zu sehen.
Diese Methode entspricht der Methode console.dirxml()
.
inspect(object/function)
inspect(object/function)
wird geöffnet und das angegebene Element oder Objekt wird in der entsprechenden
Steuerfeld: entweder das Steuerfeld Elements für DOM-Elemente oder das Steuerfeld „Profile“ für JavaScript-Heap-Objekte
Im folgenden Beispiel wird document.body
im Bereich Elements geöffnet:
inspect(document.body);
Wenn Sie eine zu überprüfende Funktion übergeben, wird das Dokument automatisch im Bereich Quellen geöffnet. zu prüfen.
getEventListeners(object)
getEventListeners(object)
gibt die Ereignis-Listener zurück, die für das angegebene Objekt registriert sind. Die
Der Rückgabewert ist ein Objekt, das ein Array für jeden registrierten Ereignistyp (click
oder
keydown
). Die Mitglieder jedes Arrays sind Objekte, die den registrierten Listener beschreiben.
für jeden Typ. Im folgenden Beispiel werden alle Ereignis-Listener aufgelistet, die für das Dokument registriert sind
-Objekt enthält:
getEventListeners(document);
Wenn mehr als ein Listener für das angegebene Objekt registriert ist, enthält das Array ein Element
für jeden Hörer anpassen. Im folgenden Beispiel sind zwei Ereignis-Listener im
Dokumentelement für das Ereignis click
:
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 Eigenschaften zurück, die zum angegebenen
-Objekt enthält. 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, geben Sie keys(player)
und
values(player)
in der Console führt zu Folgendem:
Monitor(Funktion)
Wenn die angegebene Funktion aufgerufen wird, wird in der Konsole eine Meldung protokolliert, die den -Funktion zusammen mit den Argumenten, die an die Funktion übergeben wurden, wenn sie aufgerufen wurde.
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 im . Sie können ein einzelnes Ereignis, das überwacht werden soll, ein Array von Ereignissen oder eines der allgemeinen Ereignisse angeben "Typen" 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 Größenanpassung als auch und „scrollen“ -Ereignisse für das window -Objekt an:
monitorEvents(window, ["resize", "scroll"])
Sie können auch einen der verfügbaren Ereignistypen angeben, also Strings, die vordefinierten Sätzen von Ereignisse. In der folgenden Tabelle sind die verfügbaren Ereignistypen und die zugehörigen Ereigniszuordnungen aufgeführt:
Ereignistyp und Zugehörige 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", "verpixeln", "auswählen", "ändern", "einreichen", "zurücksetzen" |
Im folgenden Beispiel wird der Schlüssel Ereignistyp alle entsprechenden Schlüsselereignisse für einen Eingabetext das aktuell im Bereich Elements 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 Bereich Leistung an. Hauptspur.
So starten Sie die Profilerstellung:
profile("Profile 1")
Um die Profilerstellung zu beenden und die Ergebnisse unter Leistung > Haupt-Track:
profileEnd("Profile 1")
Ergebnis unter Leistung > Haupt-Track:
Profile können auch verschachtelt sein. Dies funktioniert beispielsweise in beliebiger Reihenfolge:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
queryObjects(Constructor)
über die Konsole aufrufen, um ein Array der erstellten Objekte zurückzugeben
durch den angegebenen Konstruktor. Beispiel:
queryObjects(Promise)
Gibt alle Instanzen vonPromise
zurück.queryObjects(HTMLElement)
Gibt alle HTML-Elemente zurück.queryObjects(foo)
, wobeifoo
ein Klassenname ist. Gibt alle instanziierten Objekte zurück übernew foo()
.
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. Wenn die Funktion
aufgerufen wird, wird der Debugger nicht mehr aufgerufen. Wird zusammen mit debug(fn)
verwendet.
undebug(getData);
unmonitor(function)
unmonitor(function)
stoppt das Monitoring der angegebenen Funktion. Dies wird in Verbindung mit
monitor(fn)
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events])
beendet das Monitoring von Ereignissen für das angegebene Objekt und die angegebenen Ereignisse. Für
Mit dem folgenden Beispiel wird die gesamte Ereignisüberwachung für das Fensterobjekt beendet:
unmonitorEvents(window);
Sie können das Monitoring bestimmter Ereignisse in einem Objekt auch selektiv beenden. Beispiel: beginnt die Überwachung aller Mausereignisse für das aktuell ausgewählte Element und beendet dann die Überwachung. „mousemove“ (eventuell um 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 Eigenschaften enthält, die zum angegebenen
-Objekt enthält.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);