Neuerungen in den Entwicklertools (Chrome 71)

Kayce Basques

In Chrome 71 sind folgende neue Funktionen und wichtige Änderungen an den Chrome-Entwicklertools geplant:

• Bewegen Sie den Mauszeiger auf einen Live-Ausdruck, um einen DOM-Knoten hervorzuheben.
• DOM-Knoten als globale Variablen speichern
• Initiator und Prioritätsinformationen jetzt in HAR-Importen und -Exporten
• Über das Hauptmenü auf das Befehlsmenü zugreifen
• Haltepunkte für Bild im Bild
• (Bonustipp) Führen Sie „MonitorEvents()“ in der Konsole aus, um zu beobachten, wie die Ereignisse eines Elements ausgelöst werden.

Lies weiter oder sieh dir die Videoversion dieser Seite an:

Bewegen Sie den Mauszeiger auf einen Live-Ausdruck, um einen DOM-Knoten hervorzuheben.

Wenn ein Live-Ausdruck als DOM-Knoten ausgewertet wird, bewegen Sie den Mauszeiger auf das Ergebnis des Live-Ausdrucks, um und markieren Sie diesen Knoten im Darstellungsbereich.

Abbildung 1. Bewegen Sie den Mauszeiger auf ein Live-Ausdruck-Ergebnis, um den Knoten im Darstellungsbereich hervorzuheben.

DOM-Knoten als globale Variablen speichern

Um einen DOM-Knoten als globale Variable zu speichern, führen Sie in der Konsole einen Ausdruck aus, der einen Knoten ergibt, Klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie Als globale Variable speichern aus.

Abbildung 2. Als globale Variable in der Console speichern

Alternativ können Sie mit der rechten Maustaste auf den Knoten in der DOM-Struktur klicken und Als globale Variable speichern auswählen.

Abbildung 3. Als globale Variable im DOM-Baum speichern

Initiator und Prioritätsinformationen jetzt in HAR-Importen und -Exporten

Wenn Sie Netzwerkprotokolle gemeinsam mit Kollegen diagnostizieren möchten, können Sie die Netzwerkanfragen in ein HAR-Datei.

Abbildung 8. Netzwerkanfragen in eine HAR-Datei exportieren

Um die Datei wieder in das Steuerfeld "Network" zu importieren, verschieben Sie sie einfach per Drag-and-drop.

Wenn Sie eine HAR-Datei exportieren, enthalten die Entwicklertools im HAR-Datei Informationen zum Initiator und zur Priorität. -Datei. Wenn Sie HAR-Dateien wieder in die Entwicklertools importieren, sehen Sie die Spalten Initiator und Priority. die jetzt ausgefüllt sind.

Das Feld _initiator bietet mehr Kontext dazu, warum die Ressource angefordert wurde. Dieses ist der Spalte Initiator in der Tabelle „Anfragen“ zugeordnet.

Abbildung 9. Initiator-Spalte

Sie können auch die Umschalttaste gedrückt halten und den Mauszeiger auf eine Anfrage bewegen, um den Initiator und Abhängigkeiten.

Abbildung 10. Initiatoren und Abhängigkeiten ansehen

Im Feld _priority ist die Prioritätsstufe angegeben, die der Browser der Ressource zugewiesen hat. Dies entspricht in der Tabelle „Anfragen“ in der Spalte Priorität, die standardmäßig ausgeblendet ist.

Abbildung 11. Spalte „Priorität“

Klicken Sie mit der rechten Maustaste auf die Überschrift der Tabelle „Anfragen“ und wählen Sie Priorität aus, um den Bereich Priorität aufzurufen. Spalte.

Abbildung 12. So blenden Sie die Spalte Priorität ein:

Über das Hauptmenü auf das Befehlsmenü zugreifen

Über das Befehlsmenü kannst du schnell auf Bereiche, Tabs und Funktionen der Entwicklertools zugreifen.

Abbildung 13. Das Befehlsmenü

Sie können das Befehlsmenü jetzt vom Hauptmenü aus öffnen. Klicke auf das Hauptmenü. und wählen Sie Befehl ausführen aus.

Abbildung 14. Öffnen des Befehlsmenüs über das Hauptmenü

Haltepunkte für Bild-im-Bild-Modus

Bild im Bild ist eine neue experimentelle API, mit der auf einer Seite ein Floating-Video erstellt werden kann. Fenster über dem Desktop.

Aktivieren Sie die Kästchen enterpictureinpicture, leavepictureinpicture und resize im Bereich Ereignis Bereich „Listener Breakpoints“, der pausiert wird, wenn eines dieser Bild-im-Bild-Ereignisse ausgelöst wird. Die Entwicklertools pausiert in der ersten Zeile des Handlers.

Abbildung 16. Bild-im-Bild-Ereignisse im Bereich „Ereignis-Listener-Haltepunkte“

Bonustipp: Führen Sie „monitorEvents()“ in der Console aus, um zu beobachten, wie die Ereignisse eines Elements ausgelöst werden.

Angenommen, Sie möchten eine Schaltfläche rot umranden, nachdem Sie sie hervorgehoben und R, E, D, aber Sie wissen nicht, welchen Ereignissen Sie Listener hinzufügen sollen. Verwenden Sie monitorEvents(), um alle an die Console gesendet.

1. Rufen Sie einen Verweis auf den Knoten ab.

   

   Abbildung 17. Mit Als globale Variable speichern einen Verweis auf den Knoten abrufen

2. Übergeben Sie den Knoten als erstes Argument an monitorEvents().

   

   Abbildung 18. Knoten an monitorEvents() übergeben

3. Interagieren Sie mit dem Knoten. Die Entwicklertools protokolliert alle Ereignisse des Knotens in der Console.

   

   Abbildung 19. Ereignisse des Knotens in der Console

Rufen Sie unmonitorEvents() auf, um das Logging von Ereignissen in der Console zu beenden.

unmonitorEvents(temp1);

Übergeben Sie ein Array als zweites Argument an monitorEvents(), wenn Sie nur bestimmte Ereignisse überwachen möchten oder Ereignistypen:

monitorEvents(temp1, ['mouse', 'focus']);

Mit dem Typ mouse werden in den Entwicklertools alle Mausereignisse protokolliert, z. B. mousedown und click. Weitere unterstützte Typen sind key, touch und control.

Unter Befehlszeilenreferenz finden Sie weitere praktische Funktionen, die Sie über die Konsole aufrufen können.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools