Neu in den DevTools, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Bereich „Leistung“

Diese Version enthält mehrere Verbesserungen am Bereich Leistung.

Vorverbundene Ursprünge im Insight „Netzwerkabhängigkeitsbaum“

Der Insight Leistung > Statistiken > Netzwerkabhängigkeitsbaum enthält jetzt eine Liste der verwendeten oder nicht verwendeten vorab verbundenen Ursprünge und der Kandidaten für die Vorabverbindung, sofern vorhanden.

Mit Hinweisen zu Vorverbindungen kann Ihre Website frühzeitig Verbindungen zu wichtigen Drittanbieterursprüngen herstellen und die Ladegeschwindigkeit der Seite verbessern.

Die Statistiken vor und nach dem Hinzufügen von vorab verbundenen Ursprüngen und Kandidaten zur Statistik „Netzwerkabhängigkeitsbaum“.

Weitere Informationen finden Sie unter Vorverbinden mit erforderlichen Ursprüngen.

Serverantwort- und Weiterleitungszeiten im Insight „Latenz bei Dokumentanfragen“

Der Insight Leistung > Statistiken > Latenz bei Dokumentanfragen enthält jetzt die Serverantwortzeit und gegebenenfalls die Anzahl der Weiterleitungen und die Weiterleitungszeit.

Die Latenz der Dokumentanfrage vor und nach dem Hinzufügen von Weiterleitungs- und Serverantwortzeiten zum Insight „Latenz der Dokumentanfrage“.

Weiterleitungen in der Zusammenfassung der Netzwerkanfragen

Im Bereich Leistung werden jetzt Weiterleitungs-URLs in der Zusammenfassung von Netzwerkanfragen und in den zugehörigen Kurzinfos angezeigt.

Die Zusammenfassung und die Kurzinfos von Netzwerkanfragen vor und nach dem Hinzufügen von Weiterleitungs-URLs.

Chromium-Problem: 402353313.

Weniger Rauschen im Leistungstrace

Im Bereich Leistung werden jetzt keine Ereignisse aus der Kategorie compile der V8-JavaScript-Engine mehr angezeigt. Bisher haben diese Ereignisse, insbesondere das compile code-Ereignis, viel unnötigen Aufwand und Rauschen verursacht.

Die Leistung vor und nach dem Entfernen der Ereignisse vom Typ „compile code“ aus dem Leistungs-Trace.

Wenn Sie feststellen, dass einige für Sie wichtige Ereignisse fehlen, können Sie uns gerne Feedback unter crbug.com/414330508 geben.

„JavaScript-Samples deaktivieren“ ist veraltet

Die Option JavaScript-Samples deaktivieren unter Leistung > Aufnahmeeinstellungen wurde eingestellt und entfernt, da sie nur selten nützlich war und wenig verwendet wurde.

Die Screenshots zeigen die Einstellungen vor und nach dem Entfernen der Option „JavaScript-Samples deaktivieren“ aus den „Aufnahmeeinstellungen“.

Chromium-Problem: 414734883.

Parameter für die Standortgenauigkeit in „Sensors“

Im Bereich Sensors können Sie jetzt die Genauigkeit bei der Emulation der geografischen Position festlegen. So können Sie testen, wie verschiedene GPS-Genauigkeitsstufen gehandhabt werden.

Die Genauigkeit vor und nach dem Hinzufügen des Parameters „Genauigkeit“ zur Emulation der geografischen Position im Bereich „Sensoren“.

Chromium-Problem: 40074843.

Verbesserungen am Bereich „Elemente“

Diese Version enthält mehrere Verbesserungen am Bereich Elemente.

Komplexe CSS-Werte einfacher debuggen

Um Ihnen das Debuggen komplexer CSS-Werte zu erleichtern, wird im Tab Elemente > Stile jetzt in einem Kurzinfo-Fenster angezeigt, wenn Sie den Mauszeiger auf einen Wert bewegen:

  • Die vollständige Definition von CSS-Variablen, sodass Sie nicht auf mehrere Links klicken müssen.
  • Eine schrittweise Auswertung komplexer CSS-Berechnungen, damit Sie Fehler effizienter erkennen und besser nachvollziehen können, wie ein Wert berechnet wird.

Die Kurzinfo zeigt Definitionsketten in mehreren Zeilen an, eine für jede Definition. Sie können komplexe Berechnungen maximieren und mit dem Mauszeiger auf Werte zeigen, um den berechneten Wert hervorzuheben und bis zum ursprünglichen Ausdruck zurückzuverfolgen.

Die Ansicht vor und nach dem Hinzufügen eines Tooltips mit Definitionsketten und erweiterbaren komplexen Berechnungen.

Chromium-Problem: 396080529.

@function-Unterstützung in „Elements“ > „Styles“

Zur Vorbereitung auf die Unterstützung von @function in Chrome werden auf dem Tab Elemente > Stile jetzt die Namen Ihrer benutzerdefinierten Funktionen in einem eigenen Bereich mit ihren Definitionen verknüpft.

Vor und nach dem Verknüpfen des Namens der benutzerdefinierten Funktion mit dem entsprechenden Abschnitt.

Verbesserungen am Netzwerkbereich

Diese Version enthält mehrere Verbesserungen am Bereich Netzwerk.

has-request-header Filter

Das Netzwerk-Steuerfeld unterstützt jetzt den Filter has-request-header, mit dem Sie nach einem bestimmten Namen für den Anfrageheader filtern können.

Vor und nach dem Hinzufügen des Filters „has-request-header“ zum Netzwerkbereich.

Chromium-Problem: 397481040.

Direct Sockets in isolierten Web-Apps

Im Bereich Netzwerk können Sie jetzt den Traffic von isolierten Web-Apps (IWAs) über TCPSocket, UDPSocket (im gebundenen Modus) und UDPSocket (im verbundenen Modus) überwachen.

Wählen Sie dazu in der Tabelle neben regulären Anfragen eine directscoket-Verbindung aus und wählen Sie auf dem Tab Nachrichten eine Nachricht aus.

Das Netzwerk-Steuerfeld vor und nach dem Hinzufügen der Unterstützung für Direct Sockets in IWAs.

Isolierte Web-Apps (IWAs) bieten ein Sicherheitsmodell mit hohem Vertrauen für Webanwendungen. Weitere Informationen finden Sie unter Erste Schritte mit isolierten Web-Apps. Sehen Sie sich auch die Demo-App an, in der die Direct Sockets API implementiert ist.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Anwendung > Speicher: Die eingestellte Option „Web SQL“ wurde entfernt (crbug.com/412707590).
  • Elemente:
  • Netzwerk: Der HTTP-Header Referrer-Policy wurde aus der Option Als Fetch kopieren entfernt, da er ein Antwortheader zur Steuerung des Browserverhaltens und keine clientseitige Anweisung ist (crbug.com/413904896).
  • Leistung: Warnungen zu „langen Aufgaben“ wurden aus Worker-Threads entfernt, da sie Haupt-Threads nicht blockieren (crbug.com/40248589).
  • Probleme. Berichte jetzt:
    • Ob Ressourcen, die Nutzer möglicherweise tracken, blockiert werden.
    • Eindämmung von Bounce-Tracking, unabhängig davon, ob während einer Weiterleitung auf den Speicher zugegriffen wird.
  • Verfügbarkeit. Die folgenden Elemente unter Elemente > Stile können jetzt mit der Tastatur fokussiert werden:

Vorschaukanäle herunterladen

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

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

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