Neuerungen in den Entwicklertools (Chrome 67)

Kayce Basques

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

Videoversion der Versionshinweise:

Öffnen Sie den Bereich Netzwerk und drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux, ChromeOS), um den neuen Bereich Netzwerksuche zu öffnen. Die Entwicklertools durchsuchen die Header und Textkörper aller Netzwerkanfragen nach der von Ihnen angegebenen Abfrage.

Suchen Sie im neuen Bereich „Netzwerksuche“ nach dem Text „cache-control“.

Abbildung 1. Mit dem neuen Bereich „Netzwerksuche“ nach dem Text „cache-control“ suchen

Klicken Sie auf Groß-/Kleinschreibung beachten Groß-/Kleinschreibung beachten, damit bei der Abfrage die Groß-/Kleinschreibung berücksichtigt wird. Klicken Sie auf Regulären Ausdruck verwenden Regulären Ausdruck verwenden, um alle Ergebnisse aufzurufen, die dem von Ihnen angegebenen Muster entsprechen. Sie müssen Ihren regulären Ausdruck nicht in Schrägstriche setzen.

Eine Abfrage mit einem regulären Ausdruck im Bereich „Netzwerksuche“

Abbildung 2. Eine Abfrage mit einem regulären Ausdruck im Bereich „Netzwerksuche“

Die Benutzeroberfläche des Bereichs Globale Suche entspricht jetzt der Benutzeroberfläche des neuen Bereichs Netzwerksuche. Außerdem werden die Ergebnisse jetzt optimiert, um die Lesbarkeit zu verbessern.

Die alte und die neue Benutzeroberfläche.

Abbildung 3. Die alte Benutzeroberfläche links und die neue Benutzeroberfläche rechts

Drücken Sie Befehlstaste + Wahltaste + F (Mac) oder Strg + Umschalttaste + F (Windows, Linux, ChromeOS), um die globale Suche zu öffnen. Sie können sie auch über das Befehlsmenü öffnen.

Vorschau für CSS-Variablenwerte im Bereich Stile

Wenn der Wert einer CSS-Farbeigenschaft wie background-color oder color auf eine CSS-Variable festgelegt ist, wird in den Entwicklertools jetzt eine Vorschau dieser Farbe angezeigt.

Beispiel für Farbwerte von CSS-Variablen

Abbildung 4. In der alten UI auf der linken Seite gibt es keine Farbvorschau neben color: var(--main-color), während in der neuen UI auf der rechten Seite keine Farbvorschau angezeigt wird.

Als Abruf kopieren

Klicken Sie mit der rechten Maustaste auf eine Netzwerkanfrage und wählen Sie Kopieren > Als Abruf kopieren aus, um den fetch()-äquivalenten Code für diese Anfrage in die Zwischenablage zu kopieren.

Kopieren des äquivalenten "fetch()"-Codes für eine Anfrage.

Abbildung 5. Den fetch()-äquivalenten Code für eine Anfrage kopieren

Die Entwicklertools generieren Code wie den folgenden:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Aktualisierungen des Audit-Bereichs

Neue Prüfungen

Der Bereich Audits enthält zwei neue Prüfungen, darunter:

Neue Konfigurationsoptionen

Sie können den Bereich Audits jetzt so konfigurieren:

  • Behalten Sie die Einstellungen für den Desktop-Darstellungsbereich und den User-Agent bei. Mit anderen Worten: Sie können verhindern, dass der Bereich Audits ein Mobilgerät simuliert.
  • Netzwerk- und CPU-Drosselung deaktivieren
  • Behalten Sie Speicher wie LocalStorage und IndexedDB über Audits hinweg bei.

Neue Optionen für die Audit-Konfiguration.

Abbildung 6. Neue Optionen für die Audit-Konfiguration

Traces ansehen

Klicken Sie nach der Prüfung einer Seite auf Trace ansehen, um im Bereich Leistung die Lastleistungsdaten anzusehen, auf denen Ihr Audit basiert.

Die Schaltfläche "Trace anzeigen".

Abbildung 7. Die Schaltfläche Trace anzeigen

Endlosschleifen beenden

Wenn Sie häufig mit for-, do...while- oder Rekursionsschleifen arbeiten, haben Sie bei der Entwicklung Ihrer Website wahrscheinlich versehentlich eine Endlosschleife ausgeführt. Sie haben jetzt folgende Möglichkeiten, die Endlosschleife zu beenden:

  1. Öffnen Sie den Bereich Quellen.
  2. Klicken Sie auf Pausieren Pausieren. Die Schaltfläche ändert sich in Skriptausführung fortsetzen Fortsetzen.
  3. Halten Sie Skriptausführung fortsetzen Fortsetzen gedrückt und wählen Sie Aktuellen JavaScript-Aufruf beenden Aufnahme beenden aus.

Im Video oben wird die Uhr über einen setInterval()-Timer aktualisiert. Wenn Sie auf Endlosschleife starten klicken, wird eine do...while-Schleife ausgeführt, die nie beendet wird. Das Intervall wird fortgesetzt, weil es nicht ausgeführt wurde, als Aktuellen JavaScript-Aufruf stoppen Aufnahme beenden ausgewählt wurde.

Nutzertiming auf den Tabs "Leistung"

Klicken Sie in einer Leistungsaufzeichnung auf den Bereich Nutzertiming, um Messwerte für das Nutzertiming auf den Tabs Zusammenfassung, Bottom-up, Aufrufstruktur und Ereignisprotokoll anzusehen.

Anzeigen von Nutzertiming-Messungen auf dem Tab "Bottom-up"

Abbildung 8. Messwerte für das Nutzertiming auf dem Tab Bottom-up ansehen Der blaue Balken links neben dem Bereich Nutzertiming zeigt an, dass er ausgewählt ist.

Im Allgemeinen können Sie jetzt einen beliebigen Bereich auswählen (Main Thread, User Timing, GPU, ScriptStreamer usw.) und die Aktivitäten dieses Bereichs auf den Tabs ansehen.

Wählen Sie im Bereich „Arbeitsspeicher“ JavaScript-VM-Instanzen aus

Im Bereich Arbeitsspeicher werden jetzt alle JavaScript-VM-Instanzen aufgelistet, die einer Seite zugeordnet sind, anstatt sie wie zuvor hinter dem Drop-down-Menü Ziel auszublenden.

Screenshots des Bereichs „Arbeitsspeicher“ (Vorher und Nachher)

Abbildung 9. In der alten UI auf der linken Seite sind die JavaScript-VM-Instanzen hinter dem Drop-down-Menü Ziel verborgen, während sie in der neuen UI auf der rechten Seite in der Tabelle JavaScript-VM-Instanz auswählen angezeigt werden.

Neben der Instanz developers.google.com befinden sich zwei Werte: 8.7 MB und 13.3 MB. Der linke Wert steht für den aufgrund von JavaScript zugewiesenen Arbeitsspeicher. Der richtige Wert steht für den gesamten Arbeitsspeicher des Betriebssystems, der aufgrund dieser VM-Instanz zugewiesen wird. Der rechte Wert schließt den linken Wert ein. Im Task-Manager von Chrome entspricht der linke Wert JavaScript Memory und der rechte Wert Memory Footprint.

Tab "Netzwerk" wurde in Tab "Seite" umbenannt

Im Bereich Quellen heißt der Tab Netzwerk jetzt den Tab Seite.

Zwei DevTools-Fenster nebeneinander, die die Namensänderung zeigen.

Abbildung 10. In der alten Benutzeroberfläche auf der linken Seite heißt der Tab, auf dem die Ressourcen der Seite angezeigt werden, Network. In der neuen Benutzeroberfläche auf der rechten Seite heißt er Page.

Änderungen beim dunklen Design

Für Chrome 67 wurden einige kleinere Änderungen am Farbschema des dunklen Designs vorgenommen. Beispielsweise sind die Haltepunktsymbole und die aktuelle Ausführungszeile jetzt grün.

Screenshot mit dem neuen Haltepunktsymbol und dem Farbschema der aktuellen Ausführung

Abbildung 11. Screenshot des neuen Haltepunktsymbols und des Farbschemas der aktuellen Ausführung

Zertifikatstransparenz im Sicherheitsbereich

Im Bereich Sicherheit werden jetzt Informationen zur Transparenz von Zertifikaten angezeigt.

Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“

Abbildung 12. Informationen zur Transparenz der Zertifizierung im Sicherheitsbereich

Website-Isolierung im Bereich „Leistung“

Wenn Sie die Website-Isolierung aktiviert haben, wird im Bereich Leistung jetzt ein Flame-Diagramm für jeden Prozess angezeigt. So können Sie die Gesamtarbeit sehen, die jeder Prozess verursacht.

Prozessbasierte Flame-Diagramme in einer Leistungsaufzeichnung

Abbildung 13. Prozessbasierte Flame-Diagramme in einer Leistungsaufzeichnung

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