Neu in den Entwicklertools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Neues Autofill-Steuerfeld

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

Testen Sie den neuen Bereich auf dieser Demoseite mit Testdaten:

  1. Klicken Sie unter 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. Öffnen Sie die Entwicklertools 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 die erkannten Formularfelder, die mit Autofill abgeleiteten Felder und die gespeicherten Werte an.

Das Autofill-Steuerfeld

Weitere Informationen finden Sie unter Formulare kennenlernen und Autofill.

Verbesserte Netzwerkdrosselung für WebRTC

Durch die neuen paketbezogenen Parameter zu benutzerdefinierten Netzwerkdrosselungsprofilen kannst du jetzt deine WebRTC-Anwendungen direkt in den Entwicklertools drosseln. Dies ist nützlich, um die Implementierung Ihrer Echtzeitkommunikation zu testen, ohne Software von Drittanbietern verwenden zu müssen.

Die neuen Parameter sind: Paketverlust (in Prozent), Länge der Paketwarteschlange (Anzahl der Pakete) und check_box Neuanordnung von Paketen.

Der Vorher und nach dem Hinzufügen neuer paketbezogener Optionen zu benutzerdefinierten Drosselungsprofilen.

Um eine WebRTC-Verbindung zu drosseln, geben Sie die paketbezogenen Parameter in einem benutzerdefinierten Profil unter Einstellungen Einstellungen > Drosselung an und wählen Sie sie im Steuerfeld Netzwerk aus.

Probieren Sie die neuen Parameter auf dieser Demoseite aus. Erlaube der Seite zuerst, 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 Scroll-Animationen im Bereich „Animationen“

Im Bereich Animationen können Sie sich jetzt scroll-gesteuerte Animationen ansehen.

Probieren Sie die Funktion auf dieser Demoseite aus. Öffnen Sie den Bereich Animationen und aktualisieren Sie die Seite, um scrollbare Animationen zu erfassen.

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

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

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

Der Tab Elemente > Stile verbessert die Unterstützung von CSS-Verschachtelungen und zeigt jetzt verschachtelte Stile mit Einzug und in geschweiften Klammern an. CSS-Verschachtelungen sind eine Möglichkeit, CSS-Regeln zu gruppieren, um sie weniger ausführlich und strukturierter zu machen.

Das Vorher- und Nachher-Hinzufügen des Einzugs und das Einschließen verschachtelter Stile in Klammern.

Chromium-Problem: 40166888.

Bereich „Optimierte Leistung“

In dieser Version wurden mehrere Verbesserungen im Bereich Leistung vorgenommen.

Funktionen und ihre untergeordneten Elemente im Flame-Diagramm ausblenden

Zum Herausfiltern von Rauschen aus dem Flame-Diagramm unter Leistung > Haupt können Sie jetzt irrelevante Funktionen und die zugehörigen untergeordneten Elemente 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.

Bei Funktionen mit ausgeblendeten untergeordneten Elementen wird rechts die Schaltfläche arrow_drop_down Drop-down angezeigt. Bewegen Sie den Mauszeiger darüber, um die Anzahl der ausgeblendeten untergeordneten Elemente 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 hatten, wurde im Track ein Pfeil vom Initiator zum ausgewählten Ereignis angezeigt. Jetzt wird im Track auch ein Pfeil vom ausgewählten Ereignis zu dem von ihm initiierten Ereignis angezeigt, falls vorhanden.

Pfeile vor und nach der Anzeige von ausgewählten bis initiierten Ereignissen und benannten Links anstelle von „Anzeigen“.

Außerdem haben alle Initiatoren jetzt auf dem Tab Summary das Feld Initiator for (Initiator für) und die Felder Initiator for und Initiator for haben benannte Links statt Reveal.

Chromium-Probleme: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Im Bereich Lighthouse wird jetzt Lighthouse 11.6.0 ausgeführt. Eine vollständige Liste der Änderungen finden Sie hier.

Zu den wichtigsten Änderungen gehört die neue Einstellung check_box_outline_blank JS-Sampling aktivieren. Diese Einstellung ist standardmäßig deaktiviert.

Vor und nach dem Hinzufügen einer Opt-in-Einstellung für die JS-Stichprobenerhebung.

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

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

Nachdem der Lighthouse-Bericht erstellt wurde, ist der Trace unter more_vert im Menü Tools > Ungedrosselten Trace anzeigen verfügbar.

Grundlegende Informationen zur Verwendung des Bereichs 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 haben 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 ein Link zu einer längeren Beschreibung in der Dokumentation angezeigt.

Das Vorher- und Nachher-Bild zeigt eine beschreibende Kurzinfo für spezielle Gruppen von Objekten.

Chromium-Problem: 41490331.

Anwendung > Speicherupdates

Mit dieser Version wurden unter Anwendung > Speicher einige Updates vorgenommen.

Für freigegebenen Speicher verwendete Byte

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

Die Vorher- und Nachher-Anzeige, wie viele Byte für den gemeinsamen Speicher verwendet werden.

Gemeinsam genutzter Speicher bietet unbegrenzten, websiteübergreifenden Speicher Schreibzugriff mit datenschutzfreundlichem Lesezugriff.

Chromium-Problem: 324464353.

Web SQL wurde vollständig eingestellt

Chrome hat Web SQL in Version 119 eingestellt und in dieser Version das Token für den Test zur Einstellung entfernt, sodass Sie Web SQL nicht mehr verwenden können.

In diesem Fall hat die Entwicklertools den Abschnitt Web SQL aus dem Bereich Application (Anwendung) entfernt.

Chromium-Problem: 327254049.

Verbesserungen beim Abdeckungsbereich

In dieser Version wurden im Bereich Abdeckung einige Änderungen vorgenommen:

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

Der Vorher- und Nachher-Messwert zur korrekten Berechnung der übereinstimmenden untergeordneten Statistikwerte

  • Die Farbe des verwendeten Codes ist jetzt grau statt grün, um die Sichtbarkeit zu verbessern, insbesondere bei Nicht-Grün-Farbblindheit.

Vorher und nach dem Ändern der Farbe des verwendeten Codes in Grau.

Chromium-Problem: 41494198, 329253687.

Das Steuerfeld „Ebenen“ wird möglicherweise nicht mehr unterstützt

Der Bereich Ebenen wird möglicherweise bald eingestellt, da er nur selten genutzt wird. Im Steuerfeld wird jetzt oben ein Warnungsbanner angezeigt.

Das Warnbanner mit dem Hinweis auf die potenzielle Einstellung oben im Bereich „Ebenen“

Sie können uns gern Ihre Gedanken und Bedenken mitteilen, bevor das Team die endgültige Entscheidung trifft, das Panel einzustellen.

Einstellung von JavaScript Profiler: Phase vier, endgültig

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

Verwenden Sie den Bereich Leistung, um ein Profil der CPU-Leistung zu erstellen.

Chromium-Problem: 40262073.

Verschiedene Highlights

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

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

Vorschaukanäle herunterladen

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

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

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 101

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 gekündigt.

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