Neuerungen in den Entwicklertools (Chrome 105)

Jecelyn Yeen

Schritt-für-Schritt-Wiedergabe im Rekorder

Sie können jetzt im Bereich Aufzeichnung einen Haltepunkt setzen und einen User Flow Schritt für Schritt wiedergeben.

Klicken Sie auf den blauen Punkt neben einem Schritt, um einen Haltepunkt festzulegen. Wiederholen Sie den User Flow. Die Wiedergabe wird pausiert, bevor der Schritt ausgeführt wird. Hier können Sie die Wiedergabe fortsetzen, einen Schritt ausführen oder die Wiedergabe abbrechen.

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

Weitere Informationen finden Sie in der Referenz zu Rekorderfunktionen.

Schritt-für-Schritt-Wiedergabe im Rekorder

Chromium-Problem: 1257499

Unterstützung von Mauszeigerbewegungen im Bereich „Aufzeichnung“

Im Rekorder können Sie jetzt manuell einen Mauszeiger-Cursor-Schritt in eine Aufnahme einfügen.

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

Wenn Sie den Nutzerfluss jetzt wiedergeben, schlägt er fehl, da der Aufzeichnungstool während der Aufzeichnung keine Mauszeiger-Ereignisse automatisch erfasst. Fügen Sie dazu manuell einen Schritt hinzu, bei dem der Nutzer den Mauszeiger auf die Auswahl bewegt, bevor er auf den Menüpunkt klickt.

Unterstützung von Mauszeigerbewegungen im Rekorder

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 die Grundursachen für einen Largest Contentful Paint (LCP) ermitteln.

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

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

LCP im Bereich „Leistungsstatistiken“

Chromium-Problem: 1326481

Textblitze (FOIT, FOUT) als mögliche Grundursachen für Layoutänderungen identifizieren

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

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

Unter WebFont-Laden und -Rendering optimieren erfahren Sie, wie Sie Layout-Verschiebungen verhindern.

FOUT im Bereich „Leistungsstatistiken“

Chromium-Probleme: 1334628, 1328873

Protokoll-Handler im Bereich „Manifest“

Sie können jetzt mit den DevTools die Registrierung des URL-Protokoll-Handlers für progressive Web-Apps (PWAs) testen.

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

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

Installieren Sie beispielsweise diese Demo-PWA. Geben Sie im Bereich Protocol Handlers (Protokoll-Handler) „americano“ ein und klicken Sie auf Test protocol (Protokoll testen), um die Kaffeeseite in der PWA zu öffnen.

Protokoll-Handler im Bereich „Manifest“

Chromium-Probleme: 1300613

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

Anhand des Symbols für die oberste Ebene können Sie sich das Konzept der obersten Ebene vorstellen und sich ansehen, wie sich die Inhalte der obersten Ebene ändern.

Das Element <dialog> ist vor Kurzem plattformübergreifend stabil geworden. Wenn Sie ein Dialogfeld öffnen, wird es in eine oberste Ebene verschoben. Inhalte der obersten Ebene werden über allen anderen Inhalten gerendert.

Klicken Sie in dieser Demo auf Dialogfeld öffnen.

Zur besseren Visualisierung der Elemente der obersten Ebene fügt DevTools dem DOM-Baum einen Container der obersten Ebene (#top-layer) hinzu. Es 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 im Container der obersten Ebene neben dem Element oder seinem Hintergrund auf die Schaltfläche Entdecken.

Klicken Sie neben dem Baumelement der obersten Ebene (z. B. dem Dialogfeldelement) auf das Symbol Oberste Ebene, um zum Container der obersten Ebene zu wechseln.

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

Chromium-Problem: 1313690

Wasm-Debugging-Informationen zur Laufzeit anhängen

Sie können jetzt während der Laufzeit DWARF-Fehlerbehebungsinformationen für wasm anhängen. Bisher wurde im Bereich Quellen nur das Anhängen von Quellkarten an JavaScript- und Wasm-Dateien unterstützt.

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

ALT_TEXT_HERE

Chromium-Problem: 1341255

Unterstützung für Live-Bearbeitung während des Debuggings

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

In Chrome 104 wurde die Funktion Frame neu starten in den Entwicklertools wieder eingeführt. Sie können die Funktion, in der Sie sich gerade befinden, jedoch nicht bearbeiten. Es ist üblich, dass Entwickler eine Funktion pausieren und dann bearbeiten.

Mit diesem Update wird die Funktion vom Debugger automatisch mit den folgenden Einschränkungen neu gestartet:

  • Während der Pausierung 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

@scope at-Regeln im Bereich „Stile“ ansehen und bearbeiten

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

Die @scope-At-Regeln sind Teil der CSS-Spezifikation für die Kaskade und Vererbung – Level 6. Mit diesen Regeln können Entwickler den Geltungsbereich von Stilregeln in CSS festlegen.

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

@scope bei Regeln im Bereich „Stile“

Chromium-Problem: 1337777

Verbesserungen bei Quellzuordnungen

Hier sind einige Fehlerkorrekturen an Quellkarten, die das Debuggen insgesamt verbessern:

  • In den DevTools werden Quellzuordnungs-IDs mit Satzzeichen jetzt korrekt aufgelöst. Einige moderne Minifier (z. B. esbuild) erstellen Quellkarten, in denen IDs mit nachfolgenden Satzzeichen (Komma, Klammern, Semikolon) zusammengeführt werden.
  • In den Entwicklertools werden jetzt Quellzuordnungsnamen für Konstruktoren mit einem super-Aufruf aufgelöst. ALT_TEXT_HERE
  • Die URL-Indexierung der Quellkarte für doppelte kanonische URLs wurde korrigiert. Bisher wurden in einigen Dateien keine Unterbrechungen aktiviert, weil doppelte kanonische URLs vorhanden waren.

Chromium-Problem: 1335338, 1333411

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Entfernen Sie ein Schlüssel/Wert-Paar für lokalen Speicher korrekt aus der Tabelle im Bereich Anwendung > Lokaler Speicher, wenn es gelöscht wird. (1339280)
  • Die Farbvorschau wird jetzt korrekt angezeigt, wenn Sie sich CSS-Dateien im Bereich Quellen ansehen. Bisher waren ihre Positionen falsch. (1340062)
  • Die CSS-Flex- und ‑Rasterelemente werden jetzt im Bereich Layout und als Symbole 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 Anzeigenskript des Creators verfügbar, wenn in DevTools das Script 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 als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

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