Neuerungen in den Entwicklertools (Chrome 71)

Kayce Basques

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

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 diesen Knoten im Darstellungsbereich hervorzuheben.

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

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 Console einen Ausdruck aus, der einen Knoten auswertet. Klicken Sie dann mit der rechten Maustaste auf das Ergebnis und wählen Sie Als globale Variable speichern aus.

Speichern Sie sie als globale Variable in der Console.

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

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

Wenn Sie Netzwerkprotokolle mit Kollegen diagnostizieren 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 "Network" zu importieren, verschieben Sie sie einfach per Drag-and-drop.

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 Entwicklertools importieren, enthalten die Spalten Initiator und Priority einen Wert.

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

Initiatorspalte.

Abbildung 9. In der 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 ist die Prioritätsstufe angegeben, die 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 Überschrift 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ü kannst du schnell auf Bereiche, Tabs und Funktionen der Entwicklertools zugreifen.

Das Befehlsmenü.

Abbildung 13. Das Befehlsmenü

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

Öffnen des Befehlsmenüs im Hauptmenü.

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 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, um anzuhalten, wenn eines dieser Bild-im-Bild-Ereignisse ausgelöst wird. Die Entwicklertools pausiert in der ersten Zeile des Handlers.

Bild-im-Bild-Ereignisse im Bereich Event-Listener-Breakpoints.

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 mit einem roten Rahmen versehen, nachdem Sie sie hervorgehoben und R, E oder D gedrückt haben. Sie wissen aber nicht, welchen Ereignissen Sie Listener hinzufügen sollten. Verwenden Sie monitorEvents(), um alle Ereignisse des Elements in der Console zu protokollieren.

  1. Rufen Sie einen Verweis auf den Knoten ab.

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

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

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

    Knoten an monitorEvents() übergeben.

    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 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 oder Ereignistypen überwachen möchten:

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 erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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