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, inspect 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:

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

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 data-automate-Attribut als Selektor verwendet. Starten Sie eine neue Aufnahme 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. Bisher 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 auf der Zeitachse Frames die neue Framekategorie „Teilweise präsentierte Frames“ angezeigt.

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“ immer noch visuelle Aktualisierungen zu sehen sind.

Mit der neuen Funktion „Teilweise präsentierte Frames“ soll intuitiver betont werden, 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 erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59