Neu in den DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Netzwerkbereich

In dieser Version wurden einige Verbesserungen im Bereich Netzwerk vorgenommen.

Neu gestaltete Netzwerkfilter

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 wieder das alte Filterdesign verwenden möchten, entfernen Sie das Häkchen aus den Einstellungen > Tests > Design der Filterleiste im Steuerfeld „Netzwerk“.

Wir freuen uns auf Ihr Feedback zum neuen Design.

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 > Generierung 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 in den HAR-Export.

Chromium-Problem: 361717594.

Verbesserungen im 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 zur automatischen Vervollständigung für die Eigenschaften von „text-emphasis-*“.

Chromium-Problem: 361471205.

Scroll-Überlauf mit Kennzeichen

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 Logo das aktuelle DOM wider und verschwindet, wenn der Inhalt z. B. aufgrund einer Größenänderung nicht mehr überläuft.

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

Chromium-Problem: 40670442.

Leere 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 einfache Deklaration nach der verschachtelten Regel nicht dazu, dass Chrome die Stile in der Kaskaden unerwartet neu sortiert:

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“

In dieser Version wurden im Bereich Leistung einige Verbesserungen vorgenommen.

Empfehlungen in Live-Messwerten

Livemesswerte bieten jetzt messwertspezifische Empfehlungen, mit denen Sie Ihre Entwicklungsumgebung so konfigurieren können, dass sie der Nutzererfahrung 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 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 umfasst eine Reihe von Verbesserungen im 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 „Getrennte Elemente“ zum Steuerfeld „Arbeitsspeicher“.

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}.
  • Es kann nach diesen Namen gesucht werden, die von DevTools erstellt werden.
  • Werden gruppiert, wenn sie dieselben Properties haben.

Vor und nach dem Organisieren der Objektkategorie in Heap-Snapshots.

Chromium-Problem: 350519222.

Dynamisches Design deaktivieren

Du kannst jetzt den automatischen Abgleich der Farben in den Entwicklertools mit deinen benutzerdefinierten Designfarben 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-Experiment: 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.

Infoleiste „Auf diesem Tab werden Ressourcen mit anderen Tabs geteilt...“

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

Lighthouse 12.2.1

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

Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:

  • Elemente:
    • Mehrere Fehlerkorrekturen beim Bearbeiten verschachtelten CSS (41486635, 361477264, 328263458, 41487826)
    • Feste benutzerdefinierte Eigenschaften mit leeren Werten, die als nicht definiert geparst werden (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 URL-Schemahervorhebung wird jetzt korrekt aktualisiert, wenn sich die Sicherheitsphase eines Ursprungs ändert (359920086).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. 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

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.