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. 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 Ihren regulären Ausdruck nicht in Schrägstriche setzen.

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 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 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

Sie können den Bereich Audits jetzt so konfigurieren, dass:

  • 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.
  • 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 anzuzeigen, auf denen Ihr Audit 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. 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 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, weil es nicht ausgeführt wurde, als Aktuellen JavaScript-Aufruf stoppen Beenden ausgewählt wurde.

Nutzertiming auf den Leistungs-Tabs

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

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 der Bereiche auswählen (Hauptthread, Nutzerzeit, GPU, ScriptStreamer usw.) und sich 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 Speicherbereichs vor und nach der Änderung

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 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 Task-Manager von Chrome 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 den Tab 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

Für Chrome 67 wurden einige kleinere Änderungen am Farbschema des dunklen Designs vorgenommen. 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 jeder Prozess verursacht.

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 Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools