Neu in den Entwicklertools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Neuer Bereich für Autofill

In dieser Version ist der neue Bereich Autofill in den Entwicklertools verfügbar. Chrome Autofill bietet eine praktische Möglichkeit, Formulare auf Websites automatisch mit gespeicherten Adressen auszufüllen. Im neuen Bereich Autofill können Sie die Zuordnung zwischen Ihren Formularfeldern, den prognostizierten Autofill-Werten und den gespeicherten Daten prüfen.

Testen Sie das neue Steuerfeld auf dieser Demoseite mit Testdaten:

  1. Klicken Sie unter Profilautofill auf eine der Schaltflächen Formular ausfüllen…, dann auf Senden und im Dialogfeld Adresse speichern? auf Speichern. Kehren Sie dann zur Seite mit dem Formular zurück.
  2. Öffnen Sie die DevTools und lösen Sie ein Autofill-Ereignis aus: Wählen Sie ein Formularfeld und dann die Adresse aus der Drop-down-Liste aus.

Der Bereich Autofill wird automatisch geöffnet und zeigt erkannte Formularfelder, von Autofill abgeleitete Felder und gespeicherte Werte an.

Bereich „Autofill“

Weitere Informationen finden Sie unter Formulare und Autofill.

Erweiterte Netzwerkdrosselung für WebRTC

Da benutzerdefinierten Netzwerkdrosselungsprofilen jetzt paketbezogene Parameter hinzugefügt wurden, können Sie Ihre WebRTC-Anwendungen jetzt direkt in den DevTools drosseln. So können Sie Ihre Echtzeitkommunikation testen, ohne Software von Drittanbietern verwenden zu müssen.

Die neuen Parameter sind: Paketverlust (in Prozent), Paketwarteschlangenlänge (Anzahl der Pakete) und das Paketneuordnung.

Die Auswirkungen des Hinzufügens neuer paketbezogener Optionen zu benutzerdefinierten Drosselungsprofilen.

Wenn Sie eine WebRTC-Verbindung drosseln möchten, geben Sie die paketbezogenen Parameter in einem benutzerdefinierten Profil unter Einstellungen > Drosseln an und wählen Sie es im Bereich Netzwerk aus.

Auf dieser Demoseite können Sie die neuen Parameter ausprobieren. Erlauben Sie zuerst der Seite, die Kamera zu verwenden. Wählen Sie dann im Bereich Netzwerk das von Ihnen konfigurierte benutzerdefinierte Profil aus und klicken Sie auf der Seite auf Starten und Anrufen.

Chromium-Problem: 41175925.

Unterstützung für scrollbasierte Animationen im Bereich „Animationen“

Im Bereich Animationen können Sie jetzt Scroll-Animationen prüfen.

Auf dieser Demoseite können Sie diese Funktion ausprobieren. Öffnen Sie den Bereich Animationen und aktualisieren Sie die Seite, um scrollgesteuerte Animationen zu erfassen.

Eine Gruppe von scrollgesteuerten Animationen, die mit einem Maussymbol gekennzeichnet sind.

In der Übersicht wird eine Animation mit einem Maussymbol  angezeigt. Sie können sie jetzt prüfen. Für die Gruppe werden in der Zeitachse Pixelwerte anstelle von Millisekunden angezeigt.

Verbesserte Unterstützung von CSS-Verschachtelungen unter „Elemente“ > „Stile“

Auf dem Tab Elemente > Styles wurde die Unterstützung für CSS-Verschachtelung verbessert. Verschachtelte Stile werden jetzt mit Einzügen und in Klammern angezeigt. Durch CSS-Verschachtelung können Sie CSS-Regeln gruppieren und so für weniger Text und mehr Struktur sorgen.

Vor und nach dem Einfügen von Einzügen und dem Einschließen verschachtelter Stile in geschweifte Klammern.

Chromium-Problem: 40166888

Bereich „Erweiterte Leistung“

Diese Version enthält mehrere Verbesserungen am Bereich Leistung.

Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden

Unter Leistung > Haupt können Sie jetzt irrelevante Funktionen und ihre untergeordneten Elemente ausblenden, um unwichtige Daten aus dem Flammendiagramm herauszufiltern. Klicken Sie im Flammendiagramm mit der rechten Maustaste auf eine Funktion und wählen Sie eine Option aus dem Kontextmenü aus.

Vorher-Nachher-Vergleich: Kontextmenü zum Ausblenden von Funktionen und untergeordneten Elementen

Funktionen mit ausgeblendeten untergeordneten Elementen haben rechts die Schaltfläche Drop-down-Menü. Bewegen Sie den Mauszeiger darauf, um die Anzahl der ausgeblendeten untergeordneten Elemente zu sehen, und klicken Sie darauf, um sie wieder einzublenden. Wenn Sie zum ursprünglichen Zustand des Flame-Diagramms zurückkehren möchten, klicken Sie mit der rechten Maustaste auf eine Funktion und wählen Sie Spuren zurücksetzen aus.

Pfeile von ausgewählten Initiatoren zu den von ihnen initiierten Ereignissen

Bisher wurde beim Auswählen eines Ereignisses im Haupt-Track ein Pfeil vom Auslöser zum ausgewählten Ereignis angezeigt. Jetzt wird im Pfad auch ein Pfeil vom ausgewählten Ereignis zum Ereignis angezeigt, das es ausgelöst hat (falls vorhanden).

Vorher-Nachher-Pfeile von ausgewählten zu ausgelösten Ereignissen und benannte Links anstelle von „Entdecken“.

Außerdem haben alle Initiatoren jetzt Felder vom Typ Initiator für auf dem Tab Zusammenfassung. Die Felder Initiator für und Von enthalten jetzt benannte Links anstelle von Offenlegen.

Chromium-Probleme: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.6.0 ausgeführt. Vollständige Liste der Änderungen

Zu den bemerkenswerten Änderungen gehört die neue Einstellung JS-Sampling aktivieren, die Sie aktivieren können. Diese Einstellung ist standardmäßig deaktiviert.

Vor und nach dem Hinzufügen einer JS-Sampling-Einstellung

Wenn Sie die JS-Stichprobenerhebung aktivieren, werden dem Leistungs-Trace detaillierte JavaScript-Aufrufstacks hinzugefügt. Dies kann die Berichterstellung jedoch verlangsamen.

Leistungs-Trace ohne (links) und mit (rechts) JS-Sampling

Der Trace ist nach der Generierung des Lighthouse-Berichts unter Tools > Ungedrosselten Trace ansehen verfügbar.

Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558

Kurzinfos zu speziellen Kategorien unter „Arbeitsspeicher“ > „Heap-Snapshots“

Heap-Snapshots im Bereich Arbeitsspeicher enthalten besondere Objektgruppen, die nicht auf Konstruktoren basieren. Wenn Sie den Mauszeiger auf solche Objekte bewegen, wird im Bereich Arbeitsspeicher jetzt eine Kurzinfo mit einer kurzen Beschreibung und einem Link zu einer ausführlicheren Beschreibung in der Dokumentation angezeigt.

Im Vorher-Nachher-Vergleich wird eine beschreibende Kurzinfo für bestimmte Objektgruppen angezeigt.

Chromium-Problem: 41490331.

Anwendung > Speicherupdates

Diese Version enthält einige Updates unter Anwendung > Speicher.

Für den freigegebenen Speicherplatz verwendete Bytes

Im Bereich Anwendung > Speicher > Gemeinsamer Speicher sehen Sie jetzt die Anzahl der von einem Ursprung verwendeten Bytes.

Die Vorher- und Nachher-Anzeige zeigt, wie viele Byte für den freigegebenen Speicherplatz verwendet werden.

Mit gemeinsamem Speicher erhalten Sie unbegrenzten standortübergreifenden Schreibzugriff auf den Speicher mit datenschutzfreundlichem Lesezugriff.

Chromium-Problem: 324464353

Web SQL wurde vollständig eingestellt

In Chrome 119 wurde Web SQL eingestellt und das Token für den Test zur Einstellung wurde entfernt. Sie können Web SQL also nicht mehr verwenden.

Aus diesem Grund wurde der Bereich Web SQL aus dem Bereich Anwendung in den DevTools entfernt.

Chromium-Problem: 327254049.

Verbesserungen am Bereich „Abdeckung“

Diese Version enthält einige Updates für den Bereich Abdeckung:

  • In der Statusleiste werden jetzt die Nutzungsstatistiken für gefilterte URLs korrekt berechnet. Bisher wurden nicht die Nutzungsdaten der untergeordneten Elemente addiert, die dem Filter entsprachen, sondern die Daten des übergeordneten Elements.

Vorher und nachher werden die entsprechenden Kinderstatistiken korrekt berechnet.

  • Die Farbe des verwendeten Codes ist jetzt grau statt grün, um die Sichtbarkeit zu verbessern, insbesondere für Menschen mit Grünblindheit.

Vorher und nachher: Die Farbe des verwendeten Codes wurde zu Grau geändert.

Chromium-Problem: 41494198, 329253687.

Das Steuerfeld „Ebenen“ wird möglicherweise eingestellt

Das Steuerfeld Ebenen wird aufgrund der geringen Nutzung möglicherweise bald eingestellt. Oben im Steuerfeld wird jetzt ein Warnbanner angezeigt.

Das Warnbanner oben im Bereich „Ebenen“, das auf die mögliche Einstellung hinweist

Du kannst deine Meinung und Bedenken mitteilen, bevor das Team die endgültige Entscheidung trifft, das Panel einzustellen.

Einstellung des JavaScript-Profilers: Phase 4, finale Phase

In dieser Version wurde das Steuerfeld JS-Profiler vollständig eingestellt und kann nicht mehr reaktiviert werden.

Wenn Sie die CPU-Leistung erfassen möchten, verwenden Sie das Steuerfeld Leistung.

Chromium-Problem: 40262073.

Sonstige Highlights

Hier sind einige wichtige Fehlerkorrekturen und Verbesserungen in dieser Version:

  • Netzwerk:
    • Ein Fehler beim falschen Parsen von mehrzeiligen Cookies wurde behoben (325410304).
    • Die Vorschau des Aufrufstacks in der Spalte Initiator wurde korrigiert (327665602).
  • Leistungsüberwachung: Die Kästchen für die Erfassung von Daten sind jetzt mit denen in der restlichen Benutzeroberfläche identisch (1467464).
  • Quellen: Syntaxhervorhebung für XHTML-Dokumente hinzugefügt (327940244).
  • Einstellungen > Geräte: Das alte Galaxy Fold wurde durch das neuere Galaxy Z Fold 5 (40113439) ersetzt.
  • Leistung: Bei der Suche mit Strg/Cmd + F werden jetzt alle übereinstimmenden Suchergebnisse hervorgehoben (1523279).
  • Entwicklerressourcen: Es werden jetzt auch Ressourcen angezeigt, die über Spracherweiterungen geladen werden, z. B. die Chrome-Erweiterung „C/C++ DevTools Support (DWARF)“ (40746829).
  • Leistung: Der zugeschnittene Aufrufstapel und sein schlechtes Layout auf dem Tab Zusammenfassung wurden korrigiert (325314708).
  • Seitenleiste: Schließen-Schaltflächen können jetzt fokussiert werden, sodass Bereiche über die Tastatur geschlossen werden können.

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.

Neu in den DevTools

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