Neuerungen in den Entwicklertools (Chrome 105)

Jecelyn Yeen

Detaillierte Wiedergabe im Rekorder

Sie können jetzt im Bereich Rekorder einen Haltepunkt festlegen und einen Nutzerfluss Schritt für Schritt wiederholen.

Klicken Sie auf den blauen Punkt neben einem Schritt, um einen Haltepunkt festzulegen. Spielen Sie Ihren User Flow noch einmal ab. Die Wiederholung wird angehalten, bevor der Schritt ausgeführt wird. Von hier aus können Sie die Wiederholung fortsetzen, einen Schritt ausführen oder die Wiederholung abbrechen.

Mit dieser Funktion können Sie Ihren User Flow ganz einfach vollständig visualisieren und Fehler beheben.

Weitere Informationen finden Sie in der Referenz zu Rekorder-Funktionen.

Detaillierte Wiedergabe im Rekorder

Chromium-Problem: 1257499

Mouseover-Ereignis im Rekorder-Bereich unterstützen

In der Rekorder App können Sie jetzt manuell einen Mouseover-Schritt (Hover) in einer Aufzeichnung hinzufügen.

In dieser Demo wird ein Pop-up-Menü angezeigt, wenn der Mauszeiger auf die Schaltfläche bewegt wird. Versuchen Sie, einen User Flow aufzuzeichnen, und klicken Sie auf einen Menüpunkt.

Wenn Sie den User Flow jetzt wiederholen, schlägt er fehl, da der Rekorder Mouseover-Ereignisse während der Aufzeichnung nicht automatisch erfasst. Um dieses Problem zu beheben, fügen Sie manuell einen Schritt hinzu, um den Mauszeiger auf die Auswahl zu bewegen, bevor Sie auf den Menüpunkt klicken.

Mouseover-Ereignis in der Rekorder-App unterstützen

Chromium-Problem: 1257499

Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“

Der LCP ist ein wichtiger nutzerorientierter Messwert zum Messen der wahrgenommenen Ladegeschwindigkeit. Sie können jetzt die kritischen Pfade und Ursachen eines Largest Contentful Paint (LCP) ermitteln.

Klicken Sie in einer Leistungsaufzeichnung auf der Zeitachse auf das LCP-Symbol. Im Bereich Details sehen Sie den LCP-Wert, erfahren, wie Sie Ressourcen beheben, die den LCP verlangsamen, und den kritischen Pfad für die LCP-Ressource ansehen.

Unter Leistungsstatistiken erfahren Sie, wie Sie mithilfe des Panels umsetzbare Informationen abrufen und die Leistung Ihrer Website verbessern können.

LCP im Bereich „Leistungsstatistiken“

Chromium-Problem: 1326481

Textblitze (FOIT, FOUT) als mögliche Ursachen für Layoutverschiebungen identifizieren

Im Bereich Leistungsstatistiken werden jetzt blinkende Farben von unsichtbarem Text (FOIT) und nicht formatierten Text (FOUT) als mögliche Ursachen für Layoutverschiebungen erkannt.

Wenn Sie sich die möglichen Ursachen für Layoutverschiebungen ansehen möchten, klicken Sie auf einen Screenshot im Track Layout Shifts.

Unter WebFont-Laden und -Rendering optimieren erfahren Sie, wie Sie Layoutverschiebungen verhindern können.

FOUT im Bereich „Leistungsstatistiken“

Chromium-Probleme: 1334628, 1328873

Protokoll-Handler im Manifestbereich

Sie können jetzt die Entwicklertools verwenden, um die Registrierung des URL-Protokoll-Handlers für Progressive Web Apps (PWAs) zu testen.

Mit der Registrierung des URL-Protokoll-Handlers können installierte PWAs Links verarbeiten, für die ein bestimmtes Protokoll verwendet wird (z.B. magnet, web+example).

Rufen Sie im Bereich Anwendung > Manifest den Abschnitt Protokoll-Handler auf. Hier können Sie alle verfügbaren Protokolle ansehen und testen.

Installieren Sie beispielsweise diese Demo-PWA. Geben Sie im Abschnitt Protokoll-Handler „americano“ ein und klicken Sie auf Protokoll testen, um die Kaffeeseite in der PWA zu öffnen.

Protokoll-Handler im Manifestbereich

Chromium-Probleme: 1300613

Badge der obersten Ebene im Bereich „Elemente“

Verwenden Sie das Logo der obersten Ebene, um das Konzept der obersten Ebene zu verstehen und zu visualisieren, wie sich der Inhalt der obersten Ebene ändert.

Das <dialog>-Element ist seit Kurzem in allen Browsern stabil geworden. Wenn Sie ein Dialogfeld öffnen, wird es in einem obersten Layer platziert. Die Inhalte der obersten Ebene werden über allen anderen Inhalten gerendert.

Klicken Sie in dieser Demo auf Dialogfeld öffnen.

Zur Visualisierung der Elemente der obersten Ebene fügen die Entwicklertools einen Container für die oberste Ebene (#top-layer) zum DOM-Baum hinzu. Es befindet sich nach dem schließenden </html>-Tag.

Wenn Sie vom Containerelement der obersten Ebene zum Baumelement der obersten Ebene wechseln möchten, klicken Sie im Container der obersten Ebene neben dem Element oder dem Hintergrund auf die Schaltfläche Anzeigen.

Klicken Sie neben dem Baumelement der obersten Ebene (z. B. dem Dialogelement) auf das Badge top-layer, um zum Container der obersten Ebene zu springen.

Badge der obersten Ebene im Bereich „Elemente“

Chromium-Problem: 1313690

Wasm-Debugging-Informationen zur Laufzeit anhängen

Sie können jetzt DWARF-Debugging-Informationen für Wasm während der Laufzeit anhängen. Bisher konnten im Bereich Quellen Quellzuordnungen nur an JavaScript- und Wasm-Dateien angehängt werden.

Öffnen Sie im Bereich Quellen eine Wasm-Datei. Klicken Sie mit der rechten Maustaste in den Editor und wählen Sie DWARF-Debugging-Informationen hinzufügen... aus, um Debugging-Informationen bei Bedarf anzuhängen.

ALT_TEXT_HERE

Chromium-Problem: 1341255

Live-Bearbeitung während der Fehlerbehebung unterstützen

Sie können jetzt die oberste Funktion im Stack bearbeiten, ohne den Debugger neu zu starten.

In Chrome 104 wird in den Entwicklertools wieder die Funktion „Frame neu starten“ verwendet. Sie konnten die Funktion, in der Sie derzeit pausiert sind, jedoch nicht bearbeiten. Es kommt häufig vor, dass Entwickler eine Funktion unterbrechen und diese dann bearbeiten, wenn sie pausiert ist.

Mit dieser Aktualisierung startet der Debugger die Funktion automatisch neu, wobei die folgenden Einschränkungen gelten:

  • Im pausierten Modus kann nur die oberste Funktion bearbeitet werden
  • Kein rekursiver Aufruf für dieselbe Funktion weiter unten im Stack

Live-Bearbeitung während der Fehlerbehebung

Chromium-Problem: 1334484

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

Sie können jetzt die @scope-at-Regeln für CSS im Bereich Stile ansehen und bearbeiten.

Die @scope at-Regeln sind Teil der Spezifikation der CSS-Cascading and Inheritance Level 6. Mithilfe dieser Regeln können Entwickler Stilregeln in CSS festlegen.

Öffnen Sie diese Demoseite und prüfen Sie den Hyperlink im <div class=”dark-theme”>-Element. Sehen Sie sich im Bereich Stile die @scope-at-Regeln an. Klicken Sie auf die Regeldeklaration, um sie zu bearbeiten.

@scope bei Regeln im Bereich „Stile“

Chromium-Problem: 1337777

Source Map-Verbesserungen

Im Folgenden finden Sie einige Fehlerbehebungen für Quellzuordnungen, um das Debugging insgesamt zu verbessern:

  • Die Entwicklertools lösen Source Maps-Bezeichner jetzt korrekt mit Satzzeichen. Einige moderne Minifier (z. B. esbuild) generieren Quellzuordnungen, bei denen Kennungen mit nachfolgenden Satzzeichen (Komma, Klammern, Semikolon) zusammengeführt werden.
  • Die Entwicklertools lösen jetzt Quellzuordnungsnamen für Konstruktoren mit einem super-Aufruf auf. ALT_TEXT_HERE
  • Die URL-Indexierung der Source Map für doppelte kanonische URLs wurde korrigiert. Bisher wurden aufgrund doppelter kanonischer URLs in einigen Dateien keine Haltepunkte aktiviert.

Chromium-Problem: 1335338, 1333411

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Entfernen Sie nach dem Löschen ein Schlüssel/Wert-Paar für den lokalen Speicher ordnungsgemäß aus der Tabelle im Bereich Anwendung > Lokaler Speicher. (1339280)
  • Die Farbvorschauen werden jetzt korrekt angezeigt, wenn CSS-Dateien im Bereich Quellen angezeigt werden. Zuvor waren ihre Positionen falsch platziert. 1340062
  • Die CSS-Flex- und -Rasterelemente werden einheitlich im Bereich Layout sowie als Badges im Steuerfeld Elemente angezeigt. Bisher fehlten an beiden Stellen die flexiblen und die Rasterelemente nach dem Zufallsprinzip. (1340441, 1273992)
  • Für Anzeigen-Frames ist ein neuer Creator-Anzeigen-Script-Link verfügbar, wenn die Entwicklertools das Script gefunden haben, durch das der Frame als Anzeige gekennzeichnet wurde. Sie können einen Frame über Anwendung > Frames öffnen. (1217041)

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