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 Liveausdruck einen DOM-Knoten ergibt, bewegen Sie den Mauszeiger auf das Ergebnis des Liveausdrucks, um diesen Knoten im Darstellungsbereich hervorzuheben.

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

Abbildung 1. Bewegen des Mauszeigers auf ein Ergebnis des Live-Ausdrucks, um den Knoten im Darstellungsbereich hervorzuheben

DOM-Knoten als globale Variablen speichern

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

Als globale Variable in der Console speichern.

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.

Als globale Variable im DOM-Baum speichern.

Abbildung 3. Als globale Variable im DOM-Baum speichern

Informationen zum Initiator und zur Priorität jetzt in HAR-Importen und -Exporten

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

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

Wenn Sie eine HAR-Datei exportieren, fügen die Entwicklertools jetzt Informationen zum Initiator und zur Priorität in die HAR-Datei ein. Wenn Sie HAR-Dateien wieder in die Entwicklertools importieren, werden die Spalten Initiator (Initiator) und Priority (Priorität) jetzt ausgefüllt.

Das Feld _initiator bietet weiteren Kontext zum Grund für die Anfrage der Ressource. 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 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 „Priority“ (Priorität).

Abbildung 11. Die Spalte „Priority“ (Priorität)

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

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

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

Über das Hauptmenü auf das Befehlsmenü zugreifen

Über das Befehlsmenü können Sie schnell auf die Bereiche, Tabs und Funktionen der Entwicklertools zugreifen.

Das Befehlsmenü.

Abbildung 13. Das Befehlsmenü

Du kannst das Befehlsmenü jetzt im Hauptmenü öffnen. Klicken Sie auf die Schaltfläche Hauptmenü main und wählen Sie Befehl ausführen aus.

Das Befehlsmenü im Hauptmenü öffnen.

Abbildung 14. Befehlsmenü im Hauptmenü öffnen

Haltepunkte für Bild im Bild

Bild im Bild ist eine neue experimentelle API, mit der eine Seite ein unverankertes Videofenster über dem Desktop erstellen kann.

Klicken Sie im Bereich Ereignis-Listener-Haltepunkte die Kästchen enterpictureinpicture, leavepictureinpicture und resize an. Wenn eines dieser Bild-im-Bild-Ereignisse ausgelöst wird, wird es pausiert. Die Entwicklertools pausieren in der ersten Zeile des Handlers.

Bild-im-Bild-Ereignisse im Bereich „Haltepunkte“ des Event-Listeners.

Abbildung 16: Bild-im-Bild-Ereignisse im Bereich „Haltepunkte“ des Event-Listeners

Tipp: 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 mit einem roten Rahmen versehen, nachdem Sie sie hervorgehoben und R, E, D gedrückt haben. Sie wissen aber nicht, welchen Ereignissen Sie Listener hinzufügen möchten. Mit monitorEvents() können Sie alle Ereignisse des Elements in der Console protokollieren.

  1. Rufen Sie einen Verweis auf den Knoten ab.

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

    Abbildung 17: Als globale Variable speichern verwenden, um einen Verweis auf den Knoten abzurufen

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

    Übergabe des Knotens an „monitorEvents()“.

    Abbildung 18: Knoten an monitorEvents() übergeben

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

    Die Ereignisse des Knotens in der Console.

    Abbildung 19: Ereignisse des Knotens in der Console

Rufen Sie unmonitorEvents() auf, um die Protokollierung von Ereignissen in der Console 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']);

Mit dem Typ mouse werden die Entwicklertools angewiesen, alle Mausereignisse wie mousedown und click zu protokollieren. Weitere unterstützte Typen sind key, touch und control.

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

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59