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 Neuigkeiten in den DevTools ansehen, indem Sie auf das Bild klicken.

@supports-Regeln im Bereich „Styles“ 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 Attributregeln experimentieren. Öffnen Sie diese Demoseite, prüfen Sie das Element <div class=”box”> und sehen Sie sich die At-Rules @supports im Bereich Styles 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

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

Beim Ermitteln einer eindeutigen Auswahl während der Aufnahme werden im Bereich Aufzeichnen jetzt automatisch Elemente mit den folgenden Attributen bevorzugt:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

Starten Sie beispielsweise eine neue Aufnahme auf 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 Auswahl anstelle 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 Aufnahme anpassen, wenn Sie die üblichen Auswahlmöglichkeiten nicht verwenden.

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

Auswahl für die Aufnahme anpassen

Das Ergebnis der Auswahl der benutzerdefinierten Auswahl

Aufnahme 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 Hovern

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

Vorschau der Klassen-/Funktionseigenschaften beim Hovern

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 angezeigte Frames im Bereich „Leistung“

Chromium-Problem: 1261130

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Die User-Agent-Strings für iPhones für emulierte Geräte wurden aktualisiert. Alle iPhone-Versionen ab der 5 haben einen User-Agent-String mit iPhone OS 13_2_3. (1289553)
  • Sie können Snippets 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. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

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 den DevTools

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