Neu in den DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Verbesserungen am Netzwerkbereich

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

Netzwerkfilter neu konzipiert

Der Bereich Netzwerk erhält neue Filter, die auf Grundlage Ihres Feedbacks überarbeitet wurden. Die typspezifischen Filter bleiben unverändert – eine Reihe von Badges in einer übersichtlichen Mehrfachauswahlleiste.

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

Vor und nach dem Verschieben von Filtern für Ausblenden, Blockieren und Drittanbieter unter ein Drop-down-Menü.

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

Wir freuen uns auf Ihr Feedback zum neuen Design.

Chromium-Problem: 362672528.

HAR-Exporte schließen jetzt standardmäßig sensible Daten aus

Um die Wahrscheinlichkeit eines versehentlichen Lecks sensibler Informationen 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 die Einstellungen > Einstellungen > Netzwerk > Generierung von HAR mit sensiblen Daten zulassen. Im Bereich Netzwerk wird die Schaltfläche Exportieren für den mit einem Pfeil gekennzeichnet. Klicken Sie lange auf die Schaltfläche und wählen Sie im Drop-down-Menü HAR exportieren (mit sensiblen Daten) 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 für text-emphasis-*-Properties

In der Registerkarte Styles werden jetzt Werte für die folgenden CSS-Properties vorgeschlagen:

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

Chromium-Problem: 361471205.

Scroll-Overflows, die mit einem Symbol gekennzeichnet sind

Im Bereich Elemente werden Elemente, die überlaufende Inhalte enthalten und für die overflow: scroll oder overflow: auto festgelegt ist, jetzt mit dem neuen Badge „scroll“ gekennzeichnet. So lassen sich Scroll-Überläufe ganz einfach erkennen. Wie die anderen Badges spiegelt auch dieses Badge das aktuelle DOM wider und verschwindet, wenn der Inhalt nicht mehr überläuft, z. B. aufgrund einer Größenänderung.

Vor und nach dem Markieren von Scroll-Overflows mit einem Badge.

Chromium-Problem: 40670442.

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

Nach der Entscheidung der CSS Working Group, leere Deklarationen nach verschachtelten Regeln zuzulassen, werden diese Deklarationen auf dem Tab Styles 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 Formatierungen in der Kaskade unerwartet neu anordnet:

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

  background-color: green;
}

Vor und nach der Zulassung von einfachen Deklarationen nach verschachtelten Regeln.

Chromium-Problem: 358119261.

Verbesserungen am Bereich „Leistung“

Diese Version enthält eine Reihe von Verbesserungen für den 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 der Umgebung Ihrer Nutzer so nahe wie möglich kommt.

Wenn Sie Empfehlungen erhalten möchten, richten Sie das Abrufen von Felddaten aus dem Chrome UX Report (CrUX) ein und maximieren Sie den Abschnitt Lokale Testbedingungen berücksichtigen auf jeder Messwertkarte (falls vorhanden) und Umgebungen echter Nutzer berücksichtigen in den Umgebungseinstellungen.

Abschnitte mit Empfehlungen maximiert.

Folgen Sie den Empfehlungen, um die Nutzererfahrung Ihrer Nutzer nachzuvollziehen.

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

Verbesserungen am Bereich „Arbeitsspeicher“

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

Neues Profil „Getrennte Elemente“

Das Arbeitsspeicher-Feld hat einen neuen Profiltyp erhalten: Getrennte Elemente. Hier werden Objekte angezeigt, die durch eine JavaScript-Referenz beibehalten werden.

Vor und nach dem Hinzufügen des Profiltyps „Getrennte Elemente“ zum Bereich „Arbeitsspeicher“.

Chromium-Problem: 350519222.

Verbesserte Benennung von einfachen JS‑Objekten

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

  • Die Namen basieren auf den enthaltenen Eigenschaften, z. B. {firstProperty, secondProperty, ..., *nthProperty}.
  • Sie können nach diesen Namen suchen, die von DevTools erstellt werden.
  • Sie werden gruppiert, wenn sie dieselben Eigenschaften haben.

Vor und nach dem Organisieren der Objektkategorie in Heapsnapshots.

Chromium-Problem: 350519222.

Dynamische Designs deaktivieren

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

Wenn Sie das dynamische Design deaktivieren möchten, deaktivieren Sie in den Einstellungen > Einstellungen > Darstellung > Chrome-Farbschema anpassen und laden Sie die DevTools neu.

Das Bild zeigt, wie das Smartphone vor und nach dem Deaktivieren des dynamischen Designs aussieht.

Chromium-Problem: 328472696.

Chrome-Experiment: Prozessfreigabe

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

Wenn Sie beim Öffnen der Entwicklertools die Infoleiste mit der Meldung „Dieser Tab teilt Ressourcen mit anderen Tabs…“ sehen, gehören Sie zu der kleinen Gruppe, bei der der Test 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-Test: Prozessfreigabe.

Lighthouse 12.2.1

Im Bereich Lighthouse wird jetzt Lighthouse 12.2.1 ausgeführt.

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

Die Grundlagen zur Verwendung des Lighthouse-Bereichs in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen und Verbesserungen in dieser Version:

  • Elemente:
    • Mehrere Fehlerbehebungen für das Bearbeiten von verschachteltem CSS (41486635, 361477264, 328263458, 41487826).
    • Ein Fehler wurde behoben, bei dem benutzerdefinierte Eigenschaften, die definiert, aber leer waren, als „nicht definiert“ geparst wurden (365578428).
  • Konsole: Ein nicht maskiertes kaufmännisches Und-Zeichen in mehrzeiligen Strings in cURL-Befehlen wurde korrigiert (352651673).
  • Arbeitsspeicher: Die Standardauswahl auf Seiten mit Service Workern wurde korrigiert. Jetzt ist der Hauptthread ausgewählt (40669896).
  • Sicherheit: Das URL-Schema wird jetzt korrekt aktualisiert, wenn sich die Sicherheitsstufe eines Ursprungs ändert (359920086).

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.