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. Mit Chrome Autofill können Sie Formulare auf Websites bequem automatisch mit gespeicherten Adressen ausfüllen lassen. Im neuen Autofill-Bereich können Sie die Zuordnung zwischen Ihren Formularfeldern, den vorhergesagten Autofill-Werten und den gespeicherten Daten prüfen.

Testen Sie das neue Feld auf dieser Demoseite mit Testdaten:

  1. Klicken Sie unter Profil-Autofill 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 aus und wählen Sie die Adresse aus der Drop-down-Liste aus.

Das Autofill-Steuerfeld wird automatisch geöffnet und zeigt erkannte Formularfelder, Felder, die durch Autofill abgeleitet wurden, und gespeicherte Werte an.

Der Bereich „Autofill“

Weitere Informationen finden Sie unter Google Forms lernen und Autofill.

Erweiterte Netzwerkdrosselung für WebRTC

Da den benutzerdefinierten Profilen für die Netzwerkdrosselung jetzt paketbezogene Parameter hinzugefügt wurden, können Sie Ihre WebRTC-Anwendungen direkt in den DevTools drosseln. Das ist nützlich, um Ihre Echtzeitkommunikation zu testen, ohne Software von Drittanbietern verwenden zu müssen.

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

Die Situation 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 in den an Einstellungen > Drosselung und wählen Sie es im Bereich Netzwerk aus.

Hier können Sie die neuen Parameter ausprobieren. Erlauben Sie 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 von scrollgesteuerten Animationen im Bereich „Animationen“

Im Steuerfeld Animationen können Sie jetzt scrollgesteuerte Animationen untersuchen.

Probieren Sie die Funktion auf dieser Demoseite aus. Ö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 Animationsgruppe mit einem -Symbol angezeigt. Sie können es sich jetzt ansehen. In der Gruppe werden Pixelwerte anstelle von Millisekunden in der Zeitachse angezeigt.

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

Auf dem Tab Elemente > Stile wird die Unterstützung für CSS-Schachtelung verbessert. Geschachtelte Stile werden jetzt mit Einzug und in geschweiften Klammern angezeigt. Mit CSS-Nesting können Sie CSS-Regeln gruppieren und so für weniger Code und mehr Struktur sorgen.

Vorher und nachher: Einrücken und Einschließen verschachtelter Stile in geschweifte Klammern.

Chromium-Problem: 40166888.

Erweiterter Bereich „Leistung“

Diese Version enthält mehrere Verbesserungen am Bereich Leistung.

Funktionen und ihre untergeordneten Elemente im Flame-Chart ausblenden

Um das Rauschen aus dem Flame-Diagramm unter Leistung > Main herauszufiltern, können Sie jetzt irrelevante Funktionen und ihre 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 Bild zeigt, wie die Benutzeroberfläche vor und nach dem Hinzufügen eines Kontextmenüs aussieht, mit dem Sie Funktionen und ihre untergeordneten Elemente ausblenden können.

Funktionen mit ausgeblendeten untergeordneten Elementen haben rechts eine -Schaltfläche Drop-down. Bewege den Mauszeiger darauf, um die Anzahl der ausgeblendeten untergeordneten Elemente zu sehen, und klicke 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 Trace zurücksetzen aus.

Pfeile von ausgewählten Initiatoren zu den Ereignissen, die sie ausgelöst haben

Bisher wurde bei Auswahl eines Ereignisses auf dem Hauptpfad ein Pfeil vom Initiator zum ausgewählten Ereignis angezeigt. Auf dem Track wird jetzt auch ein Pfeil vom ausgewählten Ereignis zum Ereignis angezeigt, das es ausgelöst hat, sofern vorhanden.

Die Vorher- und Nachher-Ansicht mit Pfeilen von ausgewählten zu initiierten Ereignissen und benannten Links anstelle von „Aufdecken“.

Außerdem haben alle Initiatoren jetzt Felder vom Typ Initiator for auf dem Tab Summary (Zusammenfassung). Sowohl die Felder vom Typ Initiator for als auch die Felder vom Typ Initiated by (Initiiert von) enthalten benannte Links anstelle von Reveal (Aufdecken).

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

Eine wichtige Änderung ist die neue Opt-in-Einstellung JS-Sampling aktivieren. Diese Einstellung ist standardmäßig deaktiviert.

Vor und nach dem Hinzufügen einer Einstellung für das JS-Sampling mit Einwilligung.

Wenn Sie das JS-Sampling aktivieren, werden dem Leistungstrace detaillierte JavaScript-Callstacks hinzugefügt. Dies kann jedoch die Berichterstellung verlangsamen.

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

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

Die Grundlagen zur Verwendung des Lighthouse-Bereichs 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 Objektgruppen, die nicht auf Konstruktoren basieren. Wenn Sie den Mauszeiger auf solche Objekte bewegen, wird im Bereich Arbeitsspeicher eine Kurzinfo mit einer kurzen Beschreibung und einem Link zu einer längeren Beschreibung in der Dokumentation angezeigt.

Das Bild zeigt einen Vergleich von vorher und nachher. Im Bild nachher wird ein beschreibender Tooltip für spezielle Objektgruppen angezeigt.

Chromium-Problem: 41490331.

„Anwendung“ > „Speicherupdates“

Diese Version enthält einige Updates für Anwendung > Speicher.

Für Shared Storage verwendete Bytes

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

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

Mit Shared Storage haben Sie unbegrenzten, websiteübergreifenden Schreibzugriff mit datenschutzfreundlichem Lesezugriff.

Chromium-Problem: 324464353.

Web SQL wurde vollständig eingestellt

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

Entsprechend wurde der Bereich Web SQL aus dem Bereich Anwendung in den Entwicklertools entfernt.

Chromium-Problem: 327254049.

Verbesserungen am Bereich „Abdeckung“

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

  • In der Statusleiste werden die Nutzungsstatistiken für gefilterte URLs jetzt korrekt berechnet. Bisher wurden nicht die Nutzungsdaten von Kindern, die dem Filter entsprachen, sondern die Daten ihrer Eltern addiert.

Die Statistiken für übereinstimmende untergeordnete Konten werden vor und nach der Berechnung korrekt angezeigt.

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

Das Bild zeigt den Code vor und nach dem Ändern der Farbe des verwendeten Codes in Grau.

Chromium-Problem: 41494198, 329253687.

Das Steuerfeld „Ebenen“ wird möglicherweise eingestellt

Das Steuerfeld „Ebenen“ wird möglicherweise bald eingestellt, da es nur selten genutzt wird. Oben im Bereich wird jetzt ein Warnbanner angezeigt.

Das Warnbanner oben im Ebenenbedienfeld, in dem die mögliche Einstellung angekündigt wird.

Teilen Sie uns Ihre Meinung und Bedenken mit, bevor das Team die endgültige Entscheidung zur Einstellung des Bereichs trifft.

Einstellung des JavaScript-Profilers: Phase 4, final

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

Um die CPU-Leistung zu profilieren, verwenden Sie den Bereich „Leistung“.

Chromium-Problem: 40262073.

Sonstige Highlights

Hier sind einige wichtige Fehlerbehebungen 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 Kontrollkästchen sind jetzt dieselben wie im Rest der Benutzeroberfläche (1467464).
  • Quellen: Die Syntaxhervorhebung für XHTML-Dokumente wurde hinzugefügt (327940244).
  • Einstellungen > Geräte: Das alte Galaxy Fold wurde durch das neuere Galaxy Z Fold5 (40113439) ersetzt.
  • Leistung: Alle übereinstimmenden Suchergebnisse werden jetzt hervorgehoben, wenn Sie mit Strg/Cmd + F suchen (1523279).
  • Entwicklerressourcen: Hier werden jetzt auch Ressourcen angezeigt, die über Spracherweiterungen geladen werden, z. B. die Chrome-Erweiterung „C/C++ DevTools Support (DWARF)“ (40746829).
  • Leistung: Der abgeschnittene Callstack und das schlechte Layout auf dem Tab Zusammenfassung wurden korrigiert (325314708).
  • Schublade: Schließen-Schaltflächen können jetzt fokussiert werden, sodass Bereiche über die Tastatur geschlossen werden können.

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.