Neuerungen in den Entwicklertools (Chrome 103)

Doppelklick- und Rechtsklickereignisse im Bereich „Rekorder“ erfassen

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

Doppelklick- und Rechtsklickereignisse im Bereich „Rekorder“ erfassen

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.

Neue Zeitspannen- und Snapshot-Modus im Lighthouse-Steuerfeld

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.

Zeitspannenmodus

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.

Löschen einer Aufführungsaufzeichnung bestätigen

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.

Bereiche im Steuerfeld „Elemente“ neu anordnen

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.

Auswählen einer Farbe außerhalb des Browsers

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.

Verbesserte Inline-Wertvorschau während der Fehlerbehebung

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.

 Große Blobs für virtuelle Authenticatoren 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 (rechts) ein-/ausblenden.

Neue Tastenkombinationen für den Bereich „Quellen“

Chromium-Probleme: 1226363

Verbesserungen bei Quellzuordnungen

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

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 erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59