Neuerungen in den Entwicklertools (Chrome 100)

Jecelyn Yeen

Chrome 100

Auf die 100. Chrome-Version! Die Chrome-Entwicklertools bieten Entwicklern weiterhin zuverlässige Tools zum Erstellen von Websites. Nehmen Sie sich einen Moment Zeit und klicken Sie verschiedene Bereiche auf dem Tab Das ist neu, um die Meilensteine zu feiern.

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

@supports bei Regeln im Bereich „Stile“ ansehen und bearbeiten

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

@supports bei Regeln ansehen und bearbeiten

Chromium-Probleme: 1222574, 1222573

Verbesserungen beim Rekorder-Bereich

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:

  • data-testid
  • data-test
  • Daten-Qa
  • Data-Cy
  • data-test-id
  • Daten-QA-ID
  • data-testing

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

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

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

Standardmäßig gängige Selektoren unterstützen

Auswahl der Aufnahme anpassen

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

Auf dieser Demoseite wird beispielsweise das Attribut data-automate als Selektor verwendet. Starten Sie eine neue Aufzeichnung und geben Sie data-automate als Selektorattribut ein. Geben Sie eine E-Mail-Adresse ein und beobachten Sie den Selektorwert ([data-automate=email-address]).

Auswahl der Aufnahme anpassen

Ergebnis der benutzerdefinierten Auswahl

Aufzeichnungen umbenennen

Sie können eine Aufzeichnung jetzt im Bereich Rekorder umbenennen. Klicken Sie dazu neben dem Titel der Aufzeichnung auf die Schaltfläche „Bearbeiten“ (Bleistiftsymbol).

Aufzeichnungen umbenennen

Vorschau von Klassen-/Funktionsattributen anzeigen, wenn der Mauszeiger darauf bewegt wird

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. Zuvor wurden nur der Funktionsname und ein Link zur entsprechenden Stelle im Quellcode angezeigt.

Vorschau von Klassen-/Funktionsattributen anzeigen, wenn der Mauszeiger darauf bewegt wird

Chromium-Problem: 1049947

Teilweise dargestellte Frames im Bereich „Leistung“

Bei der Leistungsaufzeichnung wird jetzt die neue Framekategorie „Teilweise präsentierte Frames“ angezeigt auf der Zeitachse für Frames ein.

Bisher wurden auf der Zeitachse Frames alle Frames mit verzögertem Hauptthread als „verworfene Frames“ dargestellt. Es gibt jedoch Fälle, in denen einige Frames immer noch visuelle Aktualisierungen (z.B. Scrollen) erzeugen, die durch den Compositor-Thread ausgelöst werden.

Dies führt zu Verwirrung bei den Nutzern, da auf den Screenshots dieser „verworfenen Frames“ weiterhin visuelle Aktualisierungen zu sehen sind.

Die neue Option „Teilweise präsentierte Frames“ soll intuitiver darauf hinweisen, dass zwar einige Inhalte nicht rechtzeitig im Frame präsentiert werden, das Problem aber nicht so schwerwiegend ist, dass visuelle Aktualisierungen vollständig blockiert werden.

Teilweise dargestellte Frames im Bereich „Leistung“

Chromium-Problem: 1261130

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

  • Die iPhone-User-Agent-Strings für emulierte Geräte wurden aktualisiert. Alle iPhone-Versionen ab 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 Debugging mit der Source Map jetzt die Namen von Bereichsvariablen korrekt angezeigt. Bisher wurden im Bereich Quellen minimierte Bereichsvariablennamen angezeigt, obwohl die Quellzuordnung bereitgestellt wurde. (1294682)
  • Im Bereich Quellen wird die Scrollposition beim Seitenaufbau jetzt korrekt wiederhergestellt. Bisher wurde die Position nicht korrekt wiederhergestellt, was bei der Fehlerbehebung zu Problemen führte. (1294422)

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