Neuerungen in den Entwicklertools (Chrome 67)

Kayce Basques

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

Videoversion der Versionshinweise:

Öffnen Sie den Bereich Netzwerk und drücken Sie dann Befehlstaste + F (Mac) oder Strg + F (Windows, Linux, ChromeOS), um den neuen Bereich Netzwerksuche zu öffnen. In den Entwicklertools wird in den Headern und Bodys aller Netzwerkanfragen nach der von Ihnen angegebenen Abfrage gesucht.

Im neuen Bereich „Netzwerksuche“ nach dem Text „cache-control“ suchen

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

Klicken Sie auf Groß- und Kleinschreibung berücksichtigen Groß-/Kleinschreibung beachten, damit die Groß- und Kleinschreibung bei der Abfrage berücksichtigt wird. Klicken Sie auf Regulären Ausdruck verwenden Regulären Ausdruck verwenden, um alle Ergebnisse anzuzeigen, die mit dem von Ihnen angegebenen Muster übereinstimmen. Sie müssen das reguläre Ausdrucksmuster nicht in Schrägstriche einschließen.

Eine reguläre Ausdrucksanfrage im Bereich „Netzwerksuche“.

Abbildung 2. Eine reguläre Ausdrucksanfrage 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 in einer lesbaren Formatierung dargestellt, um die Lesbarkeit zu verbessern.

Die alte und die neue Benutzeroberfläche

Abbildung 3. Die alte Benutzeroberfläche links und die neue 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 den DevTools jetzt eine Vorschau dieser Farbe angezeigt.

Beispiel für CSS-Variablen mit Farbwerten

Abbildung 4. In der alten Benutzeroberfläche auf der linken Seite gibt es neben color: var(--main-color) keine Farbvorschau. In der neuen Benutzeroberfläche auf der rechten Seite ist das der Fall.

Als Fetch kopieren

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

Kopieren Sie den Code für eine Anfrage, der dem fetch()-Code entspricht.

Abbildung 5. fetch()-Äquivalentcode für eine Anfrage kopieren

In DevTools wird Code wie der folgende generiert:

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 „Audits“

Neue Audits

Im Bereich Audits gibt es zwei neue Audits:

Neue Konfigurationsoptionen

Im Bereich Audits können Sie jetzt Folgendes konfigurieren:

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

Neue Konfigurationsoptionen für die Prüfung

Abbildung 6. Neue Konfigurationsoptionen für die Prüfung

Traces ansehen

Klicken Sie nach der Analyse einer Seite auf Trace ansehen, um die Daten zur Ladeleistung im Bereich Leistung aufzurufen, auf denen Ihre Analyse basiert.

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 bei der Entwicklung Ihrer Website wahrscheinlich versehentlich eine Endlosschleife ausgeführt. So können Sie den endlosen Loop beenden:

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

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

Nutzertiming auf den Leistungs-Tabs

Klicken Sie bei einer Leistungsaufzeichnung auf den Bereich Nutzerzeit, um Messwerte für die Nutzerzeit auf den Tabs Zusammenfassung, Bottom-Up, Aufrufabfolge und Ereignisprotokoll aufzurufen.

Auf dem Tab „Bottom-Up“ können Sie sich Messwerte für das Nutzertiming ansehen.

Abbildung 8. Auf dem Tab Bottom-Up können Sie Messwerte zu Nutzerzeiträumen aufrufen. Der blaue Balken links neben dem Bereich Nutzerzeit zeigt an, dass er ausgewählt ist.

Sie können jetzt jeden Bereich auswählen (Hauptthread, Nutzerzeit, GPU, ScriptStreamer usw.) und sich die Aktivitäten dieses Bereichs auf den Tabs ansehen.

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

Im Bereich Speicher werden jetzt alle JavaScript-VM-Instanzen aufgelistet, die mit einer Seite verknüpft sind, anstatt sie wie bisher im Drop-down-Menü Ziel zu verstecken.

Screenshots des Speicherbereichs vor und nach der Änderung

Abbildung 9. In der alten Benutzeroberfläche links sind die JavaScript-VM-Instanzen hinter dem Drop-down-Menü Ziel ausgeblendet, 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 sind zwei Werte zu sehen: 8.7 MB und 13.3 MB. Der linke Wert entspricht dem Speicher, der aufgrund von JavaScript zugewiesen wurde. Der rechte 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 Chrome-Task-Manager entspricht der linke Wert JavaScript Memory und der rechte Wert Memory Footprint.

Der Tab „Netzwerk“ wurde 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.

Updates für dunkles Design

Chrome 67 enthält einige kleinere Änderungen am Farbschema des dunklen Designs. So sind beispielsweise die Symbole für Haltestellen und die aktuelle Ausführungszeile jetzt grün.

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

Abbildung 11. Screenshot des neuen Symbols für Haltepunkte und des Farbschemas für die aktuelle 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 die Website-Isolierung aktiviert ist, wird im Bereich Leistung jetzt für jeden Prozess ein Flammendiagramm angezeigt, aus dem Sie die Gesamtarbeit ableiten können, die von jedem Prozess verursacht wird.

Flame-Diagramme pro Prozess in einer Leistungsaufzeichnung

Abbildung 13. Flammendiagramme pro Prozess in einer Leistungsaufzeichnung

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.