Neuerungen in den Entwicklertools (Chrome 67)

Kayce Basques

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

• In allen Netzwerkheadern suchen
• Vorschau von CSS-Variablenwerten im Bereich Stile
• Als Abruf kopieren
• Neue Prüfungen, Desktop-Konfigurationsoptionen und Traces ansehen
• Endlosschleifen verhindern
• Nutzertiming auf den Tabs Leistung
• JavaScript-VM-Instanzen, die im Steuerfeld Speicher übersichtlich aufgelistet sind
• Der Tab Netzwerk im Bereich Quellen wurde in Seite umbenannt.
• Updates für das dunkle Design
• Informationen zur Certificate Transparency 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 dann Befehlstaste + F (Mac) oder Strg + F (Windows, Linux, ChromeOS), um den neuen Bereich Netzwerksuche zu öffnen. In den Entwicklertools werden die Header und Textkörper aller Netzwerkanfragen nach der von Ihnen angegebenen Abfrage durchsucht.

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

Klicken Sie auf Groß-/Kleinschreibung beachten , um die Groß-/Kleinschreibung in Ihrer Abfrage zu berücksichtigen. Klicken Sie auf 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 setzen.

Abbildung 2. Eine Abfrage mit regulärem Ausdruck im Bereich „Netzwerksuche“.

Aktualisierungen der Benutzeroberfläche des Suchbereichs

Die Benutzeroberfläche des Bereichs Globale Suche entspricht jetzt der Benutzeroberfläche des neuen Bereichs Netzwerksuche. Außerdem werden die Ergebnisse jetzt formatiert, um die Lesbarkeit zu verbessern.

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 Stile

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.

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

Als Abruf kopieren

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

Abbildung 5. fetch()-äquivalenten Code für eine Anfrage kopieren

Die Entwicklertools erzeugen 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 im Bereich „Audits“

Neue Audits

Im Bereich Audits gibt es zwei neue Audits:

• Wichtige Anfragen vorab laden Durch das Vorabladen von Anfragen kann die Seitenladezeit verkürzt werden, da der Browser Hinweise erhält, Ressourcen, die für den kritischen Rendering-Pfad wichtig sind, so schnell wie möglich herunterzuladen.
• Unsichtbaren Text beim Laden von Webfonts vermeiden Wenn der Text sichtbar ist, während Webfonts geladen werden, ist die Seite für Nutzer schneller nützlich.

Neue Konfigurationsoptionen

Sie können den Bereich Audits jetzt so konfigurieren, dass Folgendes möglich ist:

• Einstellungen für 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.
• Speicher wie LocalStorage und IndexedDB über Audits hinweg beibehalten.

Abbildung 6. Neue Optionen für die Auditkonfiguration

Traces ansehen

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

Abbildung 7. Button Trace ansehen

Endlosschleifen stoppen

Wenn Sie viel mit for-Schleifen, do...while-Schleifen oder Rekursion arbeiten, haben Sie wahrscheinlich bei der Entwicklung Ihrer Website versehentlich eine Endlosschleife ausgeführt. So beenden Sie die Endlosschleife:

1. Öffnen Sie den Bereich Quellen.
2. Klicken Sie auf Pausieren . Die Schaltfläche ändert sich zu Skriptausführung fortsetzen .
3. Halten Sie 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 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 ausgewählt wurde.

Nutzertiming auf den Tabs „Leistung“

Klicken Sie beim Ansehen einer Leistungsaufzeichnung auf den Bereich Nutzertiming, um die Messwerte für das Nutzertiming auf den Tabs Zusammenfassung, Bottom-up, Aufrufstruktur und Ereignisprotokoll aufzurufen.

Abbildung 8. Anzeigen von Nutzertiming-Messwerten auf dem Tab Bottom-Up. Der blaue Balken links neben dem Abschnitt Nutzertiming zeigt an, dass er 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.

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

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

Abbildung 9. In der alten Benutzeroberfläche auf der linken Seite sind die JavaScript-VM-Instanzen hinter dem Drop-down-Menü Ziel verborgen, während sie in der neuen Benutzeroberfläche auf der rechten Seite 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 Arbeitsspeicher, der aufgrund von JavaScript zugewiesen wurde. Der rechte Wert stellt den gesamten Betriebssystemspeicher dar, 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 „Netzwerk“ in „Seite“ umbenannt

Im Bereich Quellen heißt der Tab Netzwerk jetzt 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 heißt er Seite.

Updates für das dunkle Design

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

Abbildung 11. Ein Screenshot des neuen Haltepunktsymbols 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 Certificate Transparency im Bereich „Sicherheit“

Website-Isolierung im Bereich „Leistung“

Wenn Sie die Website-Isolierung aktiviert haben, wird im Bereich Leistung jetzt für jeden Prozess ein Flame-Diagramm angezeigt, sodass Sie die Gesamtarbeit sehen können, die jeder Prozess verursacht.

Abbildung 13. Prozessspezifische Flame-Diagramme in einer Leistungsaufzeichnung

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Vorabversionen erhalten Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Nutzen Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder andere Themen im Zusammenhang mit den Entwicklertools zu diskutieren.

• Feedback und Feature Requests können Sie unter crbug.com einreichen.
• Sie können ein Problem mit den Entwicklertools melden, indem Sie in den Entwicklertools auf das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > Problem mit den Entwicklertools melden klicken.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare zu den YouTube-Videos What's new in DevTools oder DevTools Tips.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.