Neuerungen in den Entwicklertools (Chrome 103)

Jecelyn Yeen

Doppelklick- und Rechtsklickereignisse im Bereich „Aufzeichnung“ erfassen

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

Doppelklick- und Rechtsklickereignisse im Bereich „Aufzeichnung“ erfassen

In diesem Beispiel starten Sie eine Aufzeichnung und führen die folgenden Schritte aus:

  • Doppelklicken Sie auf die Karte, um sie zu maximieren.
  • Klicken Sie mit der rechten Maustaste auf die Karte und wählen Sie im Kontextmenü eine Aktion aus.

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

  • Ein Doppelklick wird als type: doubleClick erfasst.
  • Das Ereignis Rechtsklick 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

Neuer Zeitspanne- und Snapshot-Modus im Lighthouse-Steuerfeld

Mit Lighthouse können Sie jetzt nicht nur die Seitenladegeschwindigkeit, sondern auch die Leistung Ihrer Website messen.

Neue Zeitspannen- und Snapshot-Modus im Lighthouse-Steuerfeld

Das Lighthouse-Steuerfeld unterstützt jetzt drei Modi zur Messung der Aufrufabfolge:

  • In Navigationsberichten wird der Aufbau einer einzelnen Seite analysiert. Navigationsberichte sind der häufigste Berichtstyp. Alle Lighthouse-Berichte vor der aktuellen Version sind Navigationsberichte.
  • In Zeitspannenberichten wird ein beliebiger Zeitraum analysiert, normalerweise einer, der Nutzerinteraktionen enthält.
  • In Snapshot-Berichten wird die Seite in einem bestimmten Zustand analysiert, in der Regel nachdem der Nutzer mit ihr interagiert hat.

Messen wir beispielsweise die Leistung beim Hinzufügen von Artikeln zum Einkaufswagen auf dieser Demoseite. Wählen Sie den Modus Zeitraum aus und klicken Sie auf Zeitraum starten. Scrollen Sie nach unten und legen Sie einige Artikel in den Einkaufswagen. Klicken Sie abschließend auf Zeitraum beenden, um einen Lighthouse-Bericht zu den Nutzerinteraktionen zu erstellen.

Modus „Zeitraum“

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

Chromium-Problem: 1291284

Aktualisierungen bei Leistungsstatistiken

Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“

In den DevTools wird jetzt anhand des Mauszeigers statt anhand der Position des Wiedergabesymbols herangezoomt.Mit dem neuen cursorbasierten Zoom können Sie den Mauszeiger an eine beliebige Stelle im Track bewegen und sofort herangezoomen.

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

Chromium-Problem: 1313382

Löschen einer Aufzeichnung einer Leistung bestätigen

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

Löschen einer Aufzeichnung einer Leistung bestätigen

Chromium-Problem: 1318087

Bereiche im Elementbereich neu anordnen

Sie können die Bereiche im Bereich Elemente jetzt nach Ihren Wünschen 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 der Barrierefreiheit beheben, können Sie den Bereich jetzt an die Vorderseite ziehen, um leichter darauf zugreifen zu können.

Bereiche im Elementbereich neu anordnen

Chromium-Problem: 1146146

Farbe außerhalb des Browsers auswählen

In den DevTools können Sie jetzt Farben auch außerhalb des Browsers auswählen. Bisher war es nur im Browser möglich, eine Farbe auszuwählen.

Klicken Sie im Bereich Stile auf eine Farbvorschau, um eine Farbauswahl zu öffnen. Mit dem Farbfüller können Sie eine Farbe an einer beliebigen Stelle auswählen.

Farbe außerhalb des Browsers auswählen

Chromium-Problem: 1245191

Verbesserte Inline-Wertvorschau beim Debuggen

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

In diesem Beispiel hat die Funktion double den Eingabeparameter a und die Variable x. Setzen Sie einen Haltepunkt in 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 in der Inline-Vorschau nicht angezeigt.

Verbesserte Inline-Wertvorschau beim Debuggen

Chromium-Problem: 1316340

Unterstützung für große Blobs für virtuelle Authenticator

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

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

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

Chromium-Problem: 1321803

Neue Tastenkombinationen im Bereich „Quellen“

Im Bereich Quellen sind jetzt zwei neue Tastenkürzel verfügbar:

  • Strg + Umschalttaste + Y: Navigationsleiste (links) ein-/ausblenden
  • Aktivieren und deaktivieren Sie die Debug-Seitenleiste (rechts) mit Strg / Befehlstaste + Umschalttaste + H.

Neue Tastenkombinationen für den Bereich „Quellen“

Chromium-Probleme: 1226363

Verbesserungen bei Quellkarten

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

  • Fehlerbehebung mit Codepen-Beispiel
  • Quellort von Leistungsproblemen in einem Codepen-Beispiel ermitteln
  • Der Tab Komponente fehlt, wenn die React DevTools aktiviert sind

Hier sind einige Fehlerkorrekturen an Quellkarten, die das Debuggen insgesamt 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 als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 mit allen Themen der Reihe Neuerungen bei den Entwicklertools