Neu in den DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Netzwerkbereich

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

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. Die Liste enthält eine Zahl, die angibt, wie viele Filter im Drop-down-Menü ausgewählt 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 Datenlecks zu verringern, enthält das im HAR-Format exportierte Netzwerkprotokoll 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 markiert. 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.

Werte für die automatische Vervollständigung von text-emphasis-* Properties

Bei der automatischen Vervollständigung auf dem Tab Stile werden jetzt Werte für die folgenden CSS-Eigenschaften vorgeschlagen:

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 die Elemente, die überlaufenden Inhalt enthalten und die overflow: scroll oder overflow: auto enthalten, mit einem neuen Scroll-Symbol gekennzeichnet. 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.

Vorher und nach dem Markieren von Scroll-Overflows wird ein Logo angezeigt.

Chromium-Problem: 40670442.

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

Entsprechend der Entscheidung der CSS-Arbeitsgruppe, sodass grundlegende Deklarationen nach verschachtelten Regeln erscheinen können, werden diese Deklarationen auf dem Tab Styles jetzt beim Parsen nicht 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 im 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 eine ungefähre Vorstellung von der Nutzererfahrung zu erhalten.

Sie können jetzt auf der Zeitachse einer Leistungsaufzeichnung mit Navigationspfaden navigieren: Sie können zwischen Navigationspfaden hin- und herspringen, untergeordnete Navigationspfade überschreiben und mehrere untergeordnete Breadcrumbs entfernen. Bisher wurden die untergeordneten Elemente ausgeblendet, wenn Sie ein übergeordnetes Navigationselement ausgewählt haben.

Verbesserungen des Arbeitsspeicher-Bereichs

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. Sie zeigt Objekte, die von einer 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 dargestellt:

  • Sie werden anhand der enthaltenen Properties benannt, z. B. {firstProperty, secondProperty, ..., *nthProperty}.
  • Kann nach diesen Namen durchsucht werden, die von den Entwicklertools erstellt wurden.
  • 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 die dynamische Themenauswahl deaktivieren möchten, entfernen Sie das Häkchen bei  Einstellungen > Einstellungen > Darstellung > Chrome-Farbschema verwenden 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 nutzen 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 unter Chrome-Experiment: 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. Eine vollständige Liste der Änderungen finden Sie hier.

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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools