Hilfsfunktionen und Selektoren des Konsolentools

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

  • Auswählen und Untersuchen von DOM-Elementen über CSS-Selektoren.
  • Anzeigen von Daten in einem lesbaren Format.
  • Stoppen und Starten des Profilers.
  • Überwachen von DOM-Ereignissen.

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

Zusammenfassung

Variable oder Funktion Beschreibung
Zuletzt ausgewerteter Ausdruck: $_ Gibt den Wert des zuletzt ausgewerteten Ausdrucks zurück.
Zuletzt ausgewähltes Element oder JavaScript-Objekt: $0-$4 Gibt ein zuletzt ausgewähltes Element oder JavaScript-Objekt zurück.
Abfrageauswahl: $(selector) Abfrageauswahl; gibt den Verweis auf das erste DOM-Element mit dem angegebenen CSS-Selektor zurück, z. B document.querySelector(). .
Abfrageselektor alle: $$(selector, [startNode]) Abfrageselektor alle; gibt ein Array von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen, z. B document.querySelectorAll(). .
XPath: $x(Pfad, [startNode]) Gibt ein Array von DOM-Elementen zurück, die dem angegebenen XPath-Ausdruck entsprechen.
clear() Löscht die Konsole von ihrem Verlauf.
copy(object) Kopiert eine Zeichenfolgendarstellung des angegebenen Objekts in die Zwischenablage.
debug(Funktion) Wenn die angegebene Funktion aufgerufen wird, wird der Debugger aufgerufen und unterbricht innerhalb der Funktion im Bedienfeld "Quellen".
dir(object) Zeigt eine objektartige Auflistung aller Eigenschaften für das angegebene Objekt an, z. B console.dir(). .
dirxml(object) Druckt eine XML-Darstellung des angegebenen Objekts, wie sie im Elemente-Tool angezeigt wird, z. B console.dirxml(). .
inspect(object/function) Öffnet das angegebene DOM-Element im Tool "Elemente " oder das angegebene JavaScript-Heapobjekt im Tool "Speicher" und wählt es aus.
getEventListeners(object) Gibt die Ereignis-Listener 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(Funktion) Protokolliert eine Nachricht an die Konsole, die den Funktionsnamen zusammen mit den Argumenten angibt, 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(Funktion) Stoppt den Debugger der angegebenen Funktion, sodass der Debugger nicht mehr aufgerufen wird, wenn die Funktion angefordert wird.
unmonitor(function) Stoppt 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.

Zuletzt 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 ebenfalls auf das Ergebnis des Ausdrucks festgelegt.

  3. Geben Sie $_ein, und drücken Sie dann die Eingabetaste:

    Das Konsolentool zeigt, 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 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 anschließend die Eingabetaste:

    $_.length

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

  4. Geben Sie den folgenden Code in die Konsole ein, und drücken Sie anschließend 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 zuletzt ausgewählte Elemente oder JavaScript-Objekte zurückgeben.

$0 Gibt das zuletzt ausgewählte Element oder JavaScript-Objekt zurück, $1 gibt das zweitzuletzt ausgewählte zurück usw. Die $0Variablen , $1, $3$2, und $4 fungieren als historischer Verweis auf die letzten fünf DOM-Elemente, die im Tool "Elemente" überprüft wurden, oder auf die letzten fünf JavaScript-Heapobjekte, die im Tool "Speicher" 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 Überprüfen 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 Schnellansichtsbereich am unteren Rand der DevTools.

  4. Geben Sie $0 das 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 $0-Befehls in der Konsole

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

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

    $0 bezieht sich auf das neu ausgewählte Element, das <div> das Element ist.

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

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

    Das Ergebnis der Auswertung der Befehle

Abfrageauswahl: $(selector)

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

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

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 den Namen $('input'). Das erste Element, das mit dem input CSS-Selektor ü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 nach innen zur Ansicht , um es auf der Seite anzuzeigen.

Beispiel 2

Die $() Funktion akzeptiert einen zweiten Parameter, , der ein übergeordnetes Element angibt, parentElementin dem gesucht werden soll. Der Standardwert des Parameters ist document, was bedeutet, dass standardmäßig die gesamte Webseite durchsucht wird. Durch Angabe eines übergeordneten Elements können Sie nach Elementen innerhalb eines bestimmten Teils der Webseite 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 ausgeführt:

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

Abfrageselektor alle: $$(selector, [startNode])

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

Diese Funktion ähnelt document.querySelectorAll(), gibt jedoch ein array of-Element anstelle eines NodeListzurück.

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 den Namen $$('button'). <button> Alle Elemente auf der Webseite werden angezeigt:

    Das Ergebnis von $$('button')

Beispiel 2

Diese $$() Funktion unterstützt auch einen zweiten Parameter, , der ein übergeordnetes Element angibt, parentElementin dem gesucht werden soll. Der Standardwert des Parameters ist document, was bedeutet, dass standardmäßig die gesamte Webseite durchsucht wird. Durch Angabe eines übergeordneten Elements können Sie nach Elementen innerhalb eines bestimmten Teils der Webseite 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 den Namen $$('button', $('li.task')). Alle Elemente, die <button> Nachkommen des ersten <li class="task"> Elements sind, werden angezeigt:

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

XPath: $x(Pfad, [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 den Namen $x("//li"). <li> Alle Elemente auf der Webseite werden angezeigt:

    Verwenden eines XPath-Selektors

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 den Namen $x("//li[button]"). Alle Elemente, die <li> Elemente enthalten <button> , werden angezeigt:

    Verwenden eines komplizierteren XPath-Selektors

Verfügt ähnlich wie die anderen Selektorbefehle $x(path) über einen optionalen zweiten Parameter, , der ein Element oder einen Knoten angibt, parentElementin dem nach Elementen gesucht werden soll.

Löschen

clear() löscht die Konsole von ihrem Verlauf.

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. Geben Sie mehrere JavaScript-Ausdrücke ein, um im Konsolentool einen Verlauf zu erstellen. Zum Beispiel:

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

  3. Um den Verlauf zu löschen, geben Sie clear() das Konsolentool ein, und drücken Sie dann die Eingabetaste:

    Das Ergebnis des Befehls clear() ist, dass die Konsole leer ist 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 copy() Funktion in die Zwischenablage kopiert.

  3. Fügen Sie den Inhalt der Zwischenablage in einen Texteditor ein. Der Inhalt der Zwischenablage ist eine Liste aller HTML-Tags auf der Webseite, zum Beispiel:

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

debug(Funktion)

debug(function) Pausiert innerhalb der angegebenen Funktion function im Tool "Quellen ", wenn diese Funktion aufgerufen wird.

Nachdem der Debugger angehalten wurde, können Sie den Code schrittweise durchlaufen und 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 zum Beispiel 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 den Namen debug(updateList).

  4. Fügen Sie auf der gerenderten Webseite ein neues TODO-Element zur Liste 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 Funktion updateList() an

Verwenden Sie diese Option 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 objektartige Auflistung 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 die Eingabetaste document.head ein, und drücken Sie dann die Eingabetaste.

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

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

    Eine objektformatierte Auflistung aller Eigenschaften für das <head> Element wird angezeigt:

    Protokollieren von

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

dirxml(object)

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

Diese Funktion entspricht console.dirxml().

Syntax

dirxml(object)

inspect(object/function)

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

  • Bei einem DOM-Element öffnet diese Funktion das angegebene DOM-Element und wählt es im Tool "Elemente " aus.
  • Bei einer JavaScript-Funktion öffnet diese Funktion die angegebene JavaScript-Funktion im Tool Quellen .

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 die Eingabetaste inspect(document.body) ein, und drücken Sie dann die Eingabetaste.

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

    Untersuchen eines Elements mit inspect()

Wenn Sie eine Funktion zur Prüfung übergeben, öffnet die Funktion die Webseite im Tool "Quellen ", auf der Sie sie prü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 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 die Eingabetaste getEventListeners($('form')) ein, und drücken Sie dann die Eingabetaste.

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

    Ausgabe von getEventListeners(form)

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

Mehrere Ereignis-Listener, 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 zugehörigen Werte derselben Eigenschaften finden Sie 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 zum player1 Objekt gehören, geben Sie im Konsolentool einkeys(player1), und drücken Sie dann die Eingabetaste:

    Das Ergebnis der Funktion keys()

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

    Das Ergebnis der Funktion values()

monitor(Funktion)

monitor(function) Protokolliert bei jedem Aufruf der angegebenen Funktion eine Meldung an die 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 mit der Überwachung der sum Funktion zu beginnen, geben Sie das Konsolentool einmonitor(sum), und drücken Sie dann die Eingabetaste:

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

    Das Ergebnis der Funktion monitor()

Um die Überwachung zu beenden, verwenden Sie unmonitor(function).

monitorEvents(object[, events])

monitorEvents(object[, events]) Protokolliert jedes Mal ein Ereignisobjekt in der Konsole, wenn die angegebenen Ereignisse auf dem angegebenen Objekt auftreten.

Sie können ein einzelnes zu überwachendes 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 der Größe des Fensters, z. B. durch Vergrößern oder Verkleinern von DevTools. Ereignisse zum Ändern der Größe werden im Konsolentool angezeigt:

    Überwachen von Ereignissen zur Größenänderung von Fenstern

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, die sowohl als auch resizescroll eevents für das Fensterobjekt überwacht werden sollen.

  3. Ändern Sie die Größe des Fensters, z. B. indem Sie es kürzen, und scrollen Sie dann auf der gerenderten Webseite. Ändern der Größe und Scrollen von Ereignissen werden im Konsolentool angezeigt:

    Überwachen von Ereignissen zur Größenänderung und zum Scrollen von Fenstern

Beispiel 3

Sie können auch eine Sammlung von Ereignissen angeben, indem Sie einen der vordefinierten Ereignissätze verwenden. Die folgende Tabelle zeigt die verfügbaren Ereignistypen und die zugehörigen Ereigniszuordnungen:

Ereignistyp Entsprechende zugeordnete Ereignisse
mouse "click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel"
key "keydown", "keypress", "keyup", "textInput"
touch "touchcancel", "touchend", "touchmove", "touchstart"
control "blur", "change", "focus", "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 Windows-Objekt.

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

    Überwachen von wichtigen Ereignissen

profile([name])

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

Um das Profil abzuschließen und die Ergebnisse im Leistungstool anzuzeigen, rufen Sie profileEnd([name]) auf.

Syntax

profile([name])

Beispiel

  1. Öffnen Sie die Seite, auf der Sie ein Profil erstellen möchten, in einer neuen Registerkarte oder einem neuen Fenster. Wechseln Sie zum Beispiel zur Demoseite Träge 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. Um die Profilerstellung zu starten, geben Sie im Konsolentool die Zeichenfolge profile("My profile)ein, und drücken Sie dann die Eingabetaste.

  4. Wenn Sie die Profilerstellung nach Ablauf einiger Zeit beenden möchten, geben Sie profileEnd("My profile")ein, und drücken Sie dann die EINGABETASTE.

    Die Profilergebnisse werden im Leistungstool angezeigt:

    Das Ergebnis der Funktion profile()

Sie können mehrere Profile gleichzeitig erstellen und müssen nicht jedes Profil in der Reihenfolge der Erstellung beenden. Der folgende Code erstellt beispielsweise zwei Profile und beendet sie dann in umgekehrter 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 aufzurufen, müssen Sie die Funktion profile([name]) ausführen.

Syntax

profileEnd([name])

Weitere Informationen finden Sie unter Profil([Name]) weiter oben.

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 Funktion queryObjects()

Weitere Beispiele:

  • Wird verwendet queryObjects(Promise) , um alle Instanzen von Promise Objekten zurückzugeben, wenn Ihre Webseite Objekte verwendet Promise .
  • Wird verwendet 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 mit den 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 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 Funktion table()

undebug(Funktion)

undebug(function) Stoppt den Debugger der angegebenen Funktion, sodass der Debugger bei der Ausführung der Funktion nicht mehr angehalten wird.

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

Syntax

undebug(function)

unmonitor(function)

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

Weitere Informationen finden Sie 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 unter monitorEvents(object[, events]), oben.

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 zugehörigen Schlüssel derselben Eigenschaften finden Sie oben unter keys(object).

Syntax

values(object)

Beispiel

Siehe das Beispiel in keys(object) oben.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.

Creative Commons License Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.

  • Last updated on