Neuerungen in den Entwicklertools (Chrome 105)

Jecelyn Yeen

Schritt-für-Schritt-Wiedergabe in der Rekorder App

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

Um einen Haltepunkt festzulegen, klicken Sie auf den blauen Punkt neben einem Schritt. Geben Sie Ihren User Flow wieder. Die erneute Wiedergabe wird angehalten, bevor der Schritt ausgeführt wird. Von hier aus können Sie die erneute Wiedergabe fortsetzen, einen Schritt ausführen oder die Wiedergabe abbrechen.

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

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

Schritt-für-Schritt-Wiedergabe in der Rekorder App

Chromium-Problem: 1257499

Mouseover-Ereignis im Rekorder-Bereich unterstützen

Der Rekorder unterstützt jetzt das manuelle Hinzufügen eines Mouseover-Schritts (Mauszeiger darüber).

Diese Demo zeigt ein Pop-up-Menü, wenn der Mauszeiger darauf bewegt wird. Versuchen Sie, einen User Flow aufzuzeichnen, und klicken Sie auf einen Menüpunkt.

Wenn Sie den User Flow jetzt erneut wiedergeben, schlägt er fehl, da der Rekorder Mouseover-Ereignisse während der Aufzeichnung nicht automatisch erfasst. Sie können dieses Problem beheben, indem Sie manuell einen Schritt hinzufügen. Bewegen Sie den Mauszeiger auf den Selektor, bevor Sie auf den Menüpunkt klicken.

Unterstützung von Mouseover-Ereignissen in der Rekorder App

Chromium-Problem: 1257499

Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“

Der LCP ist ein wichtiger, nutzerorientierter Messwert zur Messung der wahrgenommenen Ladegeschwindigkeit. Sie können jetzt die kritischen Pfade und Grundursachen eines Largest Contentful Paint (LCP) ermitteln.

Klicken Sie in einer Leistungsaufzeichnung auf der Zeitachse auf das LCP-Logo. Im Bereich Details können Sie sich den LCP-Wert ansehen, erfahren, wie Sie Ressourcen korrigieren können, die den LCP verlangsamen, und den kritischen Pfad für die LCP-Ressource.

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

LCP im Bereich „Leistungsstatistiken“

Chromium-Problem: 1326481

Textflaschen (FOIT, FOUT) als mögliche Ursachen für Layout Shifts identifizieren

Im Bereich Leistungsstatistiken werden jetzt als mögliche Ursachen für Layoutverschiebungen blitzschnelle unsichtbare Texte (FOIT) und unformatierten Text (FOUT) erkannt.

Klicken Sie auf einen Screenshot im Track Layout Shifts, um die möglichen Ursachen einer Layoutverschiebung zu sehen.

Informationen zum Verhindern von Layoutverschiebungen finden Sie unter Das Laden und Rendern von WebFonts optimieren.

FOUT im Bereich „Leistungsstatistiken“

Chromium-Probleme: 1334628, 1328873

Protokoll-Handler im Bereich „Manifest“

Du kannst jetzt mit den Entwicklertools die Registrierung von URL-Protokoll-Handlern für progressive Web-Apps (PWA) testen.

Durch die Registrierung des URL-Protokoll-Handlers können installierte PWAs Links verarbeiten, die ein bestimmtes Protokoll verwenden (z.B. magnet, web+example) und so die Nutzererfahrung zu verbessern.

Gehen Sie im Bereich Application > Manifest (Anwendung > Manifest) zum Abschnitt Protokoll-Handler. Hier können Sie alle verfügbaren Protokolle ansehen und testen.

Installieren Sie beispielsweise diese Demo-PWA. Geben Sie im Bereich Protokoll-Handler "americano" ein und klicken Sie auf Protokoll testen, um die Coffee-Seite in der PWA zu öffnen.

Protokoll-Handler im Bereich „Manifest“

Probleme mit Chromium: 1300613

Badge der obersten Ebene im Steuerfeld „Elemente“

Verwenden Sie das Badge 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 browserübergreifend stabil. Wenn Sie ein Dialogfeld öffnen, wird es in einer obersten Ebene platziert. 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 wird in den Entwicklertools der DOM-Baum ein Container der obersten Ebene (#top-layer) hinzugefügt. Sie befindet sich nach dem schließenden </html>-Tag.

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

Klicken Sie neben dem Baumelement der obersten Ebene, z. B. dem Dialogfeldelement, auf das Badge oberste Ebene, um zum Container der obersten Ebene zu springen.

Badge der obersten Ebene im Steuerfeld „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 wurde im Bereich Quellen nur das Anhängen von Quellzuordnungen an JavaScript- und Wasm-Dateien unterstützt.

Öffnen Sie eine Wasm-Datei im Bereich Quellen. Klicken Sie mit der rechten Maustaste in den Editor und wählen Sie Add DWARF debug info... (DWARF-Debugging-Informationen hinzufügen...) aus, um bei Bedarf Informationen zur Fehlerbehebung 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 starten zu müssen.

In Chrome 104 wird die Funktion Frame-Neustart in den Entwicklertools wieder verfügbar sein. Sie konnten die Funktion, in der Sie aktuell pausiert sind, jedoch nicht bearbeiten. Es ist üblich, dass Entwickler eine Funktion unterbrechen und diese dann bearbeiten, wenn sie pausiert sind.

Mit diesem Update startet der Debugger die Funktion automatisch mit den folgenden Einschränkungen neu:

  • Im pausierten Modus kann nur die oberste Funktion bearbeitet werden
  • Kein rekursiver Aufruf derselben Funktion weiter unten im Stack

Live-Bearbeitung während der Fehlerbehebung

Chromium-Problem: 1334484

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

Sie können die CSS-@scope-At-Regeln jetzt im Bereich Stile ansehen und bearbeiten.

Die @scope at-Regeln sind Teil der CSS-Spezifikation für Kaskadierung und Übernahmestufe 6. Mit diesen 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 At-Regeln von @scope an. Klicken Sie auf die Regeldeklaration, um sie zu bearbeiten.

@Scope bei Regeln im Bereich „Stile“

Chromium-Problem: 1337777

Verbesserte Quellzuordnung

Im Folgenden finden Sie einige Korrekturen für Quellzuordnungen, um die Fehlerbehebung insgesamt zu verbessern:

  • In den Entwicklertools werden Source Maps-Kennungen jetzt korrekt mit Satzzeichen aufgelöst. Einige moderne Minifier (z. B. esbuild) erstellen Quellzuordnungen, in denen Kennzeichnungen mit nachfolgenden Satzzeichen (Komma, Klammern, Semikolon) zusammengeführt werden.
  • In den Entwicklertools werden Quellzuordnungsnamen für Konstruktoren jetzt mit einem super-Aufruf aufgelöst. ALT_TEXT_HERE
  • Die Quellzuordnungs-URL-Indexierung für doppelte kanonische URLs wurde korrigiert. Bisher wurden in einigen Dateien aufgrund von doppelten kanonischen URLs keine Haltepunkte aktiviert.

Chromium-Problem: 1335338, 1333411

Verschiedene Highlights

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

  • Entfernen Sie ein Schlüssel/Wert-Paar für den lokalen Speicher ordnungsgemäß aus der Tabelle im Bereich Anwendung > Lokaler Speicher, wenn es gelöscht wird. (1339280)
  • Die Farbvorschauen werden jetzt korrekt angezeigt, wenn CSS-Dateien im Steuerfeld Quellen angezeigt werden. Zuvor waren ihre Positionen an der falschen Stelle platziert. (1340062)
  • Die flexiblen CSS-Elemente und -Rasterelemente werden einheitlich im Bereich Layout angezeigt. Außerdem werden sie im Steuerfeld Elemente als Logos angezeigt. Bisher fehlten die flexiblen und Rasterelemente an beiden Stellen willkürlich. (1340441, 1273992)
  • Wenn die Entwicklertools das Skript gefunden haben, durch das der Frame als Anzeige gekennzeichnet wurde, ist für Anzeigenframes ein neuer Link zum Creator-Anzeigenskript verfügbar. Sie können einen Frame über Anwendung > Frames öffnen. (1217041)

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