Neuerungen in den Entwicklertools (Chrome 100)

Jecelyn Yeen

Chrome 100

Auf die 100. Chrome-Version! Chrome DevTools bietet Entwicklern weiterhin zuverlässige Tools für die Webentwicklung. Klicken Sie auf dem Tab Das ist neu, um sich die Meilensteine anzusehen.

Wie gewohnt können Sie sich das aktuelle What’s New in DevTools video ansehen, indem Sie auf das Bild klicken.

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

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

@supports-Regeln ansehen und bearbeiten

Chromium-Probleme: 1222574, 1222573

Verbesserungen am Rekorder-Bedienfeld

Unterstützung gängiger Selektoren standardmäßig

Beim Bestimmen eines eindeutigen Selektors während der Aufzeichnung werden im Bereich Recorder 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 Selektoren, die in der Testautomatisierung verwendet werden.

Starten Sie beispielsweise eine neue Aufnahme mit dieser Demoseite. Geben Sie eine E‑Mail-Adresse ein und sehen Sie sich den Wert der Auswahl an.

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

Unterstützung gängiger Selektoren standardmäßig

Auswahlfeld für die Aufnahme anpassen

Wenn Sie die allgemeinen Selektoren nicht verwenden, können Sie den Selektor einer Aufzeichnung anpassen.

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 sehen Sie sich den Selector-Wert ([data-automate=email-address]) an.

Auswahlfeld für die Aufnahme anpassen

Das Ergebnis der Auswahl eines benutzerdefinierten Selektors

Aufnahme umbenennen

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

Aufnahme umbenennen

Klassen-/Funktionseigenschaften in der Vorschau anzeigen, wenn der Mauszeiger darauf bewegt wird

Sie können jetzt während des Debuggens mit dem Mauszeiger auf eine Klasse oder Funktion im Bereich Quellen zeigen, um eine Vorschau der zugehörigen Eigenschaften zu sehen. Bisher wurden nur der Funktionsname und ein Link zum Speicherort im Quellcode angezeigt.

Klassen-/Funktionseigenschaften in der Vorschau anzeigen, wenn der Mauszeiger darauf bewegt wird

Chromium-Problem: 1049947

Teilweise angezeigte Frames im Bereich „Leistung“

In der Leistungsaufzeichnung wird jetzt in der Zeitachse Frames eine neue Frame-Kategorie „Teilweise präsentierte Frames“ angezeigt.

Bisher wurden in der Zeitachse Frames alle Frames mit verzögerter Main-Thread-Arbeit als „verlorene Frames“ dargestellt. Es gibt jedoch Fälle, in denen einige Frames möglicherweise weiterhin visuelle Updates (z.B. beim Scrollen) durch den Compositor-Thread erzeugen.

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

Die neue Meldung „Teilweise präsentierte Frames“ soll intuitiver darauf hinweisen, dass einige Inhalte nicht rechtzeitig im Frame präsentiert 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 wichtige Korrekturen in dieser Version:

  • Die iPhone-User-Agent-Strings für emulierte Geräte wurden aktualisiert. Alle iPhone-Versionen nach dem iPhone 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 jetzt beim Debuggen mit einer Quellzuordnung die Namen von Bereichsvariablen korrekt angezeigt. Bisher wurden im Bereich Quellen minimierte Namen von Bereichsvariablen angezeigt, obwohl eine Quellzuordnung bereitgestellt wurde. (1294682)
  • Im Bereich Quellen wird die Scrollposition jetzt beim Laden der Seite korrekt wiederhergestellt. Bisher wurde die Position nicht richtig wiederhergestellt, was die Fehlersuche erschwert hat. (1294422)

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.