Neuerungen in den Entwicklertools (Chrome 100)

Jecelyn Yeen

Chrome 100

Auf die 100. Chrome-Version! Die Chrome-Entwicklertools bieten Entwicklern auch weiterhin zuverlässige Tools, mit denen sie im Web arbeiten können. Nehmen Sie sich einen Moment Zeit, um sich auf dem Tab Neue Funktionen durchzusehen, um die Meilensteine zu feiern.

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

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

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

@supports-Regeln in Regeln ansehen und bearbeiten

Chromium-Probleme: 1222574, 1222573

Verbesserungen am Rekorder-Bereich

Allgemeine Selektoren standardmäßig unterstützen

Beim Festlegen eines eindeutigen Selektors während einer Aufzeichnung werden im Bereich Rekorder jetzt automatisch Elemente mit den folgenden Attributen bevorzugt:

  • Daten-Test-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 über diese Demoseite. Geben Sie eine E-Mail-Adresse ein und achten Sie auf den Selektorwert.

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

Allgemeine Selektoren standardmäßig unterstützen

Auswahl der Aufnahme anpassen

Sie können die Auswahl einer Aufzeichnung anpassen, wenn Sie nicht die gängigen Auswahlelemente verwenden.

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

Auswahl der Aufnahme anpassen

Das Ergebnis der benutzerdefinierten Auswahl

Aufnahme umbenennen

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

Aufnahme umbenennen

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

Während der Fehlerbehebung können Sie jetzt im Bereich Quellen den Mauszeiger auf eine Klasse oder Funktion bewegen, um eine Vorschau der zugehörigen Eigenschaften zu sehen. Bisher wurden nur der Funktionsname und ein Link zur Position im Quellcode angezeigt.

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

Chromium-Problem: 1049947

Teilweise präsentierte Frames im Steuerfeld „Leistung“

Bei der Leistungsaufnahme wird jetzt auf der Zeitachse von Frames die neue Frame-Kategorie „Teilweise präsentierte Frames“ angezeigt.

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

Das kann bei den Nutzern Verwirrung stiften, da auf den Screenshots dieser „abgelegten Frames“ immer noch visuelle Aktualisierungen angezeigt werden.

Mit der neuen Funktion "Teilweise präsentierte Frames" soll intuitiver darauf hingewiesen werden, dass zwar einige Inhalte nicht rechtzeitig im Frame angezeigt werden, aber das Problem ist nicht so schwerwiegend, dass visuelle Aktualisierungen komplett blockiert werden.

Teilweise präsentierte Frames im Steuerfeld „Leistung“

Chromium-Problem: 1261130

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • iPhone-User-Agent-Strings für emulierte Geräte aktualisiert. Alle iPhone-Versionen nach 5 haben einen User-Agent-String mit iPhone OS 13_2_3. 1289553
  • Sie können ein 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 die Namen von Bereichsvariablen jetzt korrekt angezeigt. Bisher wurden im Bereich Quellen die Variablennamen für minimierte Bereiche angezeigt, obwohl eine Quellzuordnung angegeben wurde. (1294682)
  • Im Bereich Quellen wird die Scrollposition beim Seitenaufbau jetzt korrekt wiederhergestellt. Zuvor wurde die Position nicht korrekt wiederhergestellt, was zu Unannehmlichkeiten beim Debugging führte. 1294422

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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