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 Ihre Implementierung der 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 > an. Drosselung und wählen Sie sie im Bereich 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

Die Elemente > Auf dem Tab Styles wurde die Unterstützung von CSS-Verschachtelungen verbessert. Jetzt werden verschachtelte Stile mit Einzug und in geschweiften Klammern angezeigt. 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

Um Geräusche aus dem Flame-Diagramm herauszufiltern, rufen Sie Leistung > Main verwenden, können Sie jetzt irrelevante Funktionen und deren untergeordnete 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.

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.

Vorher- und Nachher-Pfeile 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 anstelle von 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.

Den Trace finden Sie unter more_vert im Menü Tools > Sehen Sie sich den ungedrosselten Trace an, nachdem der Lighthouse-Bericht erstellt wurde.

Grundlegende Informationen zur Verwendung des Bereichs Lighthouse in den Entwicklertools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.

Chromium-Problem: 772558.

Kurzinfos für spezielle Kategorien in Memory > 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 einige Aktualisierungen für Anwendung vorgenommen. > Speicher:

Für freigegebenen Speicher verwendete Byte

Über die Anwendung > Speicher > Im Abschnitt 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 nicht die Nutzungsdaten der untergeordneten Publisher addiert, die dem Filter entsprochen haben, sondern die Daten der Eltern.

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 eine nichtgrüne Sehschwäche.

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 wird 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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