Neuerungen in den Entwicklertools (Chrome 105)

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.

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.

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.

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.

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 zum Abschnitt Protokoll-Handler über Application > Bereich Manifest. 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.

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.

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.

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

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.

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 Kennungen zusammengeführt werden. mit nachfolgenden Satzzeichen (Komma, Klammern, Semikolon).
• In den Entwicklertools werden Quellzuordnungsnamen für Konstruktoren jetzt mit einem super-Aufruf aufgelöst.
• 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 unter Anwendung > Lokaler Speicher, wenn er 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: (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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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