Neu in den DevTools, Chrome 130

Sofia Emelianova

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.

Wenn Sie das alte Filterdesign wiederherstellen möchten, deaktivieren Sie Einstellungen Einstellungen > Tests > check_box_outline_blank 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 > Einstellungen > Netzwerk > Kästchen Erstellen von HAR mit sensiblen Daten zulassen. Im Bereich Netzwerk wird die Schaltfläche Herunterladen 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.

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:

• text-emphasis-Kurzschrift
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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.

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

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.

Folgen Sie den Empfehlungen, um die Nutzererfahrung zu simulieren.

Navigationspfad verwenden

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.

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.

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 > Einstellungen > Darstellung > check_box_outline_blank Chrome-Farbschema anpassen und laden Sie die DevTools neu.

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. Mit dem Test Prozessfreigabe wird dies geändert. Mehrere Tabs können dann denselben Renderer-Prozess nutzen, 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 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 Komprimierung von Ressourcen 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 ampersand 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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

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