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 von Ausblendungs-, Blockierungs- und Drittanbieter-Filtern in einem Drop-down-Menü.

Wenn Sie wieder das alte Filterdesign verwenden möchten, löschen Sie die Einstellungen > Tests > Neu gestaltete 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 > 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 im Bereich „Elemente“

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

Autocomplete-Werte für 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 zur automatischen Vervollständigung für „text-emphasis-*“ Eigenschaften.

Chromium-Problem: 361471205.

Scroll-Überlauf mit Kennzeichen

Der Bereich Elemente wird jetzt mit einer neuen Schriftrolle gekennzeichnet. Kennzeichnen Sie Elemente, die überlaufenden Inhalt enthalten, mit einem Kennzeichen (overflow: scroll oder overflow: auto), damit Sie Überläufe beim Scrollen leicht 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.

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 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“

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. Wenn Sie bisher einen übergeordneten Navigationspfad ausgewählt hatten, wurden die untergeordneten Elemente ausgeblendet.

Verbesserungen des Arbeitsspeicher-Bereichs

Diese Version umfasst eine Reihe von Verbesserungen im Bereich Arbeitsspeicher.

Neu "Getrennte Elemente" Profil

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 von „Getrennte Elemente“ den Profiltyp zum Bereich „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:

  • Nach den darin enthaltenen Attributen benannt, z. B. {firstProperty, secondProperty, ..., *nthProperty}.
  • Kann nach diesen Namen durchsucht werden, die von den Entwicklertools erstellt wurden.
  • Gruppiert, wenn sie dieselben Eigenschaften haben.

Vor und nach dem Organisieren 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.

Den Vorher- und Nachher-Effekt des Deaktivierens des dynamischen Designs.

Chromium-Problem: 328472696.

Chrome-Experiment: Prozessfreigabe

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

Wenn Sie die Meldung „Dieser Tab teilt Ressourcen mit anderen Tabs...“ sehen Infoleiste geöffnet ist, während die Entwicklertools geöffnet sind, bist du Teil der kleinen Gruppe, in der der Test Prozessfreigabe aktiviert ist.

Die Option „Dieser Tab teilt Ressourcen mit anderen Tabs...“ Infoleiste.

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 Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Elemente:
    • Mehrere Korrekturen für das Bearbeiten verschachtelter CSS-Elemente (41486635, 361477264, 328263458, 41487826)
    • Feste benutzerdefinierte Eigenschaften mit leeren Werten, die als nicht definiert geparst werden (365578428).
  • Konsole: Ein Problem mit einem Et-Zeichen ohne Escapezeichen in mehrzeiligen Strings in cURL-Befehlen (352651673) wurde behoben.
  • Arbeitsspeicher: Die Standardauswahl auf Seiten mit Service Workern wurde korrigiert, wobei der Hauptthread jetzt ausgewählt ist (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 Vorschaukanäle bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, die Möglichkeit, innovative Webplattform-APIs zu testen, und die Möglichkeit, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie sehen.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren.

Neu in den Entwicklertools

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