Neuerungen in den Entwicklertools (Chrome 105)

Jecelyn Yeen

Schrittweise Wiedergabe im Rekorder

Sie können jetzt einen Haltepunkt festlegen und einen User Flow Schritt für Schritt im Recorder-Bereich wiedergeben.

Wenn Sie einen Haltepunkt festlegen möchten, klicken Sie neben einem Schritt auf den blauen Punkt. Spielen Sie den User Flow noch einmal ab. Die Wiedergabe wird vor der Ausführung des Schritts pausiert. Hier können Sie die Wiedergabe fortsetzen, einen Schritt ausführen oder die Wiedergabe abbrechen.

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

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

Schrittweise Wiedergabe im Rekorder

Chromium-Problem: 1257499

Unterstützung für das Mauszeigerereignis im Bereich „Recorder“

Im Rekorder kann jetzt manuell ein Schritt zum Bewegen des Mauszeigers (Hover) in eine Aufnahme eingefügt werden.

In dieser Demo wird ein Pop-up-Menü beim Hovern angezeigt. Versuchen Sie, einen User Flow aufzuzeichnen und auf ein Menüelement zu klicken.

Wenn Sie den Nutzerfluss jetzt noch einmal wiedergeben, schlägt er fehl, weil der Recorder Mauszeigerereignisse während der Aufzeichnung nicht automatisch erfasst. Um dieses Problem zu beheben, fügen Sie manuell einen Schritt hinzu, um den Mauszeiger auf den Selektor zu bewegen, bevor Sie auf das Menüelement klicken.

Unterstützung für das Hovern über Ereignisse im Recorder

Chromium-Problem: 1257499

Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“

Der LCP ist ein wichtiger, nutzerorientierter Messwert, mit dem die wahrgenommene Ladegeschwindigkeit ermittelt wird. Sie können jetzt die kritischen Pfade und Ursachen für einen Largest Contentful Paint (LCP) ermitteln.

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

Unter Performance Insights erfahren Sie, wie Sie mit dem Bereich umsetzbare Statistiken erhalten und die Leistung Ihrer Website verbessern können.

LCP im Bereich „Leistungsstatistiken“

Chromium-Problem: 1326481

FOIT- und FOUT-Probleme als potenzielle Ursachen für Layout Shifts identifizieren

Im Bereich Leistungsstatistiken werden jetzt FOIT (Flash of Invisible Text) und FOUT (Flash of Unstyled Text) als mögliche Ursachen für Layoutverschiebungen erkannt.

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

Unter Webfont-Laden und ‑Rendering optimieren finden Sie Informationen dazu, wie Sie Layout Shifts 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 von URL-Protokoll-Handlern für Progressive Web-Apps (PWAs) zu testen.

Durch die Registrierung von URL-Protokoll-Handlern können installierte PWAs Links verarbeiten, die ein bestimmtes Protokoll (z.B. magnet, web+example) verwenden, um eine bessere Integration zu ermöglichen.

Rufen Sie den Bereich Protokollhandler über den Bereich Anwendung > Manifest auf. Hier können Sie alle verfügbaren Protokolle ansehen und testen.

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

Protokoll-Handler im Manifestbereich

Chromium-Probleme: 1300613

Symbol für die oberste Ebene im Bereich „Elemente“

Mit dem Symbol für die oberste Ebene können Sie das Konzept der obersten Ebene nachvollziehen und visualisieren, wie sich die Inhalte der obersten Ebene ändern.

Das <dialog>-Element ist seit Kurzem browserübergreifend stabil. Wenn Sie ein Dialogfeld öffnen, wird es in eine obere Ebene eingefügt. Inhalte der obersten Ebene werden über allen anderen Inhalten gerendert.

Klicken Sie in dieser Demo auf Dialogfeld öffnen.

Damit die Elemente der obersten Ebene besser visualisiert werden können, fügt DevTools dem DOM-Baum einen Container für die oberste Ebene (#top-layer) hinzu. Es befindet sich nach dem schließenden </html>-Tag.

Wenn Sie vom Container-Element der obersten Ebene zum Element der obersten Ebene wechseln möchten, klicken Sie neben dem Element oder seinem Hintergrund im Container der obersten Ebene auf die Schaltfläche reveal (einblenden).

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

Symbol für die oberste Ebene im Bereich „Elemente“

Chromium-Problem: 1313690

Wasm-Debugging-Informationen zur Laufzeit anhängen

Sie können jetzt DWARF-Debugging-Informationen für WASM zur Laufzeit anhängen. Bisher konnten im Bereich Quellen nur Source Maps an JavaScript- und Wasm-Dateien angehängt werden.

Öffnen Sie eine Wasm-Datei im Bereich Quellen. 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 des Debuggings unterstützen

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

In Chrome 104 wird in den Entwicklertools die Funktion Frame neu starten wieder eingeführt. Sie konnten die Funktion, in der Sie sich gerade befinden, jedoch nicht bearbeiten. Entwickler unterbrechen häufig eine Funktion und bearbeiten sie dann im pausierten Zustand.

Mit diesem Update startet der Debugger die Funktion automatisch neu. Dabei gelten die folgenden Einschränkungen:

  • Während der Pause kann nur die oberste Funktion bearbeitet werden.
  • Kein rekursiver Aufruf derselben Funktion weiter unten im Stack

Live-Bearbeitung während des Debuggings

Chromium-Problem: 1334484

„@scope“ für Regeln im Bereich „Styles“ ansehen und bearbeiten

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

Die @scope-Regeln sind Teil der CSS Cascading and Inheritance Level 6-Spezifikation. Mit diesen Regeln können Entwickler Stilregeln in CSS eingrenzen.

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

@scope-Regeln im Bereich „Stile“

Chromium-Problem: 1337777

Verbesserungen bei Quellzuordnungen

Hier sind einige Korrekturen an Quellzuordnungen, die die allgemeine Fehlerbehebung verbessern:

  • DevTools löst jetzt Quellzuordnungs-IDs mit Satzzeichen korrekt auf. Einige moderne Minifier (z. B. esbuild) erstellen Quellzuordnungen, in denen Bezeichner 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 Indexierung von Quellzuordnungs-URLs für doppelte kanonische URLs wurde korrigiert. Zuvor wurden Breakpoints in einigen Dateien aufgrund doppelter kanonischer URLs nicht aktiviert.

Chromium-Problem: 1335338, 1333411

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

  • 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 Sie CSS-Dateien im Bereich Quellen ansehen. Bisher waren ihre Positionen falsch. (1340062)
  • CSS-Flex- und ‑Grid-Elemente werden jetzt einheitlich im Bereich Layout und als Badges im Bereich Elemente angezeigt. Bisher fehlten die Flex- und Grid-Elemente an beiden Stellen zufällig. (1340441, 1273992)
  • Für Anzeigenframes ist ein neuer Link Creator Ad Script verfügbar, wenn in den DevTools das Skript gefunden wurde, das dazu geführt hat, dass der Frame als Anzeige gekennzeichnet wurde. Sie können einen Frame über Anwendung > Frames öffnen. (1217041)

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.