Teilen über

Hilfsprogrammfunktionen und Selektoren des Konsolentools

  • Artikel

Die Konsolenhilfsprogramm-API enthält eine Sammlung von Praktischkeitsvariablen und Funktionen zum Ausführen allgemeiner Aufgaben, z. B.:

  • Auswählen und Überprüfen von DOM-Elementen.
  • Anzeigen von Daten in einem lesbaren Format.
  • Beenden und Starten des Profilers.
  • Überwachen von DOM-Ereignissen.

Diese Variablen und Funktionen funktionieren nur, indem sie direkt in die DevTools-Konsole eingegeben werden. Sie können die Variablen nicht verwenden und die Funktionen nicht aus Skripts aufrufen.

Zusammenfassung

Variable oder Funktion Beschreibung
Kürzlich ausgewerteter Ausdruck: $_ Gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.
Zuletzt ausgewähltes Element oder JavaScript-Objekt: $0-$4 Gibt ein kürzlich ausgewähltes Element oder JavaScript-Objekt zurück.
Abfrageauswahl: $(Selektor) Abfrageauswahl; gibt den Verweis auf das erste DOM-Element mit dem angegebenen CSS-Selektor zurück, z. B document.querySelector(). .
Abfrageauswahl alle: $$(selektor, [startNode]) Abfrageauswahl alle; gibt ein Array von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen, z document.querySelectorAll(). B. .
XPath: $x(path, [startNode]) Gibt ein Array von DOM-Elementen zurück, die dem angegebenen XPath-Ausdruck entsprechen.
clear() Löscht die Konsole des Verlaufs.
copy(object) Kopiert eine Zeichenfolgendarstellung des angegebenen Objekts in die Zwischenablage.
debug(function) Wenn die angegebene Funktion aufgerufen wird, wird der Debugger aufgerufen und innerhalb der Funktion im Quellenbereich unterbrochen.
dir(object) Zeigt eine Auflistung aller Eigenschaften für das angegebene Objekt an, z console.dir(). B. .
dirxml(object) Gibt eine XML-Darstellung des angegebenen Objekts aus, wie im Tool Elemente angezeigt, z console.dirxml(). B. .
inspect(object/function) Öffnet das angegebene DOM-Element im Elementtool oder das angegebene JavaScript-Heapobjekt im Speichertool , und wählt es aus.
getEventListeners(object) Gibt die Ereignislistener zurück, die für das angegebene Objekt registriert sind.
keys(object) Gibt ein Array zurück, das die Namen der Eigenschaften enthält, die zum angegebenen Objekt gehören.
monitor(function) Protokolliert eine Meldung in der Konsole, die den Funktionsnamen angibt, zusammen mit den Argumenten, die als Teil einer Anforderung an die Funktion übergeben werden.
monitorEvents(object[, events]) Wenn eines der angegebenen Ereignisse für das angegebene Objekt auftritt, wird das Ereignisobjekt in der Konsole protokolliert.
profile([name]) Startet eine JavaScript-CPU-Profilerstellungssitzung mit einem optionalen Namen.
profileEnd([name]) Schließt eine JavaScript-CPU-Profilerstellungssitzung ab und zeigt die Ergebnisse im Leistungstool an.
queryObjects(constructor) Gibt ein Array der Objekte zurück, die vom angegebenen Konstruktor erstellt wurden.
table(data[, columns]) Protokolliert Objektdaten, die als Tabelle mit Spaltenüberschriften formatiert sind, für das angegebene Datenobjekt.
undebug(function) Beendet das Debuggen der angegebenen Funktion, sodass der Debugger nicht mehr aufgerufen wird, wenn die Funktion angefordert wird.
unmonitor(function) Beendet die Überwachung der angegebenen Funktion.
unmonitorEvents(object[, events]) Beendet die Überwachung von Ereignissen für das angegebene Objekt und die angegebenen Ereignisse.
values(object) Gibt ein Array zurück, das die Werte aller Eigenschaften enthält, die zum angegebenen Objekt gehören.

Kürzlich ausgewerteter Ausdruck: $_

$_ gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.

Syntax:

$_

Beispiel 1

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den Ausdruck 2+2ein, und drücken Sie dann die EINGABETASTE.

    Der Ausdruck wird ausgewertet, und das Ergebnis wird angezeigt. Die $_ Variable wird auch auf das Ergebnis des Ausdrucks festgelegt.

  3. Geben Sie ein $_, und drücken Sie dann die EINGABETASTE:

    Das Konsolentool, das anzeigt, dass die Variable $_ das Ergebnis des vorherigen Ausdrucks zurückgibt.

Beispiel 2

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Fügen Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

    ["john", "paul", "george", "ringo"]

    Der ausgewertete Ausdruck ist ein Array von Namen.

  3. Geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

    $_.length

    Der Ausdruck $_.length wird ausgewertet und 4 in der Konsole angezeigt, da $_ auf den zuvor ausgewerteten Ausdruck verweist, der das Array von Namen ist. $_.length ist die Länge des Arrays von Namen.

  4. Geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

    $_

    $_ bezieht sich immer auf den zuvor ausgewerteten Ausdruck, der jetzt die Zahl 4 ist.

    Der Wert von $_ ändert sich in den Wert des zuvor ausgewerteten Ausdrucks.

Zuletzt ausgewähltes Element oder JavaScript-Objekt: $0-$4

$0, $1, $2, $3und $4 geben kürzlich ausgewählte Elemente oder JavaScript-Objekte zurück.

$0 gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück, $1 gibt das zweite zuletzt ausgewählte zurück usw. Die $0Variablen , $1, $2, $3und $4 funktionieren als historischer Verweis auf die letzten fünf DOM-Elemente, die innerhalb des Elements-Tools überprüft wurden, oder auf die letzten fünf JavaScript-Heapobjekte, die im Speichertool ausgewählt wurden.

Syntax

$0

Beispiel

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Wählen Sie im Tool Elemente ein Element aus, z. B. ein <input> Element.

  3. Öffnen Sie das Konsolentool im Bereich Schnellansicht am unteren Rand von DevTools.

  4. Geben Sie $0 im Konsolentool ein, und drücken Sie dann die EINGABETASTE.

    Die $0 Variable gibt das ausgewählte <input> Element zurück:

    Das Ergebnis der Auswertung des Befehls

  5. Wählen Sie im Tool Elemente ein anderes Element aus, z. B. ein <div> -Element.

  6. Geben Sie im Konsolentool ein $0, und drücken Sie dann die EINGABETASTE.

    $0 verweist auf das neu ausgewählte Element, bei dem es sich um das <div> -Element handelt.

  7. Geben Sie $1ein, und drücken Sie dann die Eingabetaste.

    $1 verweist auf das zuvor ausgewählte Element, bei dem es sich um das <input> -Element handelt:

    Das Ergebnis der Auswertung der Befehle $0 und $1

Abfrageauswahl: $(Selektor)

$(selector) gibt den Verweis auf das erste DOM-Element zurück, das mit dem angegebenen CSS-Selektor selectorübereinstimmt.

Diese Funktion ähnelt der document.querySelector() -Funktion.

Wenn Sie eine Bibliothek wie jQuery verwenden, die verwendet $, wird die Funktionalität überschrieben und $ entspricht der Implementierung aus dieser Bibliothek.

Syntax

$(selector, [parentElement])

Beispiel 1

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein $('input'). Das erste Element, das mit der input CSS-Auswahl übereinstimmt, wird angezeigt:

    $('input') gibt einen Verweis auf das erste Element auf der Webseite zurück.

  3. Klicken Sie mit der rechten Maustaste auf das zurückgegebene Ergebnis, und wählen Sie dann Im Elementbereich anzeigen aus, um es im DOM zu finden, oder scrollen Sie zu Ansicht , um es auf der Seite anzuzeigen.

Beispiel 2

Die $() Funktion akzeptiert einen zweiten Parameter, parentElement, der ein übergeordnetes Element angibt, in dem gesucht werden soll. Der Standardwert des Parameters ist document. Dies bedeutet, dass standardmäßig die gesamte Webseite durchsucht wird. Wenn Sie ein übergeordnetes Element angeben, können Sie innerhalb eines bestimmten Teils der Webseite nach Elementen suchen.

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool$('input', $('ul'))

    Das erste Element, das mit dem input CSS-Selektor übereinstimmt, der im ersten ul Element gefunden wurde, wird neu ausgeschrieben:

    Das Ergebnis von $('input', $('ul'))

Abfrageauswahl alle: $$(selektor, [startNode])

$$() gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen, z document.querySelectorAll(). B. .

Diese Funktion ähnelt document.querySelectorAll(), gibt jedoch anstelle von ein array -Element zurück NodeList.

Syntax

$$(selector, [parentElement])

Beispiel 1

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein $$('button'). <button> Alle Elemente auf der Webseite werden angezeigt:

    Das Ergebnis von $$('button')

Beispiel 2

Diese $$() Funktion unterstützt auch den zweiten Parameter , parentElementder ein übergeordnetes Element angibt, in dem gesucht werden soll. Der Standardwert des Parameters ist document. Dies bedeutet, dass standardmäßig die gesamte Webseite durchsucht wird. Wenn Sie ein übergeordnetes Element angeben, können Sie innerhalb eines bestimmten Teils der Webseite nach Elementen suchen.

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein $$('button', $('li.task')). Alle Elemente, die <button> Nachfolger des ersten <li class="task"> Elements sind, werden angezeigt:

    Das Ergebnis von $$('button', $('li.task'))

XPath: $x(path, [startNode])

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

Syntax

$x(path, [parentElement])

Beispiel 1

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein $x("//li"). <li> Alle Elemente auf der Webseite werden angezeigt:

    Verwenden einer XPath-Auswahl

Beispiel 2

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein $x("//li[button]"). Alle Elemente, die <li> Elemente enthalten <button> , werden angezeigt:

    Verwenden eines komplizierteren XPath-Selektors

Ähnlich wie bei den anderen Selektorbefehlen verfügt über den optionalen $x(path) zweiten Parameter , parentElementder ein Element oder einen Knoten angibt, in dem nach Elementen gesucht werden soll.

Löschen

clear() löscht die Konsole des Verlaufs.

Syntax

clear()

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Um den Verlauf im Konsolentool zu erstellen, geben Sie mehrere JavaScript-Ausdrücke ein. Zum Beispiel:

    for (let i = 0; i < 10; i++) {
    console.log(i);
}

  3. Geben clear() Sie zum Löschen des Verlaufs das Konsolentool ein, und drücken Sie dann die EINGABETASTE:

    Das Ergebnis des clear()-Befehls, die Konsole ist leer, und die Meldung

copy(object)

copy(object) kopiert eine Zeichenfolgendarstellung des angegebenen Objekts in die Zwischenablage.

Syntax

copy(object)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie den folgenden Code in das Konsolentool ein, und drücken Sie dann die EINGABETASTE:

    copy($$('*').map(element => element.tagName));

    Der Codeausschnitt wählt alle Elemente auf der Webseite mithilfe der $$(selector) -Funktion aus und ordnet dann die tagName -Eigenschaft jedes Elements einem Array zu. Das Array wird dann mithilfe der -Funktion in die copy() Zwischenablage kopiert.

  3. Fügen Sie den Inhalt der Zwischenablage in einen Text-Editor ein. Der Inhalt der Zwischenablage ist eine Liste aller HTML-Tags auf der Webseite, z. B.:

    ["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]

debug(function)

debug(function) hält innerhalb der angegebenen Funktion function im Quellentool an, wenn diese Funktion aufgerufen wird.

Nachdem der Debugger angehalten wurde, können Sie den Code schrittweise durchlaufen und ihn debuggen.

Syntax

debug(function)

Beispiel

  1. Öffnen Sie eine neue Registerkarte oder ein neues Fenster, und wechseln Sie dann zu einer Seite, die eine JavaScript-Funktion enthält, die Sie debuggen möchten. Wechseln Sie beispielsweise zur Demoseite der TODO-App .

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Geben Sie im Konsolentool ein debug(updateList).

  4. Fügen Sie auf der gerenderten Webseite der Liste ein neues TODO-Element hinzu, indem Sie test in das Textfeld Aufgabe hinzufügen eingeben und dann die EINGABETASTE drücken.

    Der Debugger hält innerhalb der updateList() Funktion im Tool Quellen an:

    Der Debugger hält innerhalb der updateList()-Funktion an.

Verwenden Sie undebug(function) , um die Unterbrechung der Funktion zu beenden, oder verwenden Sie die Benutzeroberfläche, um alle Haltepunkte zu deaktivieren.

Weitere Informationen zu Haltepunkten finden Sie unter Anhalten des Codes mit Haltepunkten.

dir(object)

dir(object) zeigt eine Objektformatauflistung aller Eigenschaften für das angegebene Objekt an, z. B console.dir(). .

Diese Funktion ist ein Alias für console.dir().

Syntax

dir(object)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein document.head , und drücken Sie dann die EINGABETASTE.

    Eine HTML-Darstellung des <head> Elements wird angezeigt.

  3. Geben Sie ein dir(document.head) , und drücken Sie dann die EINGABETASTE.

    Es wird eine Objektartauflistung aller Eigenschaften für das <head> Element angezeigt:

    Protokollierung von

Weitere Informationen finden Sie unter console.dir() in der Konsolen-API.

dirxml(object)

dirxml(object) gibt eine XML-Darstellung des angegebenen Objekts aus, wie im Tool Elemente angezeigt, z console.dirxml(). B. .

Diese Funktion entspricht console.dirxml().

Syntax

dirxml(object)

inspect(object/function)

inspect(element/function) öffnet und wählt das angegebene DOM-Element im Tool Elemente oder die angegebene JavaScript-Funktion im Quellentool aus.

  • Für ein DOM-Element wird diese Funktion geöffnet und wählt das angegebene DOM-Element im Tool Elemente aus.
  • Für eine JavaScript-Funktion öffnet diese Funktion die angegebene JavaScript-Funktion im Quellentool .

Syntax

inspect(element/function)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein inspect(document.body) , und drücken Sie dann die EINGABETASTE.

    Das Tool Elemente wird geöffnet, und das <body> Element ist ausgewählt:

    Überprüfen eines Elements mit inspect()

Wenn Sie eine zu überprüfende Funktion übergeben, öffnet die Funktion die Webseite im Tool Quellen , die Sie überprüfen können.

getEventListeners(object)

getEventListeners(object) gibt die Ereignislistener 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 click . B. oder keydown). Die Elemente in jedem Array sind Objekte, die den für jeden Typ registrierten Listener beschreiben.

Syntax

getEventListeners(object)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool ein getEventListeners($('form')) , und drücken Sie dann die EINGABETASTE.

    Die Ereignislistener, die für das erste <form> Element registriert sind, werden angezeigt:

    Ausgabe von using getEventListeners(form)

Wenn mehr als ein Listener für das angegebene Objekt registriert ist, enthält das Array ein Element für jeden Listener. In der folgenden Abbildung werden zwei Ereignislistener für das document -Element für das click -Ereignis registriert:

Mehrere Ereignislistener, die für das

keys(object)

keys(object) gibt ein Array zurück, das die Namen der Eigenschaften enthält, die zum angegebenen Objekt gehören.

Informationen zum Abrufen der zugeordneten Werte derselben Eigenschaften finden Sie weiter unten unter values(object).

Syntax

keys(object)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den folgenden Code ein, und drücken Sie dann die EINGABETASTE:

    var player1 = {"name": "Ted", "level": 42}

    Der obige Codeausschnitt definiert ein Objekt im globalen Namespace mit dem Namen player1, das zwei Eigenschaften enthält.

  3. Um die Namen der Eigenschaften abzurufen, die player1 zum Objekt gehören, geben Sie im Konsolentool einkeys(player1), und drücken Sie dann die EINGABETASTE:

    Das Ergebnis der keys()-Funktion

  4. Um die Werte der Eigenschaften abzurufen, die player1 zum Objekt gehören, geben Sie im Konsolentool einvalues(player1), und drücken Sie dann die EINGABETASTE:

    Das Ergebnis der values()-Funktion

monitor(function)

monitor(function) protokolliert bei jedem Aufruf der angegebenen Funktion eine Meldung in der Konsole. Die Meldung gibt den Funktionsnamen und die an die Funktion übergebenen Argumente an.

Syntax

monitor(function)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den folgenden Code ein, und drücken Sie dann die EINGABETASTE:

    function sum(x, y) {
  return x + y;
}

    Der obige Codeausschnitt definiert eine Funktion namens sum, die zwei Argumente akzeptiert.

  3. Um die Überwachung der sum Funktion zu starten, geben Sie im Konsolentool einmonitor(sum), und drücken Sie dann die EINGABETASTE:

  4. Um die Funktion aufzurufen, geben Sie ein sum(1, 2) , und drücken Sie die EINGABETASTE. Es wird eine Meldung angezeigt, die angibt, dass die sum Funktion aufgerufen und die Argumente an die Funktion übergeben wurden:

    Das Ergebnis der monitor()-Funktion

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

monitorEvents(object[, events])

monitorEvents(object[, events]) protokolliert jedes Mal, wenn die angegebenen Ereignisse für das angegebene Objekt auftreten, ein Ereignisobjekt in der Konsole.

Sie können ein einzelnes zu überwachende Ereignis, ein Array von Ereignissen oder einen der generischen Ereignistypen angeben, die einer vordefinierten Auflistung von Ereignissen zugeordnet sind.

Syntax

monitorEvents(object[, events])

Beispiel 1

So überwachen Sie ein einzelnes Ereignis:

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den folgenden Code ein, und drücken Sie dann die EINGABETASTE:

    monitorEvents(window, "resize");

    Der vorherige Codeausschnitt überwacht alle Größenänderungsereignisse für das Fensterobjekt.

  3. Ändern Sie die Größe des Fensters, z. B. indem Sie DevTools vergrößern oder verkleinern. Größenänderungsereignisse werden im Konsolentool angezeigt:

    Überwachen von Fenstergrößenänderungsereignissen

Beispiel 2

So überwachen Sie mehrere Ereignisse:

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den folgenden Code ein, und drücken Sie dann die EINGABETASTE:

    monitorEvents(window, ["resize", "scroll"]);

    Der vorherige Codeausschnitt definiert ein Array von Ereignisnamen, um sowohl als scroll auch resize eEvents für das Window-Objekt zu überwachen.

  3. Ändern Sie die Größe des Fensters, z. B. indem Sie es verkürzen, und scrollen Sie dann auf der gerenderten Webseite. Größenänderungs- und Bildlaufereignisse werden im Konsolentool angezeigt:

    Überwachen von Fenstergrößenänderungs- und Bildlaufereignissen

Beispiel 3

Sie können auch eine Auflistung von Ereignissen angeben, indem Sie einen der vordefinierten Ereignissätze verwenden. In der folgenden Tabelle sind die verfügbaren Ereignistypen und die zugehörigen Ereigniszuordnungen aufgeführt:

Ereignistyp Entsprechende zugeordnete Ereignisse
mouse "click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel"
key "keydown", "keypress", "keyup", "textInput"
touch "touchcancel", "touchend", "touchmove", "touchstart"
control "weichzeichnen", "ändern", "fokus", "reset", "resize", "scroll", "select", "submit", "zoom"

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie im Konsolentool den folgenden Code ein, und drücken Sie dann die EINGABETASTE:

    monitorEvents(window, "key");

    Der vorherige Codeausschnitt überwacht alle Tastaturereignisse für das Fensterobjekt.

  3. Drücken Sie auf der gerenderten Webseite alle Tasten. Tastaturereignisse werden im Konsolentool angezeigt:

    Überwachen von Schlüsselereignissen

profile([name])

profile([name]) startet eine JavaScript-CPU-Profilerstellungssitzung mit einem optionalen Namen.

Rufen Sie profileEnd([name]) auf, um das Profil zu vervollständigen und die Ergebnisse im Leistungstool anzuzeigen.

Syntax

profile([name])

Beispiel

  1. Öffnen Sie die Seite, für die Sie ein Profil erstellen möchten, in einer neuen Registerkarte oder in einem neuen Fenster. Wechseln Sie beispielsweise zur Demoseite für langsame Animation .

  2. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  3. Geben Sie zum Starten der Profilerstellung im Konsolentool ein profile("My profile), und drücken Sie dann die EINGABETASTE.

  4. Um die Profilerstellung zu beenden, geben Sie nach einiger Zeit ein profileEnd("My profile"), und drücken Sie dann die EINGABETASTE.

    Die Profilergebnisse werden im Leistungstool angezeigt:

    Das Ergebnis der profile()-Funktion

Sie können mehrere Profile gleichzeitig erstellen, und Sie müssen nicht jedes Profil in der Erstellungsreihenfolge beenden. Der folgende Code erstellt z. B. zwei Profile und beendet sie dann in der entgegengesetzten Reihenfolge:

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd([name])

profileEnd([name]) schließt eine JavaScript-CPU-Profilerstellungssitzung ab und zeigt die Ergebnisse im Leistungstool an.

Um diese Funktion aufrufen zu können, müssen Sie die profile([name]) -Funktion ausführen.

Syntax

profileEnd([name])

Weitere Informationen finden Sie weiter oben unter profile([name]).

queryObjects(constructor)

queryObjects(constructor) gibt ein Array der Objekte zurück, die vom angegebenen Konstruktor erstellt wurden.

Der Bereich von queryObjects() ist der aktuell ausgewählte Laufzeitkontext in der Konsole.

Syntax

queryObjects(constructor)

Beispiel

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Um alle Instanzen von HTML-Elementen zurückzugeben, geben Sie im Konsolentool einqueryObjects(HTMLElement), und drücken Sie dann die EINGABETASTE:

    Das Ergebnis der queryObjects()-Funktion

Weitere Beispiele:

  • Verwenden Sie queryObjects(Promise) , um alle Instanzen von Promise -Objekten zurückzugeben, wenn Ihre Webseite -Objekte verwendet Promise .
  • Verwenden Sie queryObjects(ClassName) , um alle Instanzen der ClassName -Klasse zurückzugeben, wenn Ihre Webseite JavaScript-Klassen verwendet.

table(data[, columns])

table(data[, columns]) protokolliert Objektdaten, die als Tabelle mit Spaltenüberschriften formatiert sind, für das angegebene Datenobjekt.

Diese Funktion ist ein Alias für console.table().

Syntax

table(data[, columns])

Beispiel

So zeigen Sie eine Liste der Namen von Personen als Tabelle in der Konsole an:

  1. Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool wird in DevTools neben der Webseite geöffnet.

  2. Geben Sie den folgenden Code in die Konsole ein, und drücken Sie dann die EINGABETASTE:

    var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};

    Der obige Codeausschnitt definiert ein Objekt im globalen Namespace mit dem Namen names, das zwei Eigenschaften enthält.

  3. Um das names Objekt als Tabelle anzuzeigen, geben Sie in der Konsole eintable(names), und drücken Sie dann die EINGABETASTE:

    Das Ergebnis der table()-Funktion

undebug(function)

undebug(function) beendet das Debuggen der angegebenen Funktion, sodass der Debugger nicht mehr in der Funktion anhält, wenn die Funktion ausgeführt wird.

Weitere Informationen finden Sie weiter oben unter debug(function).

Syntax

undebug(function)

unmonitor(function)

unmonitor(function) beendet die Überwachung der angegebenen Funktion.

Weitere Informationen finden Sie weiter oben unter monitor(function).

Syntax

unmonitor(function)

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) beendet die Überwachung von Ereignissen für das angegebene Objekt und die angegebenen Ereignisse.

Weitere Informationen finden Sie weiter oben unter monitorEvents(object[, events])..

Syntax

unmonitorEvents(object[, events])

values(object)

values(object) gibt ein Array zurück, das die Werte aller Eigenschaften enthält, die zum angegebenen Objekt gehören.

Informationen zum Abrufen der zugeordneten Schlüssel derselben Eigenschaften finden Sie oben unter keys(object).

Syntax

values(object)

Beispiel

Sehen Sie sich das Beispiel oben in keys(object) an.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.