Neu in den Entwicklertools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Neuer Autofill-Bereich

Mit dieser Version ist der neue Bereich Autofill in den Entwicklertools verfügbar. Mit Autofill in Chrome können Sie Formulare auf Websites mit gespeicherten Adressen automatisch ausfüllen lassen. Im neuen Bereich Autofill können Sie die Zuordnung zwischen den Formularfeldern, den vorhergesagten Autofill-Werten und den gespeicherten Daten überprüfen.

Probieren Sie den neuen Bereich auf dieser Demoseite mit Testdaten aus:

  1. Klicken Sie in Profil Autofill auf eine der Schaltflächen Formular ausfüllen... und dann auf Senden. Klicken Sie dann im Dialogfeld Adresse speichern? auf Speichern und kehren Sie zur Seite mit dem Formular zurück.
  2. Öffne die Entwicklertools und löse ein Autofill-Ereignis aus: Wähle ein Formularfeld und dann die Adresse aus der Drop-down-Liste aus.

Der Bereich Autofill wird automatisch geöffnet. Dort sehen Sie die erkannten Formularfelder, die von der AutoFill-Funktion abgeleiteten Felder und die gespeicherten Werte.

Das Autofill-Feld.

Weitere Informationen finden Sie unter Formulare lernen und Autofill.

Verbesserte Netzwerkdrosselung für WebRTC

Mit den neuen paketbezogenen Parametern in benutzerdefinierten Netzwerkdrosselungsprofilen können Sie Ihre WebRTC jetzt direkt in den Entwicklertools drosseln. Dies ist nützlich, um Ihre Implementierung der Echtzeitkommunikation zu testen, ohne Drittanbieter-Software verwenden zu müssen.

Die neuen Parameter sind: Paketverlust (Prozent), Länge der Paketwarteschlange (Anzahl der Pakete) und das Flag check_box Paketneureihenfolge.

Die Daten vor und nach dem Hinzufügen 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 Einstellungen > Drosselung an und wählen Sie sie im Bereich Netzwerk aus.

Probieren Sie die neuen Parameter auf dieser Demoseite aus. Zuerst müssen Sie der Seite Zugriff auf die Kamera gewähren. 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 scrollbare Animationen im Animationsbereich

Im Steuerfeld Animationen können Sie jetzt scrollgesteuerte Animationen prüfen.

Du kannst die Funktion auf dieser Demoseite ausprobieren. Öffnen Sie den Bereich Animationen und aktualisieren Sie die Seite, um Scroll-Animationen zu erfassen.

Eine Gruppe scrollbarer Animationen, die mit einem Maussymbol gekennzeichnet sind.

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

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

Der Tab Elemente > Stile verbessert die Unterstützung für CSS-Verschachtelungen und zeigt verschachtelte Stile mit Einrückung und in geschweiften Klammern an. Mithilfe der CSS-Verschachtelung lassen sich CSS-Regeln gruppieren, um die Elemente weniger kompliziert und strukturierter zu gestalten.

Der Wert vor und nach dem Hinzufügen des Einzugs und der Einschließen verschachtelter Stile in geschweifte Klammern.

Chromium-Problem: 40166888.

Bereich „Erweiterte Leistung“

Diese Version enthält mehrere Verbesserungen im Bereich Leistung.

Funktionen und ihre untergeordneten Elemente im Flame-Diagramm ausblenden

Um das Rauschen aus dem Flame-Diagramm unter Leistung > Haupt herauszufiltern, können Sie jetzt irrelevante Funktionen und ihre untergeordneten Funktionen ausblenden. Klicken Sie im Flame-Diagramm mit der rechten Maustaste auf eine Funktion und wählen Sie eine Option aus dem Kontextmenü aus.

Das vor und nach dem Hinzufügen eines Kontextmenüs, mit dem Sie Funktionen und ihre untergeordneten Elemente ausblenden können.

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

Pfeile von ausgewählten Initiatoren zu von ihnen initiierten Ereignissen

Wenn Sie bisher ein Ereignis im Haupt-Track ausgewählt haben, wurde im Track ein Pfeil zum ausgewählten Ereignis angezeigt. Jetzt wird im Track außerdem ein Pfeil angezeigt, das vom ausgewählten Ereignis zum ausgelösten Ereignis führt (falls vorhanden).

Im Vorher-Nachher-Vergleich werden Pfeile von ausgewählten zu ausgelösten Ereignissen und benannten Links anstelle von „Anzeigen“ angezeigt.

Außerdem enthalten alle Initiatoren jetzt auf dem Tab Zusammenfassung die Felder Initiator for (Initiator für) und die Felder Initiator for (Initiator für) und Initiator for (Initiator für) enthalten benannte Links anstelle von Reveal.

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 wichtigsten Änderungen zählt die neue Opt-in-Einstellung check_box_outline_blank für JS-Stichproben aktivieren. Diese Einstellung ist standardmäßig deaktiviert.

Vor und nach dem Hinzufügen einer Opt-in-Einstellung für JS-Stichproben

Wenn Sie JS-Stichproben aktivieren, werden detaillierte JavaScript-Aufrufstacks zum Leistungs-Trace hinzugefügt, aber die Berichterstellung kann sich verlangsamen.

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

Der Trace ist unter more_vert Tools > Ungedrosselten Trace anzeigen verfügbar, nachdem der Lighthouse-Bericht erstellt wurde.

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

Chromium-Problem: 772558.

Kurzinfos für spezielle Kategorien unter „Arbeitsspeicher“ > „Heap-Snapshots“

Heap-Snapshots im Bereich Arbeitsspeicher enthalten spezielle Gruppen von Objekten, 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.

Das Vorher-Nachher-Ergebnis einer beschreibenden Kurzinfo für spezielle Gruppen von Objekten.

Chromium-Problem: 41490331.

Anwendung > Speicherupdates

Diese Version beinhaltet einige Aktualisierungen für Anwendung > Speicher.

Für freigegebenen Speicher verwendete Byte

Unter Anwendung > Speicher > Freigegebener Speicher wird jetzt die Anzahl der von einem Ursprung verwendeten Byte angezeigt.

Im Vorher-Nachher-Vergleich wird angezeigt, wie viele Byte für den freigegebenen Speicher verwendet werden.

Freigegebener Speicher ermöglicht Ihnen unbegrenzten, websiteübergreifenden Schreibzugriff mit datenschutzfreundlichem Lesezugriff.

Chromium-Problem: 324464353.

Web SQL wurde vollständig eingestellt

Chrome hat Web SQL in Version 119 eingestellt und das Testtoken zur Einstellung in dieser Version entfernt, sodass Sie Web SQL nicht mehr verwenden können.

Entsprechend haben die Entwicklertools den Abschnitt Web SQL aus dem Steuerfeld Anwendung entfernt.

Chromium-Problem: 327254049.

Verbesserungen im Bereich „Abdeckung“

In dieser Version wurden einige Aktualisierungen im Bereich Abdeckung vorgenommen:

  • In der Statusleiste werden jetzt die Nutzungsstatistiken für gefilterte URLs korrekt berechnet. Bisher wurden die Nutzungsdaten von untergeordneten Elementen, die dem Filter entsprachen, nicht aufaddiert, sondern mit den Daten der übergeordneten URLs.

Die Statistik vor und nach der korrekten Berechnung der übereinstimmenden untergeordneten Statistiken.

  • Die Farbe des verwendeten Codes ist jetzt grau statt grün, um die Sichtbarkeit zu verbessern, insbesondere bei Farbblindheitsschwäche ohne Grün.

Das Datum vor und nach dem Ändern der Farbe des verwendeten Codes in Grau.

Chromium-Problem: 41494198, 329253687.

Das Fenster „Ebenen“ wurde möglicherweise eingestellt

Der Bereich Ebenen wird wegen geringer Nutzung möglicherweise bald eingestellt. Im Steuerfeld wird jetzt oben ein Warnungsbanner angezeigt.

Das Warnbanner oben im Bereich „Ebenen“ mit der Information über die mögliche Einstellung.

Sie können uns gerne Ihre Gedanken und Bedenken mitteilen, bevor das Team die endgültige Entscheidung zur Einstellung des Panels trifft.

Einstellung des JavaScript Profiler: Phase vier, abgeschlossen

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

Um ein Profil der CPU-Leistung zu erstellen, verwenden Sie den Bereich Leistung.

Chromium-Problem: 40262073.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen und Verbesserungen in dieser Version:

  • Netzwerk:
    • Ein Fehler wurde behoben, bei dem mehrzeilige Cookies falsch geparst wurden (325410304).
    • Die Vorschau des Aufrufstacks in der Spalte Initiator (327665602) wurde korrigiert.
  • Leistungsüberwachung: "Tracking"-Kästchen sind jetzt dieselben wie in der übrigen Benutzeroberfläche (1467464).
  • Quellen: Syntaxhervorhebung für XHTML-Dokumente wurde hinzugefügt (327940244).
  • Einstellungen > Geräte: Das alte Galaxy Fold wird durch das neuere Galaxy Z Fold 5 (40113439) ersetzt.
  • Leistung: Bei der Suche mit Strg/Cmd + F (1523279) werden jetzt alle übereinstimmenden Suchergebnisse hervorgehoben.
  • Entwicklerressourcen: Zeigt jetzt auch Ressourcen an, die über Spracherweiterungen geladen werden, z. B. die Chrome-Erweiterung „C/C++ DevTools Support (DWARF)“ (40746829).
  • Leistung: Der zugeschnittene Aufrufstack und das fehlerhafte Layout auf dem Tab Zusammenfassung (325314708) wurden korrigiert.
  • Leiste: Die Schaltflächen zum Schließen Schließen sind jetzt fokussierbar, sodass Steuerfelder über die Tastatur geschlossen werden können.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59