Neuerungen in den Entwicklertools (Chrome 67)

Kayce Basques

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

• In allen Netzwerkheadern suchen
• Vorschau des CSS-Variablenwerts im Bereich Styles
• Als Fetch kopieren
• Neue Prüfungen, Konfigurationsoptionen für Computer und Aufrufspuren
• Endlosschleifen beenden
• Nutzertimings auf den Tabs Leistung
• JavaScript-VM-Instanzen werden im Bereich Speicher klar aufgeführt.
• Der Tab Netzwerk im Bereich Quellen wurde in Seite umbenannt.
• Aktualisierungen für das dunkle Design
• Informationen zur Zertifikatstransparenz im Bereich Sicherheit
• Funktionen zur Website-Isolierung im Bereich Leistung

Videoversion der Versionshinweise:

In allen Netzwerkheadern und ‑antworten suchen

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

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

Klicken Sie auf Groß- und Kleinschreibung berücksichtigen , damit die Groß- und Kleinschreibung bei der Abfrage berücksichtigt wird. Klicken Sie auf 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.

Abbildung 2. Eine reguläre Ausdrucksanfrage im Bereich „Netzwerksuche“.

Änderungen an der Benutzeroberfläche des Suchfelds

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.

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.

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.

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:

• Wichtige Anfragen vorab laden Durch Vorabladeanfragen kann die Seitenladezeit beschleunigt werden, da der Browser Hinweise erhält, um Ressourcen, die für Ihren kritischen Rendering-Pfad wichtig sind, so schnell wie möglich herunterzuladen.
• Vermeiden Sie unsichtbaren Text, während Webfonts geladen werden. Wenn Text während des Ladens von Webfonts sichtbar ist, ist die Seite schneller für Nutzer nützlicher.

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.

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.

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 . Die Schaltfläche ändert sich zu Scriptausführung fortsetzen .
3. Halten Sie die Option Skriptausführung fortsetzen gedrückt und wählen Sie dann Aktuellen JavaScript-Aufruf 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 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.

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.

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.

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.

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.

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.

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf more_vert Weitere Optionen > Hilfe > Entwicklertools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlasse Kommentare zu den neuen YouTube-Videos zu den Entwicklertools oder zu den YouTube-Videos mit den Entwicklertools-Tipps.

Neu in DevTools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools