Neuerungen in den Entwicklertools (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub

Zu den neuen Funktionen und wichtigen Änderungen, die in Chrome 71 in den Chrome-Entwicklertools eingeführt werden, gehören:

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Seite an:

DOM-Knoten durch Bewegen des Mauszeigers auf einen Live-Ausdruck hervorheben

Wenn eine Live-Expression zu einem DOM-Knoten ausgewertet wird, bewegen Sie den Mauszeiger auf das Ergebnis der Live-Expression, um diesen Knoten im Viewport hervorzuheben.

Wenn Sie den Mauszeiger auf ein Ergebnis von „Live Expression“ bewegen, wird der Knoten im Ansichtsfenster hervorgehoben.

Abbildung 1. Wenn Sie den Mauszeiger auf ein Ergebnis von Live-Ausdrücken bewegen, wird der Knoten im Ansichtsfenster hervorgehoben.

DOM-Knoten als globale Variablen speichern

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

Als globale Variable in der Console speichern.

Abbildung 2. Als globale Variable in der Konsole speichern

Alternativ können Sie auch mit der rechten Maustaste auf den Knoten im DOM-Baum 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 zu Initiator und Priorität jetzt in HAR-Importen und -Exporten

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

Netzwerkanfragen in eine HAR-Datei exportieren

Abbildung 8. Netzwerkanfragen in eine HAR-Datei exportieren

Wenn Sie die Datei wieder in den Bereich „Netzwerk“ importieren möchten, ziehen Sie sie einfach per Drag-and-drop dorthin.

Wenn Sie eine HAR-Datei exportieren, enthalten die Entwicklertools jetzt Initiator- und Prioritätsinformationen in der HAR-Datei. Wenn Sie HAR-Dateien wieder in die Entwicklertools importieren, werden die Spalten Initiator und Priorität jetzt ausgefüllt.

Das Feld _initiator enthält 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 der Anfrage aufzurufen.

Initiatoren und Abhängigkeiten ansehen

Abbildung 10. Initiatoren und Abhängigkeiten ansehen

Im Feld _priority wird angegeben, welche Prioritätsstufe der Browser der Ressource zugewiesen hat. Dies entspricht der Spalte Priorität in der Tabelle „Anfragen“, 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 anzuzeigen.

So wird die Spalte „Priorität“ angezeigt.

Abbildung 12. So wird die Spalte Priorität angezeigt

Befehlsmenü über das Hauptmenü aufrufen

Über das Befehlsmenü können Sie schnell auf DevTools-Bereiche, ‑Tabs und ‑Funktionen zugreifen.

Das Befehlsmenü.

Abbildung 13. Das Befehlsmenü

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

Befehlsmenü über das Hauptmenü öffnen

Abbildung 14. Befehlsmenü über das Hauptmenü öffnen

Haltepunkte für „Bild im Bild“

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

Aktivieren Sie die Kästchen enterpictureinpicture, leavepictureinpicture und resize im Bereich Event-Listener-Haltepunkte, um die Ausführung zu unterbrechen, wenn eines dieser Bild-im-Bild-Ereignisse ausgelöst wird. DevTools hält an der ersten Zeile des Handlers an.

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

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

(Bonustipp) Mit monitorEvents() in der Console können Sie beobachten, wie Ereignisse für ein Element ausgelöst werden.

Angenommen, Sie möchten einem Button nach dem Fokussieren und Drücken von R, E, D einen roten Rahmen hinzufügen, wissen aber nicht, für welche Ereignisse 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.

    „Als globale Variable speichern“ verwenden, um einen Verweis auf den Knoten zu erhalten.

    Abbildung 17. Als globale Variable speichern verwenden, um einen Verweis auf den Knoten zu erhalten

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

    Übergeben des Knotens an monitorEvents().

    Abbildung 18. Knoten an monitorEvents() übergeben

  3. Mit dem Knoten interagieren 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 Konsole zu beenden.

unmonitorEvents(temp1);

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

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 Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.