Überwachen von Änderungen in JavaScript mithilfe von Live-Ausdrücken

Liveausdrücke sind eine hervorragende Möglichkeit, den Wert von JavaScript-Ausdrücken zu überwachen, die sich im Laufe der Zeit stark ändern. Anstatt viele unterschiedliche Konsolennachrichten zu generieren, die Sie lesen und scrollen müssen, können Sie JavaScript-Ausdrücke oben im Konsolentool anheften.

Mit Live-Ausdrücken sehen Sie den Wert Ihrer JavaScript-Ausdrücke oben im Konsolentool , immer an derselben Stelle, und Sie können Konsolenprotokolle weiterhin für Werte verwenden, die sich nicht so oft ändern.

Live-Ausdrücke werden ausschließlich auf Ihrem Computer ausgeführt, und Sie müssen nichts im Code ändern, um ihre Werte anzuzeigen.

Hinzufügen eines neuen Liveausdrucks

So fügen Sie einen Liveausdruck hinzu:

1. Öffnen Sie die Liveausdruck-Demo-Webseite in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

3. Öffnen Sie in DevTools das Konsolentool .

4. Klicken Sie in der Konsole neben dem Textfeld Filter auf das Symbol Liveausdruck erstellen (

   Ein Textfeld wird angezeigt:

   

5. Geben Sie den JavaScript-Ausdruck document.activeElement in das Textfeld ein. Ein Live-Ausdruck kann ein beliebiger gültiger JavaScript-Ausdruck sein.

6. Um den Ausdruck zu speichern, drücken Sie STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS). Oder klicken Sie außerhalb des Textfelds LiveAusdruck .

   Der Ausdruck ist jetzt live und wird als Ergebnis angezeigt body :

   

7. Klicken Sie auf verschiedene Teile der Webseite, oder drücken Sie TAB oder UMSCHALT+TAB , um den Fokus auf der Webseite zu verschieben.

   Der document.activeElement Live Expression-Wert ändert sich, um das aktuell fokussierte Element in Echtzeit widerzuspiegeln:

   

Hinzufügen weiterer Liveausdrücke

Sie können dem Konsolentool mehrere Liveausdrücke hinzufügen. Jeder Liveausdruck wird unabhängig voneinander ausgewertet, und die Ergebnisse werden in der Reihenfolge angezeigt, in der Sie sie hinzufügen.

So fügen Sie einen zweiten Liveausdruck hinzu:

1. Klicken Sie im Konsolentool neben dem Textfeld Filter auf das Symbol Liveausdruck erstellen (

   Unter dem ersten Live-Ausdruck wird ein neues Textfeld angezeigt:

   

2. Geben Sie einen neuen JavaScript-Ausdruck in das Textfeld ein, um z. B window.innerWidth . die Breite des Browserfensters anzuzeigen.

3. Wiederholen Sie die Schritte, um einen weiteren Liveausdruck für window.innerHeighthinzuzufügen.

   Das Konsolentool zeigt jetzt drei Liveausdrücke an:

   

Entfernen von Liveausdrücken

Um einen Liveausdruck zu entfernen, klicken Sie neben dem Ausdruck auf das Symbol Schließen ():

Ersetzen der Konsolenprotokollierung durch Liveausdrücke

Sie können beliebig viele Liveausdrücke erstellen und jeden Liveausdruck über Browsersitzungen und Fenster hinweg beibehalten. Liveausdrücke sind eine Möglichkeit, Rauschen in Ihrem Debugworkflow zu reduzieren.

Verwenden der Konsolenprotokollierung zum Anzeigen von Mauskoordinaten

So überwachen Sie die Mausbewegung auf der aktuellen Webseite:

1. Öffnen Sie die Demo-Webseite Logging Mouse Movement Demo in einem neuen Fenster oder einer neuen Registerkarte.

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

3. Bewegen Sie die Maus über die gerenderte Demo-Webseite.

   In der Konsole werden viele Protokollmeldungen angezeigt:

   

Die große Menge an Informationen verlangsamt Ihren Debugprozess und macht es schwierig, die Änderungen zu erkennen, die Sie überwachen möchten. Wenn in der Konsole weitere Meldungen angezeigt werden, wenn Sie die Maus bewegen, scrollen die werte, die Sie sehen möchten, vom Bildschirm.

Verwenden von Liveausdrücken zum Anzeigen von Mauskoordinaten

Verwenden Sie Liveausdrücke, um die Mausbewegung auf der aktuellen Webseite zu überwachen, ohne sich auf ausführliche Protokollmeldungen zu verlassen.

So verwenden Sie Liveausdrücke, um übermäßige Konsolenprotokollmeldungen zu vermeiden:

1. Öffnen Sie die Demo-Webseite Mausbewegung ohne Protokollierung der Demo in einem neuen Fenster oder einer neuen Registerkarte.

   Diese Demo-Webseite verwendet JavaScript, um die aktuelle Position der Maus nachzuverfolgen, und speichert die Koordinaten in den x globalen Variablen und y .

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

3. Bewegen Sie die Maus.

   Die Werte der x Variablen und y werden aktualisiert, aber es werden keine Protokollmeldungen angezeigt.

4. Klicken Sie im Konsolentool auf das Symbol Liveausdruck erstellen ( neben dem Textfeld Filter , und geben Sie dann den JavaScript-Ausdruck ein x.

5. Wiederholen Sie den obigen Schritt, um einen zweiten Live-Ausdruck für yhinzuzufügen.

6. Bewegen Sie die Maus auf der gerenderten Webseite.

   Nun werden in der Konsole die Werte der x Liveausdrücke und y in Echtzeit aktualisiert:

   

Siehe auch

• Demo für Liveausdrücke
• Demo zur Protokollierung der Mausbewegung
• Demo zur Mausbewegung ohne Protokollierung