Neuerungen in den Entwicklertools (Chrome 102)

Jecelyn Yeen

Vorabversion: Neuer Bereich „Leistungsstatistiken“

Im Bereich Leistungsstatistiken finden Sie umsetzbare und nutzungsorientierte Informationen zur Leistung Ihrer Website.

Öffnen Sie das Steuerfeld und starten Sie eine neue Aufnahme, die Ihrem Anwendungsfall entspricht. Messen wir beispielsweise den Seitenaufbau dieser Demoseite.

Neuer Bereich „Leistungsstatistiken“

Sobald die Aufzeichnung abgeschlossen ist, sehen Sie die Leistungsstatistiken im Bereich Statistiken. Klicken Sie auf die einzelnen Statistikelemente (z. B. „Render blockierende Anfrage“ oder „Layoutänderung“), um mehr über das Problem und mögliche Lösungen zu erfahren.

Weitere Informationen finden Sie in der Dokumentation zum Bereich Leistungsstatistiken. Dort finden Sie auch eine detaillierte Anleitung.

Diese Funktion befindet sich in der Vorabversion und soll Webentwicklern (insbesondere nicht leistungsorientierten Entwicklern) helfen, potenzielle Leistungsprobleme zu erkennen und zu beheben. Unser Team arbeitet fortlaufend an dieser Funktion und wir würden uns sehr über Ihr Feedback für weitere Verbesserungen freuen.

Chromium-Problem: 1270700

Neue Tastenkombinationen zum Emulieren von hellen und dunklen Designs

Mit den neuen Tastenkürzeln im Bereich Stile können Sie die hellen und dunklen Designs jetzt schneller emulieren (CSS-Medienfunktion prefers-color-scheme).

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

Neue Tastenkombinationen zum Emulieren von hellen und dunklen Designs

Chromium-Problem: 1314299

Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“

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

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

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

Sicherheit auf dem Tab „Netzwerkvorschau“ verbessern

Chromium-Problem: 833147

Verbessertes Neuladen an Haltepunkten

Der Debugger beendet jetzt die Scriptausführung, wenn beim Breakpoint neu geladen wird.

In dieser React-Demo führte das Setzen und Neuladen des ReactDOM-Bruchpunkts beispielsweise dazu, dass das Script in einer Endlosschleife hängen blieb. Aufgrund der Endlosschleife funktionierte das Steuerfeld Quellen nicht mehr.

Die fortlaufende Ausführung von JavaScript bereitet Entwicklern viel Ärger und kann dazu führen, dass der Renderer in einem fehlerhaften Zustand bleibt. Durch diese Änderung wird das Debugging-Verhalten mit anderen Browsern wie Firefox abgeglichen.

Verbessertes Neuladen an Haltepunkten

Chromium-Probleme: 1014415, 1004038, 1112863, 1134899

Konsolenupdates

Umgang mit Fehlern bei der Scriptausführung in der Console

Fehler bei der Scriptauswertung in der Console generieren jetzt korrekte Fehlerereignisse, die den window.onerror-Handler auslösen und als "error"-Ereignisse an das Fensterobjekt gesendet werden.

Umgang mit Fehlern bei der Scriptausführung in der Console

Chromium-Problem: 1295750

Live-Ausdruck mit der Eingabetaste bestätigen

Wenn Sie einen Live-Ausdruck eingegeben haben, können Sie auf Enter klicken, um ihn zu übernehmen. Bisher wurden durch Drücken der Eingabetaste neue Zeilen hinzugefügt. Dies ist nicht mit anderen Teilen der DevTools konsistent.

Wenn du im Editor für Live-Ausdrücke eine neue Zeile hinzufügen möchtest, verwende stattdessen Shift + Enter.

Live-Ausdruck mit der Eingabetaste bestätigen

Chromium-Problem: 1260744

Aufzeichnung des Nutzerflusses zu Beginn abbrechen

Sie können die Aufzeichnung zu Beginn der Aufzeichnung des User Flows abbrechen. Bisher gab es keine Möglichkeit, die Aufnahme abzubrechen.

Aufzeichnung des Nutzerflusses zu Beginn abbrechen

Chromium-Problem: 1257499

Übernommene Pseudo-Elemente für Hervorhebungen im Bereich „Stile“ anzeigen

Die übernommenen Pseudo-Elemente für Hervorhebungen (z.B. ::selection, ::spelling-error, ::grammar-error und ::highlight) finden Sie im Bereich Stile. Bisher wurden diese Regeln nicht angezeigt.

Wie in der Spezifikation erwähnt, wird bei Konflikten zwischen mehreren Stilen der Gewinnerstil durch die Kaskade bestimmt. Mit dieser neuen Funktion können Sie die Vererbung und Priorität der Regeln besser nachvollziehen.

Übernommene Pseudo-Elemente für Hervorhebungen im Bereich „Stile“ anzeigen

Chromium-Problem: 1024156

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Im Bereich Properties (Properties) werden jetzt standardmäßig Zugriffseigenschaften mit Wert angezeigt. Sie wurde zuvor fälschlicherweise ausgeblendet. (1309087)
  • Im Bereich Stile werden die überschriebenen @support-Regeln jetzt korrekt durchgestrichen dargestellt. Bisher waren die Regeln nicht durchgestrichen. (1298025)
  • Die CSS-Formatierungslogik im Bereich Quellen wurde korrigiert, die beim Bearbeiten von CSS zu mehreren leeren Zeilen führte. (1309588)
  • Begrenzen Sie die Option Rekursiv maximieren eines Objekts in der Console auf maximal 100, damit sie bei kreisförmigen Objekten nicht ewig weiterläuft. (1272450)

[Experimentell] CSS-Änderungen kopieren

Bei diesem Test werden Ihre CSS-Änderungen im Bereich Styles grün hervorgehoben. Bewegen Sie den Mauszeiger auf die geänderten Regeln und klicken Sie neben ihnen auf die Schaltfläche „Neu kopieren“, um sie zu kopieren.

Außerdem können Sie alle CSS-Änderungen in Deklarationen kopieren, indem Sie mit der rechten Maustaste auf eine Regel klicken und Alle CSS-Änderungen kopieren auswählen.

Auf dem Tab Änderungen wurde außerdem die Schaltfläche Kopieren hinzugefügt, mit der Sie Ihre CSS-Änderungen ganz einfach im Blick behalten 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 war es nur im Browser möglich, eine Farbe auszuwählen.

Klicken Sie im Bereich Stile auf eine beliebige Farbvorschau, um die 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

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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 aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.