Neuerungen in den Entwicklertools (Chrome 103)

Jecelyn Yeen

Doppelklick- und Rechtsklickereignisse im Bereich „Rekorder“ erfassen

Im Bereich Rekorder können jetzt Doppelklick- und Rechtsklickereignisse erfasst werden.

Starten Sie in diesem Beispiel eine Aufzeichnung und versuchen Sie Folgendes:

• Klicke doppelt auf die Karte, um sie zu vergrößern.
• Klicke mit der rechten Maustaste auf die Karte und wähle eine Aktion aus dem Kontextmenü aus

Wenn Sie wissen möchten, wie Rekorder diese Ereignisse erfasst hat, maximieren Sie die Schritte:

• Doppelklick wird als type: doubleClick erfasst.
• Das Rechtsklick-Ereignis wird als type: click erfasst, aber die Property button ist auf secondary festgelegt. Der Wert button eines normalen Mausklicks ist primary.

Chromium-Probleme: 1300839, 1322879, 1299701, 1323688

Neue Zeitspannen- und Snapshot-Modus im Lighthouse-Steuerfeld

Sie können jetzt Lighthouse verwenden, um die Leistung Ihrer Website über den Seitenaufbau hinaus zu messen.

Im Lighthouse-Bereich werden jetzt drei Modi der User Flow-Messung unterstützt:

• In Navigationsberichten wird ein einzelner Seitenaufbau analysiert. Navigation ist der gängigste Berichtstyp. Alle Lighthouse-Berichte vor der aktuellen Version sind Navigationsberichte.
• In Zeitspannenberichten wird ein beliebiger Zeitraum analysiert, der normalerweise Nutzerinteraktionen enthält.
• Mit Snapshots wird die Seite in einem bestimmten Status analysiert, typischerweise nachdem der Nutzer mit ihr interagiert hat.

Sehen wir uns beispielsweise auf dieser Demoseite die Leistung an, wenn Sie Artikel in den Einkaufswagen legen. Wählen Sie den Modus Zeitspanne aus und klicken Sie auf Zeitspanne starten. Scrollen Sie nach unten und legen Sie einige Artikel in den Einkaufswagen. Klicken Sie anschließend auf Ende, um einen Lighthouse-Bericht der Nutzerinteraktionen zu erstellen.

Unter Nutzerflüsse in Lighthouse erfahren Sie mehr über die besonderen Anwendungsfälle, Vorteile und Einschränkungen der einzelnen Modi.

Chromium-Problem: 1291284

Aktuelle Informationen zu Leistungsstatistiken

Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“

Die Entwicklertools zoomen jetzt basierend auf dem Mauszeiger und nicht der Position des Abspielkopfs heran.Mit dem neuesten cursorbasierten Zoom kannst du deine Maus an eine beliebige Stelle im Track bewegen und heranzoomen.

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

Chromium-Problem: 1313382

Löschen einer Aufführungsaufzeichnung bestätigen

In den Entwicklertools wird jetzt ein Bestätigungsdialogfeld angezeigt, bevor eine Leistungsaufzeichnung gelöscht wird.

Chromium-Problem: 1318087

Bereiche im Steuerfeld „Elemente“ neu anordnen

Sie können Bereiche im Steuerfeld Elemente jetzt nach Belieben neu anordnen.

Wenn Sie beispielsweise die Entwicklertools auf einem schmalen Bildschirm öffnen, wird der Bereich Bedienungshilfen unter der Schaltfläche Mehr anzeigen ausgeblendet. Wenn Sie häufig Probleme mit Bedienungshilfen beheben, können Sie den Bereich jetzt für einen einfacheren Zugriff nach vorne ziehen.

Chromium-Problem: 1146146

Auswählen einer Farbe außerhalb des Browsers

Die Entwicklertools unterstützen jetzt die Auswahl einer Farbe außerhalb des Browsers. Bisher konnten Sie nur im Browser eine Farbe auswählen.

Klicken Sie im Bereich Stile auf eine Farbvorschau, um eine Farbauswahl zu öffnen. Mit der Pipette können Sie überall eine Farbe auswählen.

Chromium-Problem: 1245191

Verbesserte Inline-Wertvorschau während der Fehlerbehebung

Im Debugger werden die Inline-Werte jetzt korrekt in der Vorschau angezeigt.

In diesem Beispiel hat die Funktion double einen Eingabeparameter a und die Variable x. Setzen Sie einen Haltepunkt in die Zeile return und führen Sie den Code aus. In der Inline-Vorschau werden die Werte a und x korrekt angezeigt. Bisher wurde im Debugger nicht der Wert x in der Inline-Vorschau angezeigt.

Chromium-Problem: 1316340

Große Blobs für virtuelle Authenticatoren unterstützen

Auf dem Tab WebAuthn gibt es jetzt das neue Kästchen Unterstützt große Blobs für virtuelle Authenticatoren.

Dieses Kästchen ist standardmäßig deaktiviert. Sie können sie nur für die Authenticatoren mit dem ctap2-Protokoll aktivieren, die residente Schlüssel unterstützen.

Chromium-Problem: 1321803

Neue Tastenkombinationen im Bereich „Quellen“

Im Bereich Quellen sind jetzt zwei neue Tastenkombinationen verfügbar:

• Mit Strg/Befehlstaste + Umschalttaste + Y können Sie die Navigationsseitenleiste (links) ein-/ausblenden.
• Mit Strg/Befehlstaste + Umschalttaste + H können Sie die Debugger-Seitenleiste (rechts) ein-/ausblenden.

Chromium-Probleme: 1226363

Verbesserungen bei Quellzuordnungen

Bisher kam es bei Entwicklern in folgenden Situationen zu zufälligen Fehlern:

• Beispiel für das Debugging mit Codepen
• Quellenort von Leistungsproblemen in einem Codepen-Beispiel ermitteln
• Tab Component fehlt, wenn React-Entwicklertools aktiviert sind

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

• Korrekte Zuordnung zwischen Speicherort und Offset für Inline-Skripts und Quellspeicherort
• Fallback-Informationen für die Position des Frames verwenden
• Relative URLs mit der URL des Frames richtig auflösen

Chromium-Probleme: 1319828, 1318635, 1305475

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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