Neuerungen in den Entwicklertools (Chrome 103)

Jecelyn Yeen

Doppelklick- und Rechtsklickereignisse im Bereich „Recorder“ erfassen

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

Doppelklick- und Rechtsklickereignisse im Bereich „Recorder“ erfassen

In diesem Beispiel können Sie eine Aufzeichnung starten und versuchen, die folgenden Schritte auszuführen:

  • Doppelklicken Sie auf die Karte, um sie zu vergrößern.
  • Klicken Sie mit der rechten Maustaste auf die Karte und wählen Sie eine Aktion aus dem Kontextmenü aus.

Wenn Sie wissen möchten, wie Recorder 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 button-Wert eines normalen Mausklicks ist primary.

Chromium-Probleme: 1300839, 1322879, 1299701, 1323688

Neuer Zeitspannen- und Snapshotmodus im Lighthouse-Bereich

Mit Lighthouse können Sie jetzt die Leistung Ihrer Website über das Laden der Seite hinaus messen.

Neuer Zeitspannen- und Snapshotmodus im Lighthouse-Bereich

Das Lighthouse-Panel unterstützt jetzt drei Modi für die Analyse von Aufrufabfolgen:

  • Mit Navigationsberichten wird der Aufbau einer einzelnen Seite analysiert. Die Navigation ist der häufigste Berichtstyp. Alle Lighthouse-Berichte vor der aktuellen Version sind Navigationsberichte.
  • Mit Zeitspannenberichten wird ein beliebiger Zeitraum analysiert, normalerweise einer, der Nutzerinteraktionen enthält.
  • Mit Snapshot-Berichten werden Seiten in einem bestimmten Zustand analysiert, in der Regel nach Nutzerinteraktionen.

Sehen wir uns beispielsweise die Leistung des Hinzufügens von Artikeln zum Einkaufswagen auf dieser Demoseite an. Wählen Sie den Modus Zeitraum aus und klicken Sie auf Zeitraum starten. Scrollen Sie und legen Sie einige Artikel in den Einkaufswagen. Klicken Sie anschließend auf Zeitraum beenden, um einen Lighthouse-Bericht zu den Nutzerinteraktionen zu erstellen.

Zeitspannenmodus

Weitere Informationen zu den jeweiligen Anwendungsfällen, Vorteilen und Einschränkungen der einzelnen Modi finden Sie unter Nutzerabläufe in Lighthouse.

Chromium-Problem: 1291284

Neuerungen bei Leistungsstatistiken

Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“

DevTools zoomt jetzt basierend auf dem Mauszeiger und nicht auf der Position des Playheads.Mit der neuesten cursorbasierten Zoomfunktion können Sie den Mauszeiger an eine beliebige Stelle im Track bewegen und sofort in den gewünschten Bereich zoomen.

Weitere Informationen

Chromium-Problem: 1313382

Löschen einer Performance-Aufzeichnung bestätigen

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

Löschen einer Performance-Aufzeichnung bestätigen

Chromium-Problem: 1318087

Bereiche im Elementbereich neu anordnen

Sie können die Bereiche im Elemente-Bereich jetzt nach Belieben neu anordnen.

Wenn Sie DevTools beispielsweise auf einem schmalen Bildschirm öffnen, wird der Bereich Bedienungshilfen unter der Schaltfläche Mehr anzeigen ausgeblendet. Wenn Sie häufig Probleme mit der Barrierefreiheit beheben, können Sie das Fenster jetzt nach vorn ziehen, um leichter darauf zuzugreifen.

Bereiche im Elementbereich neu anordnen

Chromium-Problem: 1146146

Farbe außerhalb des Browsers auswählen

Mit den Entwicklertools können Sie jetzt eine Farbe außerhalb des Browsers auswählen. Bisher konnten Sie nur eine Farbe im Browser auswählen.

Klicken Sie im Bereich Stile auf eine beliebige Farbvorschau, um eine Farbauswahl zu öffnen. Mit der Pipette können Sie Farben an beliebiger Stelle auswählen.

Farbe außerhalb des Browsers auswählen

Chromium-Problem: 1245191

Verbesserte Inline-Wertvorschau beim Debuggen

Der Debugger zeigt jetzt die Inline-Wertevorschau korrekt an.

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

Verbesserte Inline-Wertvorschau beim Debuggen

Chromium-Problem: 1316340

Unterstützung großer Blobs für virtuelle Authentifikatoren

Auf dem Tab WebAuthn gibt es jetzt das neue Kästchen Supports large blob (Unterstützt großes Blob) für virtuelle Authentifikatoren.

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

Unterstützung großer Blobs für virtuelle Authentifikatoren

Chromium-Problem: 1321803

Neue Tastenkombinationen im Quellenbereich

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

  • Die Navigationsleiste (links) kann mit Strg / Befehl + Umschalttaste + Y ein- oder ausgeblendet werden.
  • Die Debugger-Seitenleiste (rechts) kann mit Strg / Befehlstaste + Umschalt + H ein- und ausgeblendet werden.

Neue Tastenkombinationen für den Bereich „Quellen“

Chromium-Probleme: 1226363

Verbesserungen bei Quellzuordnungen

Bisher traten bei Entwicklern zufällige Fehler in folgenden Fällen auf:

  • Fehlerbehebung mit CodePen-Beispiel
  • Quellspeicherort von Leistungsproblemen in einem Codepen-Beispiel identifizieren
  • Der Tab Komponente fehlt, wenn React DevTools aktiviert ist

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

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

Chromium-Probleme: 1319828, 1318635, 1305475

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.