Neuerungen in den Entwicklertools (Chrome 71)

Kayce Basques

Zu den neuen Funktionen und wichtigen Änderungen in den Chrome-Entwicklertools in Chrome 71 gehören:

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 zu einem DOM-Knoten führt, bewegen Sie den Mauszeiger auf das Ergebnis des Live-Ausdrucks, um diesen Knoten im Viewport hervorzuheben.

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

Abbildung 1. Den Mauszeiger auf ein Ergebnis eines Live-Expressions bewegen, um den Knoten im Viewport hervorzuheben

DOM-Knoten als globale Variablen speichern

Wenn Sie einen DOM-Knoten als globale Variable speichern möchten, führen Sie in der Konsole einen Ausdruck aus, der zu einem Knoten führt, klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie Als globale Variable speichern aus.

Speichern Sie sie als globale Variable in der Konsole.

Abbildung 2. Als globale Variable in der Konsole speichern

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

Als globale Variable im DOM-Baum speichern.

Abbildung 3. Als globale Variable im DOM-Baum speichern

Informationen zum Initiator und zur Priorität sind jetzt in HAR-Importen und ‑Exporten verfügbar

Wenn Sie Netzwerkprotokolle gemeinsam mit Kollegen analysieren möchten, können Sie die Netzwerkanfragen in eine HAR-Datei exportieren.

Netzwerkanfragen werden in eine HAR-Datei exportiert.

Abbildung 8. Netzwerkanfragen in eine HAR-Datei exportieren

Sie können die Datei per Drag-and-drop wieder in den Bereich „Netzwerk“ importieren.

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

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

Die Spalte „Initiator“.

Abbildung 9. Spalte „Initiator“

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

Initiatoren und Abhängigkeiten ansehen

Abbildung 10. Initiatoren und Abhängigkeiten ansehen

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

Die Spalte „Priorität“.

Abbildung 11. Spalte „Priorität“

Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle „Anfragen“ und wählen Sie Priorität aus, um die Spalte Priorität einzublenden.

So blenden Sie die Spalte „Priorität“ ein:

Abbildung 12. Spalte Priorität anzeigen

Über das Hauptmenü auf das Befehlsmenü zugreifen

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

Das Menü „Befehle“.

Abbildung 13. Das Befehlsmenü

Sie können das Befehlsmenü jetzt über das Hauptmenü öffnen. Klicken Sie auf die Schaltfläche Hauptmenü main und wählen Sie Befehl ausführen aus.

Öffnen Sie das Befehlsmenü über das Hauptmenü.

Abbildung 14. Das Menü „Befehle“ über das Hauptmenü öffnen

Bild-im-Bild-Haltepunkte

Picture-in-Picture ist eine neue experimentelle API, mit der auf einer Seite ein schwebendes Videofenster auf dem Computer erstellt werden kann.

Aktivieren Sie die Kästchen enterpictureinpicture, leavepictureinpicture und resize im Bereich Event-Listener-Haltepunkte, um die Wiedergabe zu pausieren, wenn eines dieser Bild-im-Bild-Ereignisse ausgelöst wird. In den DevTools wird an der ersten Zeile des Handlers angehalten.

„Bild im Bild“-Ereignisse im Bereich „Event-Listener-Haltepunkte“

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

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

Angenommen, Sie möchten einer Schaltfläche einen roten Rahmen hinzufügen, nachdem Sie den Fokus darauf gelegt und R, E und D gedrückt haben. Sie wissen aber nicht, welchen Ereignissen Sie Listener hinzufügen müssen. Verwenden Sie monitorEvents(), um alle Ereignisse des Elements in der Console zu protokollieren.

  1. Rufen Sie einen Verweis auf den Knoten ab.

    Mit „Als globale Variable speichern“ einen Verweis auf den Knoten abrufen.

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

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

    Den Knoten an monitorEvents() übergeben.

    Abbildung 18. Knoten an monitorEvents() übergeben

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

    Die Ereignisse des Knotens in der Console.

    Abbildung 19 Die Ereignisse des Knotens in der Console

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

unmonitorEvents(temp1);

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

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

Der Typ mouse weist DevTools an, alle mausbezogenen Ereignisse wie mousedown und click zu protokollieren. 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

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.