Neuerungen in den Entwicklertools (Chrome 100)

Jecelyn Yeen

Chrome 100

Auf die 100. Chrome-Version! Die Chrome-Entwicklertools bieten weiterhin zuverlässige Tools für die Webentwicklung. Klickt euch auf dem Tab Das ist neu um, um die Meilensteine zu feiern.

Wie gewohnt können Sie sich das aktuelle Video zu den Neuerungen in den Entwicklertools ansehen, indem Sie auf das Bild klicken.

Regeln im Bereich „Stile“ ansehen und bearbeiten

Sie können die CSS-@supports-At-Rules jetzt im Bereich Styles aufrufen und bearbeiten. Durch diese Änderungen können Sie einfacher in Echtzeit mit den Attributsregeln experimentieren. Öffnen Sie diese Demoseite, prüfen Sie das <div class=”box”>-Element und sehen Sie sich die At-Regeln von @supports im Bereich Stile an. Klicken Sie auf die Deklaration der Regel, um sie zu bearbeiten.

@supports at-Regeln ansehen und bearbeiten

Chromium-Probleme: 1222574, 1222573

Verbesserungen am Steuerfeld für Rekorder

Standardmäßig gängige Selektoren unterstützen

Wenn während der Aufnahme ein eindeutiger Selector festgelegt wird, werden im Bereich Rekorder jetzt automatisch Elemente mit den folgenden Attributen bevorzugt:

  • Datentest-ID
  • Datentest
  • Daten-Qa
  • data-cy
  • data-test-id
  • data-qa-id
  • Datentests

Die oben genannten Attribute sind gängige Auswahlmöglichkeiten, die in der Testautomatisierung verwendet werden.

Starten Sie beispielsweise eine neue Aufnahme mit dieser Demoseite. Geben Sie eine E-Mail-Adresse ein und beobachten Sie den Auswahlwert.

Da für das E-Mail-Element data-testid definiert ist, wird es automatisch als Selektor statt der Attribute id oder class verwendet.

Gängige Auswahlmöglichkeiten standardmäßig unterstützen

Auswahl für die Aufnahme anpassen

Sie können die Auswahl einer Aufzeichnung anpassen, wenn Sie keine allgemeinen Selektoren verwenden.

Auf dieser Demoseite wird beispielsweise das data-automate-Attribut als Selector verwendet. Starte eine neue Aufnahme und gib data-automate als Selector-Attribut ein. Geben Sie eine E-Mail-Adresse ein und beobachten Sie den Selector-Wert ([data-automate=email-address]).

Auswahl der Aufnahme anpassen

Das Ergebnis der Auswahl der benutzerdefinierten Auswahl

Aufzeichnungen umbenennen

Sie können eine Aufnahme jetzt im Bereich Aufnahmegerät über die Schaltfläche „Bearbeiten“ (Bleistiftsymbol) neben dem Titel der Aufnahme umbenennen.

Aufnahme umbenennen

Vorschau der Klassen-/Funktionseigenschaften beim Bewegen des Mauszeigers

Sie können jetzt während der Fehlerbehebung im Bereich Quellen den Mauszeiger auf eine Klasse oder Funktion bewegen, um eine Vorschau der Eigenschaften anzusehen. Bisher wurden nur der Funktionsname und ein Link zu seinem Speicherort im Quellcode angezeigt.

Vorschau der Klassen-/Funktionseigenschaften beim Bewegen des Mauszeigers

Chromium-Problem: 1049947

Teilweise angezeigte Frames im Bereich „Leistung“

Bei der Leistungsaufzeichnung wird jetzt auf der Zeitachse Frames die neue Frame-Kategorie „Teilweise dargestellte Frames“ angezeigt.

Bisher wurden in der Zeitachse Frames alle Frames mit verzögerter Hauptthread-Arbeit als „ausgelassene Frames“ dargestellt. Es gibt jedoch Fälle, in denen einige Frames weiterhin visuelle Aktualisierungen (z.B. Scrollen) durch den Compositor-Thread ausführen.

Das führt zu Verwirrung bei den Nutzern, da die Screenshots dieser „verlorenen Frames“ weiterhin visuelle Updates widerspiegeln.

Mit der neuen Meldung „Teilweise dargestellte Frames“ soll intuitiver angezeigt werden, dass einige Inhalte zwar nicht rechtzeitig im Frame angezeigt werden, das Problem aber nicht so schwerwiegend ist, dass visuelle Updates vollständig blockiert werden.

Teilweise dargestellte Frames im Bereich „Leistung“

Chromium-Problem: 1261130

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Die User-Agent-Strings für iPhones wurden für emulierte Geräte aktualisiert. Alle iPhone-Versionen nach 5 haben eine User-Agent-Zeichenfolge mit iPhone OS 13_2_3. (1289553)
  • Sie können Snippet jetzt direkt als JavaScript-Datei speichern. Bisher mussten Sie die Dateiendung .js manuell anhängen. (1137218)
  • Im Bereich Quellen werden beim Debuggen mit einer Quellkarte jetzt korrekte Variablennamen angezeigt. Bisher wurden im Bereich Quellen minimierte Variablennamen angezeigt, obwohl eine Quellzuordnung angegeben wurde. (1294682)
  • Im Bereich Quellen wird die Scrollposition beim Laden der Seite jetzt korrekt wiederhergestellt. Bisher wurde die Position nicht korrekt wiederhergestellt, was zu Problemen bei der Fehlerbehebung führte. (1294422)

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Ü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 dies tun.

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 DevTools

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