Neuerungen in den Entwicklertools (Chrome 102)

Jecelyn Yeen

Vorschaufunktion: Neuer Bereich „Leistungsstatistiken“

Im Bereich Leistungsstatistiken erhalten Sie umsetzbare und anwendungsfallbezogene Informationen zur Leistung Ihrer Website.

Bereich öffnen und basierend auf Ihrem Anwendungsfall eine neue Aufzeichnung starten. Sehen wir uns als Beispiel den Seitenaufbau dieser Demoseite an.

Neuer Bereich „Leistungsstatistiken“

Sobald die Aufzeichnung abgeschlossen ist, werden die Leistungsstatistiken im Bereich Statistiken angezeigt. Klicken Sie auf die einzelnen Statistikelemente (z. B. Anfrage zum Blockieren des Renderings oder Layout Shift), um das Problem zu verstehen und mögliche Korrekturen vorzunehmen.

Eine detaillierte Anleitung finden Sie in der Dokumentation im Bereich Leistungsdaten.

Dies ist eine Vorschaufunktion, mit der Webentwickler (insbesondere Leistungsexperten) potenzielle Leistungsprobleme erkennen und beheben können. Unser Team arbeitet bereits an dieser Funktion und wir freuen uns auf Ihr Feedback, damit wir sie verbessern können.

Chromium-Problem: 1270700

Neue Tastenkombinationen zur Emulierung von hellen und dunklen Designs

Mit den neuen Tastenkombinationen im Bereich Stile können Sie das helle und das dunkle Design jetzt schneller emulieren (CSS-Medienfunktion prefers-color-scheme).

Bisher waren auf dem Tab Rendering mehr Schritte erforderlich, um Designs zu emulieren.

Neue Tastenkombinationen zur Emulierung von hellen und dunklen Designs

Chromium-Problem: 1314299

Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“

In den Entwicklertools wird jetzt die Content Security Policy (CSP) auf dem Tab Preview (Vorschau) im Bereich Network (Netzwerk) angewendet.

Der erste Screenshot zeigt beispielsweise eine Seite mit gemischten Inhalten. Die Seite wird über eine sichere HTTPS-Verbindung geladen, aber das Stylesheet wird über eine unsichere HTTP-Verbindung geladen.

Der Browser hat die Stylesheet-Anfrage standardmäßig blockiert. Wenn Sie die Seite jedoch im Bereich Netzwerk über den Tab Vorschau geöffnet haben, wurde das Stylesheet zuvor nicht blockiert, sodass der Hintergrund rot dargestellt wurde. Es ist jetzt wie erwartet blockiert (zweiter Screenshot).

Sicherheit auf dem Tab „Netzwerkvorschau“ erhöhen

Chromium-Problem: 833147

Verbessertes Neuladen an Haltepunkt

Der Debugger beendet nun die Skriptausführung beim erneuten Laden an einem Haltepunkt.

In dieser React-Demo ist das Skript beispielsweise zuvor in eine Endlosschleife geraten, als es am Haltepunkt ReactDOM gesetzt und neu geladen wurde. Der Bereich Quellen ist aufgrund der Endlosschleife beschädigt.

Die weitere Ausführung von JavaScript stellt für Entwickler große Probleme dar und kann dazu führen, dass der Renderer nicht mehr funktioniert. Durch diese Änderung wird das Debugging-Verhalten an das Verhalten anderer Browser wie Firefox angepasst.

Verbessertes Neuladen an Haltepunkt

Chromium-Probleme: 1014415, 1004038, 1112863, 1134899

Konsolenupdates

Fehler bei der Skriptausführung in der Console beheben

Fehler während der Skriptauswertung in der Console generieren jetzt ordnungsgemäße Fehlerereignisse, die den window.onerror-Handler auslösen und als "error"-Ereignisse für das Fensterobjekt ausgelöst werden.

Fehler bei der Skriptausführung in der Console beheben

Chromium-Problem: 1295750

Live-Ausdruck mit Eingabetaste bestätigen

Wenn Sie mit der Eingabe eines Live-Ausdrucks fertig sind, können Sie auf Enter klicken, um ihn zu übernehmen. Bisher wurden durch Drücken der Eingabetaste neue Zeilen hinzugefügt. Dies stimmt nicht mit anderen Teilen der Entwicklertools überein.

Wenn Sie im Live-Ausdruck eine neue Zeile einfügen möchten, verwenden Sie stattdessen Shift + Enter.

Live-Ausdruck mit Eingabetaste bestätigen

Chromium-Problem: 1260744

User Flow-Aufzeichnung zu Beginn abbrechen

Sie können die Aufzeichnung zu Beginn der User Flow-Aufzeichnung abbrechen. Bisher war es nicht möglich, die Aufzeichnung abzubrechen.

User Flow-Aufzeichnung zu Beginn abbrechen

Chromium-Problem: 1257499

Übernommene Pseudoelemente zum Hervorheben im Bereich „Stile“ anzeigen

Sehen Sie sich die übernommenen Pseudoelemente der Hervorhebung (z.B. ::selection, ::spelling-error, ::grammar-error und ::highlight) im Bereich Stile an. Bisher wurden diese Regeln nicht angezeigt.

Wie in der Spezifikation erwähnt, wird bei Konflikten zwischen mehreren Stilen anhand der Kaskade der erfolgreiche Stil bestimmt. Diese neue Funktion hilft Ihnen, die Übernahme und Priorität von Regeln zu verstehen.

Übernommene Pseudoelemente zum Hervorheben im Bereich „Stile“ anzeigen

Chromium-Problem: 1024156

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

  • Im Bereich Eigenschaften werden jetzt standardmäßig die Eigenschaften der Zugriffsfunktion mit einem Wert angezeigt. Sie wurde zuvor versehentlich ausgeblendet. (1309087)
  • Im Bereich Stile werden die überschriebenen @support-Regeln jetzt korrekt durchgestrichen angezeigt. Bisher waren die Regeln nicht durchgestrichen. (1298025)
  • Die CSS-Formatierungslogik im Steuerfeld Quellen, die bei der Bearbeitung von CSS zu mehreren Leerzeilen führte, wurde korrigiert. (1309588)
  • Begrenzen Sie die Option Rekursiv maximieren eines Objekts in der Konsole auf maximal 100, damit sie bei kreisförmigen Objekten nicht ewig gilt. (1272450)

[Experimentell] CSS-Änderungen kopieren

Bei diesem Test werden Ihre CSS-Änderungen im Bereich Stile grün hervorgehoben. Sie können den Mauszeiger auf die geänderten Regeln bewegen und auf die Schaltfläche „Neu kopieren“ daneben klicken, um sie zu kopieren.

Abgesehen davon können Sie alle CSS-Änderungen über Deklarationen hinweg kopieren, indem Sie mit der rechten Maustaste auf eine Regel klicken und Alle CSS-Änderungen kopieren auswählen.

Auf dem Tab Änderungen wurde die neue Schaltfläche Kopieren hinzugefügt, damit Sie Ihre CSS-Änderungen mühelos nachverfolgen und kopieren können.

CSS-Änderungen kopieren

Chromium-Problem: 1268754

[Experimentell] Farbe außerhalb des Browsers auswählen

Aktivieren Sie diesen Test, um mit der Farbauswahl eine Farbe außerhalb des Browsers auszuwählen. Bisher konnten Sie nur im Browser eine Farbe auswählen.

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

Farbe außerhalb des Browsers auswählen

Chromium-Problem: 1245191

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