🤽🏾 👼 ❓ Chrome-Konsolenfunktionen, die Sie möglicherweise noch nie verwendet haben 👨🏽‍🎓 💂🏼 🔊

Die Chrome Developer Tools Console ist wahrscheinlich eines der am häufigsten verwendeten und nützlichsten speziellen Browser-Tools. Die Konsole bietet dem Programmierer viele interessante Funktionen. Es hilft beim Debuggen, Profilieren und Überwachen von Seitencode. Das Material, das wir heute übersetzen, soll Ihnen einige der Funktionen der Chrome-Konsole erläutern, die nicht so bekannt sind, wie sie es verdienen.

Überwachungsfunktion

Die Funktion monitordient zur Organisation der Überwachung anderer Funktionen. Insbesondere können Sie herausfinden, wann eine bestimmte Funktion aufgerufen wurde und mit welchen Parametern sie aufgerufen wurde. Betrachten Sie ein Beispiel (der Code wird in die Chrome-Konsole eingegeben):

function traceFunc (arg) { }
monitor(traceFunc)

Die Funktion wird als Argument traceFuncan die Funktion übergeben monitor. Wenn die Funktion traceFuncaufgerufen wird, erhalten wir eine Benachrichtigung darüber (erneut in der Konsole):

traceFunc(90)
function traceFunc was called with arguments: 90

Verwenden der Monitorfunktion

Unmonitor-Funktion

Mit dieser Funktion unmonitorkönnen Sie die Überwachung einer Funktion deaktivieren, die zuvor mit der Funktion überwacht wurde monitor. Um die Überwachung der Funktion zu beenden traceFunc, verwenden wir die folgende Konstruktion:

unmonitor(traceFunc)

Wenn Sie danach anrufen traceFunc, werden keine Benachrichtigungen in der Konsole angezeigt.

traceFunc(90)

Das Aufrufen einer Funktion, deren Überwachung deaktiviert ist, führt nicht zur Ausgabe von Informationen zu diesem Aufruf an die Konsole

MonitorEvents-Funktion

Das Funktionsnutzungsschema monitorEventssieht folgendermaßen aus:

monitorEvents(object,[,events])

Mit dieser Funktion können Sie das Auftreten von Objektereignissen verfolgen und Informationen zu diesen Ereignissen in der Konsole anzeigen.

Angenommen, auf der Seite befindet sich eine Schaltfläche, die durch den folgenden Code beschrieben wird:

<button id="button">Button</button>

Beginnen wir mit der Verfolgung des Ereignisses clickdieser Schaltfläche:

monitorEvents(button, "click")

Wenn Sie nach dem Starten der Beobachtung eines Ereignisses clickauf die Schaltfläche klicken, werden Informationen zum Ereignis in der Konsole angezeigt.

Klicken Sie auf

die Schaltfläche und starten Sie die Überwachung der Ereignisse. Klicken Sie auf Sie können mehrere Ereignisse überwachen, indem SiemonitorEventsein Array alsFunktion deszweiten Arguments übergeben:

monitorEvents(button, ["click", "mouseover"])

Jetzt unter Beobachtung sind Ereignisse clickund mouseover. Infolgedessen erhält die Konsole Meldungen über das Klicken auf die Schaltfläche und dass sie über die Maus gehalten wurde.

Überwachen von Ereignissen der Klick- und Mouseover-Schaltflächen

Sie können die Überwachung von Ereignisgruppen organisieren:

monitorEvents(button, ["click", "mouse"])

Eine Zeichenfolge mouseist eine universelle Kennung für eine Gruppe von mausbezogenen Ereignissen. Zum Beispiel - mouseover, mousemove, mouseout. Wie beim Abonnieren bestimmter Ereignisse führt das Abonnieren einer universellen Ereigniskennung zur Ausgabe von Benachrichtigungen, wenn solche Ereignisse auftreten.

Überwachen von Schaltflächenereignissen im Zusammenhang mit dem Klicken darauf und mit der Maus

Natürlich ist die Funktion auchmonitorEventsauf andere Objekte und nicht nur auf Schaltflächen anwendbar. Gleiches gilt für Ereignisse, die damit verfolgt werden können. Dies sind nicht nurclickMausereignisse.

UnmonitorEvents-Funktion

Mit dieser Funktion unmonitorEventskönnen Sie die Überwachung von Objektereignissen abbrechen, die von der Funktion gestartet wurden monitorEvents.

Angenommen, wir beschließen, Schaltflächenklicks zu verfolgen:

monitorEvents(button, "click")

Wenn Sie auf die Schaltfläche klicken, werden Informationen zu diesen Ereignissen an die Konsole gesendet. Um die Überwachung zu beenden, benötigen wir dieses Design:

unmonitorEvents(button, "click")

Jetzt beendet das System die Überwachung des clickSchaltflächenereignisses.

Nachdem Sie sich geweigert haben, Klickereignisse zu überwachen, gelangen Berichte über Klicks auf eine Schaltfläche nicht mehr zur Konsole

$ _ Konstruktion

Mit dem Design $_können Sie auf das Ergebnis des letzten in der Konsole ausgeführten Ausdrucks zugreifen.

Angenommen, wir haben einen Ausdruck in die Konsole eingegeben 2 + 2und ausgeführt. Es gab uns 4.

Dann haben wir den Ausdruck eingegeben und ausgeführt 3*2. Es gab uns 6.

Es stellte sich heraus, dass wir zwei Ausdrücke ausgeführt haben, von denen der jüngste ist 3*2. Wenn Sie jetzt in die Konsole eintreten $_und auf klicken, wird Enterdas Ergebnis des Ausdrucks angezeigt 3*2, d 6. H.

Verwenden des Konstrukts $ _

Kopierfunktion

Mit dieser Funktion copykönnen Sie die darauf übertragenen Daten in die Zwischenablage kopieren.

Lassen Sie uns zum Beispiel den folgenden Befehl ausführen:

copy("nnamdi")

Dadurch wird die Zeile in die Zwischenablage kopiert nnamdi. Um dies zu überprüfen, führen Sie den obigen Befehl in der Konsole aus und fügen Sie dann das, was sich in der Zwischenablage befindet, in die Adressleiste des Browsers ein. Sie sollten etwas erhalten, das dem folgenden Bild ähnelt.

Software, die Daten in die Zwischenablage kopiert

Funktion löschen

Mit dieser Funktion clearkönnen Sie den Verlauf der Befehlsausführung in der Konsole löschen. Diese Funktion ist nützlich, wenn die Konsole mit verschiedenen darin angezeigten Materialien gefüllt ist und Sie alles, was darin angezeigt wird, daraus entfernen möchten.

Tastenfunktion

Die Funktion keys(object)gibt wie die Methode Object.keysein Array von Objekteigenschaftsschlüsseln zurück:

const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)

Verwenden der Tastenfunktion

Werte funktionieren

Die Funktion valuesähnelt einer Methode Object.values. Es gibt ein Array von Objekteigenschaftswerten zurück.

const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)

Verwenden der Wertefunktion

GetEventListeners-Funktion

Die Funktion getEventListenersgibt Informationen zu Ereignissen zurück, die für das Objekt registriert wurden. Wenn Sie beispielsweise bestimmte Ereignisse für eine Schaltfläche registrieren, gibt die getEventListenersan diese Schaltfläche übergebene Funktion ein Objekt zurück, das in Form von Arrays eine Beschreibung der Ereignisse der Schaltfläche enthält.

Angenommen, die Seite hat diesen Code:

<button id="button" 
    onclick="clickHandler()" 
    onmousedown="mousedownHandler()" 
    onmouseover="mouseoverHandler()">
        Button
</button>
<script>
    function clickHandler() {
    }
    function mousedownHandler() {
    }
    function mouseoverHandler() {
    }
</script>

Dieser Code beschreibt die Taste und drei Ereignisse: click, onmousedown, und onmouseover. Ereignissen werden Handler zugewiesen clickHandler, mousedownHandlerund mouseoverHandler.

Rufen Sie den folgenden Befehl in der Konsole auf:

getEventListeners(button)

Weitere Informationen zum Event - Handler - Taste

Ein Objekt, nach dem Befehl erteiltgetEventListeners(button), verfügbaren Eigenschaftenclick,mousedownundmouseoverderen Namen die Namen der EventHandler übereinstimmendie eine Taste zuweisen. Eigenschaften enthalten Arrays von Objekten, die detaillierte Informationen zu Ereignissen enthalten.

Funktion $

Die Funktion $gibt das erste der DOM-Elemente zurück, die mit dem an sie übergebenen Selektor übereinstimmen. Das Funktionsaufrufdiagramm sieht folgendermaßen aus:

$(elementName, [,node])

Angenommen, die Seite hat den folgenden Code:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

Dieser Code beschreibt vier Schaltflächen.

Führen Sie den folgenden Befehl aus:

$("button")

Das Folgende zeigt, was nach der Ausführung in die Konsole gelangt.

Das Ergebnis des

Befehls $ ("button")Button1 .Wie Sie sehen können, hat der Befehl eine Schaltfläche zurückgegeben. Diese Schaltfläche ist das erste Elementbuttonim Dokument. Nachdem wir einen DOM-Knoten eines Elements zur Verfügung haben, können wir auf dessen Eigenschaften und Methoden verweisen.

Um beispielsweise die Kennung einer Schaltfläche herauszufinden, können Sie diese Konstruktion verwenden:

$("button").id

Klärung der Kennung der Schaltfläche

Mit der Funktion$können Sie den DOM-Knoten angeben, dessen erstes Element uns interessiert.

AngenommenKnöpfeButton2,Button3undButton4aus dem vorherigen Beispiel ist in einem Elemente angeordnet<div>:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
    <button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
    <button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
    <button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

Mit <div>dem folgenden Befehl können Sie die erste Schaltfläche aus den verschachtelten auswählen :

$("button", document.querySelector("div"))

Zugriff auf ein in einem anderen Element verschachteltes Element

Wie Sie sehen, wird jetzt$eine Schaltfläche zurückgegebenButton2, da dies das erste im Elementbuttonverschachtelte Element ist<div>

Funktion $$

Die Funktion $$funktioniert genauso wie die obige Funktion $. Es werden jedoch alle übereinstimmenden Elemente zurückgegeben. Es heißt so:

$$(element, [,node])

Angenommen, eine Seite enthält vier Schaltflächen, wie in den vorherigen Beispielen.

Rufen Sie den folgenden Befehl auf:

$$("button")

Verwenden der $$ -Funktion

Nach dem Aufruf$$stehen uns, wie in der vorherigen Abbildung dargestellt, eine Reihe von Elementen zur Verfügungbutton.

Elemente können auch aus den Elementen ausgewählt werden, die beim Aufruf$$des DOM-Knotensangegeben wurden. Wenn auf einer Seite beispielsweise mehrere Schaltflächen enthalten sind<div>, können Sie zur Auswahl all dieser Schaltflächen das folgende Design verwenden:

$$("button", document.querySelector("div"))

Verwenden der $$ -Funktion zum Auswählen von Elementen, die in einem anderen Element verschachtelt sind

Zusammenfassung

Die Chrome-Konsole ist ein nützliches Tool. Sobald neue Versionen von Chrome verfügbar sind, werden die Funktionen der Konsole erweitert. Daher ist es sinnvoll, regelmäßig zu sehen hier auf der Suche nach neu und interessant etwas.

Liebe Leser! Welche Chrome-Konsolentools verwenden Sie am häufigsten?

Chrome-Konsolenfunktionen, die Sie möglicherweise noch nie verwendet haben