Neuerungen in den Entwicklertools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

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

Videoversion der Versionshinweise:

Öffnen Sie den Bereich Network (Netzwerk) und drücken Sie dann Befehlstaste + F (Mac) oder Strg + F (Windows, Linux, ChromeOS), um den neuen Bereich Network Search (Netzwerksuche) zu öffnen. DevTools durchsucht die Header und Bodys aller Netzwerkanfragen nach der von Ihnen angegebenen Anfrage.

Im neuen Bereich „Netzwerksuche“ wird nach dem Text „cache-control“ gesucht.

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

Klicken Sie auf Groß-/Kleinschreibung beachten Groß-/Kleinschreibung beachten, um die Groß-/Kleinschreibung in Ihrer Anfrage zu berücksichtigen. Klicken Sie auf Regulären Ausdruck verwenden Regulären Ausdruck verwenden, um alle Ergebnisse anzuzeigen, die dem von Ihnen angegebenen Muster entsprechen. Sie müssen Ihren regulären Ausdruck nicht in Schrägstriche einschließen.

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 übersichtlich formatiert, um das Lesen zu erleichtern.

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 es auch über das Befehlsmenü öffnen.

Vorschau von CSS-Variablenwerten im Bereich Styles

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

Beispiel für CSS-Variablenfarbwerte

Abbildung 4. In der alten Benutzeroberfläche links ist neben color: var(--main-color) keine Farbvorschau zu sehen, in der neuen Benutzeroberfläche rechts schon.

Als Fetch kopieren

Klicken Sie mit der rechten Maustaste auf eine Netzwerkanfrage und wählen Sie Kopieren > Als Fetch 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

DevTools generiert 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 Bereichs „Prüfungen“

Neue Audits

Der Bereich Audits enthält zwei neue Audits:

Neue Konfigurationsoptionen

Sie können den Bereich Prüfungen jetzt so konfigurieren, dass:

  • Desktop-Viewport- und User-Agent-Einstellungen beibehalten Sie können also verhindern, dass im Bereich Audits ein Mobilgerät simuliert wird.
  • Deaktivieren Sie die Netzwerk- und CPU-Drosselung.
  • Speicher wie LocalStorage und IndexedDB bei Prüfungen beibehalten.

Neue Optionen für die Prüfungskonfiguration

Abbildung 6. Neue Optionen für die Prüfungskonfiguration

Traces ansehen

Klicken Sie nach der Überprüfung einer Seite auf Trace ansehen, um die Daten zur Ladeleistung, auf denen die Überprüfung basiert, im Bereich Leistung anzusehen.

Die Schaltfläche „Trace ansehen“

Abbildung 7. Die Schaltfläche Trace ansehen

Endlosschleifen beenden

Wenn Sie häufig mit for-Schleifen, do...while-Schleifen oder Rekursion arbeiten, haben Sie beim Entwickeln Ihrer Website wahrscheinlich schon einmal versehentlich eine Endlosschleife ausgeführt. So können Sie die Endlosschleife beenden:

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

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

Nutzertiming auf den Leistungstabs

Klicken Sie beim Ansehen einer Leistungsaufzeichnung auf den Bereich User Timing, um User Timing-Messwerte auf den Tabs Zusammenfassung, Bottom-up, Aufrufbaum und Ereignisprotokoll anzusehen.

Messwerte für das Nutzertiming auf dem Tab „Bottom-up“ ansehen

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

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

JavaScript-VM-Instanzen im Bereich „Speicher“ auswählen

Im Bereich Arbeitsspeicher werden jetzt alle JavaScript-VM-Instanzen, die mit einer Seite verknüpft sind, deutlich aufgeführt. Bisher waren sie im Drop-down-Menü Ziel verborgen.

Vorher- und Nachher-Screenshots des Bereichs „Speicher“.

Abbildung 9. In der alten Benutzeroberfläche links sind die JavaScript-VM-Instanzen im Drop-down-Menü Ziel verborgen, während sie in der neuen Benutzeroberfläche rechts in der Tabelle JavaScript-VM-Instanz auswählen angezeigt werden.

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

Tab „Netzwerk“ in „Seite“ umbenannt

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

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

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

Aktualisierungen des dunklen Designs

In Chrome 67 gibt es einige kleinere Änderungen am Farbschema des dunklen Designs. Beispielsweise sind die Haltepunktsymbole und die aktuelle Ausführungszeile jetzt grün.

Ein Screenshot des neuen Haltepunktsymbols und des Farbschemas für die aktuelle Ausführungszeile.

Abbildung 11. Ein Screenshot des neuen Haltepunktsymbols und des aktuellen Farbschemas für die Ausführungszeile

Certificate Transparency im Bereich „Sicherheit“

Im Bereich Sicherheit werden jetzt Informationen zur Zertifikatstransparenz angezeigt.

Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“

Abbildung 12. Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“

Website-Isolierung im Bereich „Leistung“

Wenn Sie die Website-Isolierung aktiviert haben, enthält der Bereich Leistung jetzt ein Flammen-Diagramm für jeden Prozess. So können Sie sehen, wie viel Arbeit durch jeden Prozess verursacht wird.

Flame-Charts für einzelne Prozesse in einer Leistungsaufzeichnung.

Abbildung 13. Flammengrafiken für einzelne Prozesse in einer Leistungsaufzeichnung

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.