Neu in den DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Netzwerkbereich

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Netzwerk.

Netzwerkfilter neu gedacht

Der Bereich Netzwerk wurde anhand deines Feedbacks überarbeitet und enthält jetzt neue Filter. Die typspezifischen Filter bleiben gleich: eine Reihe von Logos in einer übersichtlichen Leiste für die Mehrfachauswahl.

Um die Benutzeroberfläche übersichtlicher zu gestalten, werden die Kästchen zum Ausblenden, Blockieren und für Drittanbieter in eine Drop-down-Liste verschoben. In der Liste sehen Sie eine Zahl, die angibt, wie viele Filter im Drop-down-Menü aktiviert sind.

Vor und nach dem Verschieben der Filter zum Ausblenden, Blockieren und von Drittanbietern in ein Drop-down-Menü

Wenn Sie das alte Filterdesign wiederherstellen möchten, deaktivieren Sie Einstellungen > Tests > Neugestaltung der Filterleiste im Bereich „Netzwerk“.

Wir freuen uns auf dein Feedback.

Chromium-Problem: 362672528.

Sensible Daten werden bei HAR-Exporten jetzt standardmäßig ausgeschlossen

Um das Risiko versehentlicher Weitergabe sensibler Daten zu verringern, enthalten die im HAR-Format exportierten Netzwerkprotokolle standardmäßig keine Cookie-, Set-Cookie- und Authorization-Header mehr.

Wenn Sie Protokolle im HAR-Format mit den sensiblen Daten exportieren möchten, aktivieren Sie Einstellungen > Einstellungen > Netzwerk > Erstellen von HAR mit sensiblen Daten zulassen. Im Bereich Netzwerk wird die Schaltfläche Exportieren mit einem Pfeil gekennzeichnet. Halten Sie die Schaltfläche gedrückt und wählen Sie im Drop-down-Menü HAR (mit sensiblen Daten) exportieren aus.

Vor und nach dem Hinzufügen von Exportoptionen mit und ohne sensible Daten zum HAR-Export

Chromium-Problem: 361717594.

Verbesserungen am Bereich „Elemente“

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Elemente.

Autocomplete-Werte für text-emphasis-*-Properties

Die automatische Vervollständigung auf dem Tab Styles schlägt jetzt Werte für die folgenden CSS-Properties vor:

Vor und nach dem Hinzufügen der Option für die automatische Vervollständigung für die Properties „text-emphasis-*“

Chromium-Problem: 361471205.

Scroll-Overflows sind mit einem Symbol gekennzeichnet

Im Bereich Elemente werden jetzt Elemente, die überlaufende Inhalte enthalten und overflow: scroll oder overflow: auto haben, mit einem neuen Symbol „Scrollen“ gekennzeichnet. So können Sie Überlaufbereiche beim Scrollen leichter erkennen. Wie die anderen Logos spiegelt auch dieses das aktuelle DOM wider und verschwindet, wenn der Inhalt beispielsweise aufgrund einer Größenänderung nicht mehr überläuft.

Vor und nach dem Markieren von Scroll-Overflows mit einem Symbol

Chromium-Problem: 40670442.

Nackte Deklarationen nach verschachtelten Regeln werden nicht „nach oben verschoben“

Gemäß der Entscheidung der CSS-Arbeitsgruppe, nackte Deklarationen nach verschachtelten Regeln zuzulassen, werden diese Deklarationen auf dem Tab Stile beim Parsen nicht mehr nach oben verschoben.

Im folgenden Codebeispiel führt die reine Deklaration nach der verschachtelten Regel nicht mehr dazu, dass Chrome die Stile in der Kaskade unerwartet neu anordnet:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Vor und nach dem Zulassen von einfachen Deklarationen nach verschachtelten Regeln

Chromium-Problem: 358119261.

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen am Bereich Leistung.

Empfehlungen in Live-Messwerten

Live-Messwerte können jetzt messwertspezifische Empfehlungen liefern, mit denen Sie Ihre Entwicklungsumgebung so konfigurieren können, dass sie möglichst genau der Umgebung Ihrer Nutzer entspricht.

Wenn Sie Empfehlungen erhalten möchten, richten Sie den Abruf von Felddaten aus dem Chrome UX Report (CrUX) ein. Maximieren Sie auf jeder Messwertkarte den Abschnitt Bedingungen für lokale Tests berücksichtigen (falls vorhanden) und Umgebungseinstellungen.

Erweiterte Bereiche mit Empfehlungen

Folgen Sie den Empfehlungen, um die Nutzererfahrung zu simulieren.

Sie können jetzt in der Zeitachse einer Leistungsaufzeichnung zwischen Brotkrümmeln wechseln, zwischen untergeordneten Brotkrumen „springen“, untergeordnete Brotkrumen überschreiben und mehrere untergeordnete Elemente entfernen. Bisher wurden die untergeordneten Elemente ausgeblendet, wenn Sie ein übergeordnetes Navigationselement ausgewählt haben.

Verbesserungen am Bereich „Speicher“

Diese Version enthält eine Reihe von Verbesserungen für den Bereich Arbeitsspeicher.

Neues Profil „Getrennte Elemente“

Im Bereich Speicher gibt es einen neuen Profiltyp: Losgelöste Elemente. Es zeigt Objekte an, die durch eine JavaScript-Referenz beibehalten werden.

Vor und nach dem Hinzufügen des Profiltyps „Losgelöste Elemente“ zum Bereich „Speicher“

Chromium-Problem: 350519222.

Verbesserte Benennung von einfachen JS-Objekten

Um die Kategorie Object in Heap-Snapshots zu organisieren und zu übersichtlich gestalten, werden einfache JavaScript-Objekte jetzt so kategorisiert:

  • Sie werden anhand der enthaltenen Properties benannt, z. B. {firstProperty, secondProperty, ..., *nthProperty}.
  • Es kann nach diesen Namen gesucht werden, die von DevTools erstellt werden.
  • Werden gruppiert, wenn sie dieselben Properties haben.

Vor und nach der Organisation der Objektkategorie in Heap-Snapshots

Chromium-Problem: 350519222.

Dynamisches Design deaktivieren

Sie können jetzt die automatische Anpassung der Farben der Entwicklertools an die Farben Ihres benutzerdefinierten Designs in Chrome deaktivieren.

Wenn Sie das dynamische Design deaktivieren möchten, entfernen Sie das Häkchen bei Einstellungen > Einstellungen > Darstellung > Chrome-Farbschema anpassen und laden Sie die DevTools neu.

Vor und nach dem Deaktivieren des dynamischen Designs

Chromium-Problem: 328472696.

Chrome-Test: Prozessfreigabe

Normalerweise erstellt Chrome für jeden Tab, den Sie von derselben Website (z. B. Google Docs) öffnen, einen separaten Renderer-Prozess. Beim Test Prozessfreigabe wird dies geändert, indem mehrere Tabs denselben Renderer-Prozess teilen können, um die Leistung zu verbessern.

Wenn Sie in den Entwicklertools die Infoleiste „Dieser Tab teilt Ressourcen mit anderen Tabs…“ sehen, gehören Sie zu der kleinen Gruppe, für die der Test zur Prozessfreigabe aktiviert ist.

Die Infoleiste „Dieser Tab teilt Ressourcen mit anderen Tabs…“

Die Prozessfreigabe kann sich auf das Debugging von Haltepunkten und die Leistungsanalyse auswirken. Weitere Informationen finden Sie im Hilfeartikel Chrome-Test: Prozessfreigabe.

Lighthouse 12.2.1

Im Bereich Lighthouse wird jetzt Lighthouse 12.2.1 ausgeführt.

Mit diesem Update wird ein < 20 KB Ignoriergrenzwert für Vorschläge zur Ressourcenkomprimierung eingeführt, damit Sie sich nur auf die sinnvollen Einsparungen bei der Dateigröße konzentrieren können. Vollständige Liste der Änderungen

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Elemente:
    • Mehrere Fehlerkorrekturen beim Bearbeiten verschachtelten CSS (41486635, 361477264, 328263458, 41487826)
    • Behoben wurde ein Problem, bei dem benutzerdefinierte Properties mit definiertem, aber leerem Wert als nicht definiert geparst wurden (365578428).
  • Konsole: Es wurde ein nicht entkommentiertes Andzeichen in mehrzeiligen Strings in cURL-Befehlen korrigiert (352651673).
  • Speicher: Die Standardauswahl auf Seiten mit Dienst-Workern wurde korrigiert. Der Haupt-Thread wird jetzt ausgewählt (40669896).
  • Sicherheit: Die Hervorhebung des URL-Schemas wird jetzt korrekt aktualisiert, wenn sich die Sicherheitsstufe eines Ursprungs ändert (359920086).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.