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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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