Neuerungen in den Entwicklertools (Chrome 67)

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. Die Entwicklertools durchsuchen Header und Textkörper aller Netzwerkanfragen für die von Ihnen angegebene Abfrage.

Suche nach dem Text „cache-control“ mit dem neuen Bereich "Netzwerksuche".

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

Klicken Sie auf Groß-/Kleinschreibung beachten Groß-/Kleinschreibung beachten, um die Suchanfrage auszuführen. Groß- und Kleinschreibung berücksichtigen. Klicken Sie auf Regulären Ausdruck verwenden. Regulären Ausdruck verwenden, um alle übereinstimmenden Ergebnisse anzuzeigen das von Ihnen angegebene Muster. Sie müssen Ihren regulären Ausdruck nicht in Schrägstriche setzen.

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. Jetzt und sorgt für eine bessere Lesbarkeit.

Die alte und die neue Benutzeroberfläche.

Abbildung 3. Die alte Benutzeroberfläche links und die neue Benutzeroberfläche rechts

Drücken Sie die Befehlstaste + Wahltaste + F (Mac) oder Strg + Umschalttaste + F (Windows, Linux, ChromeOS), um Global Suche. 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 einen CSS-Code festgelegt ist zeigt die Entwicklertools nun eine Vorschau dieser Farbe an.

Beispiel für Farbwerte von CSS-Variablen

Abbildung 4. In der alten Benutzeroberfläche wird links keine Farbvorschau neben color: var(--main-color), aber in der neuen UI rechts

Als Abruf kopieren

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

Kopieren des äquivalenten "fetch()"-Codes für eine Anfrage.

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

Die Entwicklertools generieren 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 Audit-Bereichs

Neue Prüfungen

Der Bereich Audits enthält zwei neue Prüfungen, darunter:

Neue Konfigurationsoptionen

Sie können den Bereich Audits jetzt so konfigurieren:

  • Behalten Sie die Einstellungen für den Desktop-Darstellungsbereich und den User-Agent bei. Mit anderen Worten: Sie können verhindern, dass die Audits für die Simulation eines Mobilgeräts.
  • 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 die Lastleistungsdaten für die Prüfung anzusehen Leistung aus.

Die Schaltfläche "Trace anzeigen".

Abbildung 7. Die Schaltfläche Trace ansehen

Endlosschleifen beenden

Wenn Sie häufig mit for-Schleifen, do...while-Schleifen oder Rekursionen arbeiten, haben Sie wahrscheinlich bereits eine eine Endlosschleife zu erstellen. 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 in Fortsetzen Skriptausführung Fortsetzen.
  3. Skriptausführung fortsetzen zurückhalten Fortsetzen und wählen Sie dann Beenden aus. Aktueller JavaScript-Aufruf Beenden.

Im Video oben wird die Uhr über einen setInterval()-Timer aktualisiert. Klicken Sie auf Starten Eine Endlosschleife führt eine do...while-Schleife aus, die nie anhält. Das Intervall wird fortgesetzt, weil ausgeführt, wenn Aktuellen JavaScript-Aufruf stoppen Beenden war ausgewählt.

Nutzertiming auf den Tabs "Leistung"

Wenn Sie sich eine Leistungsaufzeichnung ansehen, klicken Sie auf den Bereich Nutzertiming, um das Nutzertiming aufzurufen. Zusammenfassung, Von unten nach oben, Aufrufstruktur und Ereignisprotokoll.

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

Abbildung 8. Messwerte für das Nutzertiming auf dem Tab Bottom-up ansehen Der blaue Balken links vom Der Bereich Nutzertiming gibt an, dass er ausgewählt ist.

Im Allgemeinen können Sie jetzt jeden der Abschnitte auswählen (Hauptthread, Nutzertiming, GPU, ScriptStreamer usw.) und sehen Sie sich die Aktivitäten dieses Abschnitts auf den Tabs an.

Wählen Sie im Bereich „Arbeitsspeicher“ JavaScript-VM-Instanzen aus

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

Screenshots des Bereichs „Arbeitsspeicher“ (Vorher und Nachher)

Abbildung 9. In der alten Benutzeroberfläche auf der linken Seite sind die JavaScript-VM-Instanzen hinter dem Ziel aus. In der neuen Benutzeroberfläche auf der rechten Seite finden Sie sie im Bereich Auswählen Tabelle mit JavaScript-VM-Instanzen

Neben der Instanz developers.google.com befinden sich zwei Werte: 8.7 MB und 13.3 MB. Der linke value steht für den aufgrund von JavaScript zugewiesenen Arbeitsspeicher. Der richtige Wert steht für den gesamten Arbeitsspeicher des Betriebssystems die 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 entspricht Memory Footprint.

Tab "Netzwerk" wurde in Tab "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 auf der linken Seite heißt der Tab mit den Ressourcen der Seite Network (Netzwerk). In der neuen Benutzeroberfläche rechts heißt es Page.

Änderungen beim dunklen Design

Für Chrome 67 wurden einige kleinere Änderungen am Farbschema des dunklen Designs vorgenommen. Beispiel: Der Parameter Haltepunktsymbole und die aktuelle Ausführungszeile sind jetzt grün.

Screenshot des neuen Haltepunktsymbols und des aktuellen Farbschemas der Ausführung

Abbildung 11. Screenshot des neuen Haltepunktsymbols und des Farbschemas der aktuellen Ausführung

Zertifikatstransparenz im Sicherheitsbereich

Im Bereich Sicherheit werden jetzt Informationen zur Transparenz von Zertifikaten angezeigt.

Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“

Abbildung 12. Informationen zur Transparenz der Zertifizierung im Sicherheitsbereich

Website-Isolierung im Bereich „Leistung“

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

Prozessbasierte Flame-Diagramme in einer Leistungsaufzeichnung

Abbildung 13. Prozessbasierte Flame-Diagramme in einer Leistungsaufzeichnung

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools