Neuerungen in den Entwicklertools (Chrome 67)

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

• In allen Netzwerkheadern suchen
• Vorschau der CSS-Variablenwerte im Bereich Stile
• Als Abruf kopieren
• Neue Audits, Desktop-Konfigurationsoptionen und Traces ansehen
• Endlosschleifen beenden
• Nutzertiming auf den Tabs Leistung
• JavaScript-VM-Instanzen werden im Bereich Arbeitsspeicher aufgeführt.
• Der Tab Network im Bereich Quellen wurde in Seite umbenannt.
• Änderungen am dunklen Design
• Informationen zur Zertifikatstransparenz im Bereich Sicherheit
• Funktionen der 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. Die Entwicklertools durchsuchen Header und Textkörper aller Netzwerkanfragen für die von Ihnen angegebene Abfrage.

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

Klicken Sie auf Groß-/Kleinschreibung beachten , um die Suchanfrage auszuführen. Groß- und Kleinschreibung berücksichtigen. Klicken Sie auf 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.

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

Aktualisierungen der Benutzeroberfläche für den Suchbereich

Die Benutzeroberfläche des Bereichs Globale Suche entspricht jetzt der Benutzeroberfläche des neuen Bereichs Netzwerksuche. Jetzt und sorgt für eine bessere Lesbarkeit.

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.

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.

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:

• Schlüsselanfragen vorab laden. Durch Vorabladeanfragen kann die Seitenladezeit beschleunigt werden, indem dem um Ressourcen, die für Ihren kritischen Rendering-Pfad wichtig sind, sofort herunterzuladen, möglich.
• Vermeiden Sie unsichtbaren Text während des Ladens der Webfonts. Stellen Sie sicher, dass der Text sichtbar ist, wenn Webfonts geladen werden, ist die Seite für Nutzer schneller nutzbar.

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.

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.

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 . Die Schaltfläche ändert sich in Fortsetzen Skriptausführung .
3. Skriptausführung fortsetzen zurückhalten und wählen Sie dann Beenden aus. Aktueller JavaScript-Aufruf .

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

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.

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.

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.

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.

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.

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