Neuerungen in den Entwicklertools (Chrome 67)

Zu den neuen Funktionen und wichtigen Änderungen für die 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 den Textkörper aller Netzwerkanfragen für die von Ihnen angegebene Abfrage.

Suche nach dem Text „cache-control“ im neuen Bereich für die Netzwerksuche

Abbildung 1. Text "cache-control" wird im neuen Bereich für die Netzwerksuche gesucht.

Klicken Sie auf Groß-/Kleinschreibung beachten Groß-/Kleinschreibung beachten, damit bei der Abfrage zwischen Groß- und Kleinschreibung unterschieden wird. Klicken Sie auf Regulären Ausdruck verwenden Regulären Ausdruck verwenden, um alle Ergebnisse aufzurufen, die dem angegebenen Muster entsprechen. Sie müssen den RegEx nicht in Schrägstriche setzen.

Eine Abfrage mit einem regulären Ausdruck im Bereich „Network Search“.

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

Die Benutzeroberfläche des Bereichs Globale Suche entspricht jetzt der Benutzeroberfläche des neuen Bereichs Netzwerksuche. Die Ergebnisse sind nun auch 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 auf der rechten Seite

Drücken Sie Befehlstaste + Wahltaste + F (Mac) oder Strg + Umschalttaste + F (Windows, Linux, ChromeOS), um die globale Suche zu öffnen. Sie kann auch über das Cmd-Menü geöffnet werden.

Vorschau der CSS-Variablenwerte im Bereich Styles

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 in CSS-Variablen.

Abbildung 4. In der alten Benutzeroberfläche auf der linken Seite wird neben color: var(--main-color) keine Farbvorschau angezeigt. In der neuen Benutzeroberfläche auf der rechten Seite befindet sich

Als Abruf kopieren

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

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

Abbildung 5. 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"
});

Neuerungen im Bereich „Audits“

Neue Prüfungen

Der Bereich Audits enthält zwei neue Audits, darunter:

Neue Konfigurationsoptionen

Sie können den Bereich Audits jetzt für folgende Zwecke konfigurieren:

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

Neue Konfigurationsoptionen für Audits.

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

Traces ansehen

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

Die Schaltfläche View Trace.

Abbildung 7. Die Schaltfläche Trace ansehen

Endlosschleifen stoppen

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

  1. Öffnen Sie den Bereich Quellen.
  2. Klicken Sie auf Pausieren Pausieren. Die Schaltfläche ändert sich zu Skriptausführung fortsetzen Fortsetzen.
  3. Halten Sie Skriptausführung fortsetzen Fortsetzen gedrückt und wählen Sie dann Aktuellen JavaScript-Aufruf stoppen 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 aufhört. Das Intervall wird fortgesetzt, weil es bei Auswahl von Stop Current JavaScript Call Aufnahme beenden nicht ausgeführt wurde.

Nutzertiming auf den Tabs „Leistung“

Wenn Sie sich eine Leistungsaufzeichnung ansehen, können Sie auf den Bereich Nutzertiming klicken, um auf den Tabs Zusammenfassung, Bottom-up, Aufrufstruktur und Ereignisprotokoll die Messwerte für das Nutzertiming zu sehen.

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

Abbildung 8. Die Messungen des Nutzertimings werden auf dem Tab Bottom-up angezeigt. Der blaue Balken links neben dem Abschnitt Nutzertiming zeigt an, dass dieser ausgewählt ist.

Im Allgemeinen können Sie jetzt einen beliebigen Bereich (Hauptthread, Nutzertiming, GPU, ScriptStreamer usw.) auswählen und die Aktivität dieses Bereichs auf den Tabs ansehen.

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

Im Bereich Arbeitsspeicher werden jetzt alle mit einer Seite verknüpften JavaScript-VM-Instanzen übersichtlich aufgelistet, anstatt sie wie zuvor hinter dem Drop-down-Menü Ziel zu verbergen.

Screenshots des Bereichs „Memory“ (Vorher-Nachher-Vergleich)

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

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 Betriebssystemarbeitsspeicher, 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 „Network“ wurde in „Seite“ umbenannt

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

Zwei Entwicklertools-Fenster nebeneinander, in denen die Namensänderung zu sehen ist.

Abbildung 10. In der alten Benutzeroberfläche auf der linken Seite heißt der Tab mit den Ressourcen der Seite Netzwerk, in der neuen Benutzeroberfläche rechts Seite.

Updates zum dunklen Design

Chrome 67 wird mit einer Reihe kleiner Änderungen am Farbschema des dunklen Designs ausgeliefert. Beispielsweise sind die Symbole für die Haltepunkte und die aktuelle Ausführungszeile jetzt grün.

Screenshot des neuen Haltepunktsymbols und des aktuellen Farbschemas für die Ausführung

Abbildung 11. Screenshot mit dem neuen Haltepunktsymbol und dem Farbschema der aktuellen Ausführungszeile

Zertifikatstransparenz im Bereich „Sicherheit“

Im Bereich Sicherheit werden jetzt Informationen zur Zertifikatstransparenz angezeigt.

Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“.

Abbildung 12. Informationen zur Transparenz der Zertifizierung im Bereich „Sicherheit“

Website-Isolierung im Bereich „Leistung“

Wenn die Website-Isolierung aktiviert ist, enthält der Bereich Leistung jetzt ein Flame-Diagramm für jeden Prozess, sodass Sie die Gesamtarbeit sehen können, die jeder Prozess verursacht.

Flame-Diagramme pro Prozess in einer Leistungsaufzeichnung.

Abbildung 13. Flame-Diagramme pro Prozess in einer Leistungsaufzeichnung

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