Neuerungen in den Entwicklertools (Chrome 102)

Jecelyn Yeen

Vorabversion: Neuer Bereich mit Leistungsstatistiken

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

Öffnen Sie das Steuerfeld und starten Sie je nach Anwendungsfall eine neue Aufzeichnung. Sehen wir uns z. B. den Seitenaufbau dieser Demoseite an.

Neuer Bereich mit Leistungsstatistiken

Sobald die Aufzeichnung abgeschlossen ist, sind die Leistungsstatistiken im Bereich Statistiken zu sehen. Klicken Sie auf die einzelnen Statistikelemente (z. B. Anfrage zum Blockieren des Renderings oder Layout Shifts), um das Problem zu verstehen und mögliche Lösungen zu beheben.

In der detaillierten Anleitung finden Sie weitere Informationen in der Dokumentation zum Bereich Leistungsstatistiken.

Dies ist eine Vorschaufunktion, mit der Webentwickler (insbesondere Nicht-Leistungsexperten) potenzielle Leistungsprobleme erkennen und beheben können. Unser Team arbeitet derzeit an dieser Funktion und wir würden uns über Ihr Feedback zu weiteren Verbesserungen freuen.

Chromium-Problem: 1270700

Neue Tastenkombinationen zur Emulation von hellen und dunklen Designs

Mit den neuen Tastenkombinationen im Bereich Styles 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 zur Emulation von hellen und dunklen Designs

Chromium-Problem: 1314299

Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“

Die Entwicklertools wenden jetzt die Content Security Policy (CSP) auf dem Tab Vorschau im Bereich Netzwerk an.

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 Stylesheet-Anfrage standardmäßig blockiert. Wenn Sie die Seite jedoch im Steuerfeld Netzwerk über den Tab Vorschau geöffnet haben, wurde das Stylesheet zuvor nicht blockiert, sodass der Hintergrund rot angezeigt wird. Er ist jetzt erwartungsgemäß blockiert (zweiter Screenshot).

Sicherheit auf dem Tab „Netzwerkvorschau“ verbessern

Chromium-Problem: 833147

Aktualisieren an Haltepunkt verbessert

Der Debugger beendet jetzt die Skriptausführung beim Aktualisieren an einem Haltepunkt.

Das Skript ist beispielsweise zuvor in eine Endlosschleife geraten, als es in dieser React-Demo am Haltepunkt ReactDOM festgelegt und neu geladen wurde. Der Bereich Quellen ist aufgrund der Endlosschleife unterbrochen.

Die weitere Ausführung von JavaScript verursacht viele Probleme für Entwickler und kann dazu führen, dass der Renderer fehlerhaft ist. Durch diese Änderung wird das Debugging-Verhalten an andere Browser wie Firefox angeglichen.

Aktualisieren an Haltepunkt verbessert

Chromium-Probleme: 1014415, 1004038, 1112863, 1134899

Konsolenupdates

Fehler bei der Skriptausführung in der Console verarbeiten

Fehler während der Skriptauswertung in der Konsole generieren jetzt korrekte Fehlerereignisse, die den window.onerror-Handler auslösen und als "error"-Ereignisse im Fensterobjekt ausgelöst werden.

Fehler bei der Skriptausführung in der Console verarbeiten

Chromium-Problem: 1295750

Commit für Live-Ausdruck mit Eingabetaste durchführen

Nachdem Sie einen Liveausdruck eingegeben haben, können Sie auf Enter klicken, um ihn zu übergeben. Bisher wurden durch Drücken der Eingabetaste neue Zeilen hinzugefügt. Dies entspricht nicht anderen Teilen der Entwicklertools.

Wenn Sie eine neue Zeile im Editor für Live-Ausdrücke hinzufügen möchten, verwenden Sie stattdessen Shift + Enter.

Commit für Live-Ausdruck mit Eingabetaste durchführen

Chromium-Problem: 1260744

Aufzeichnung des User Flows zu Beginn abbrechen

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

Aufzeichnung des User Flows zu Beginn abbrechen

Chromium-Problem: 1257499

Übernommene Pseudoelemente für die Hervorhebung 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 die Kaskade ermittelt. Diese neue Funktion hilft Ihnen, die Übernahme und Priorität von Regeln zu verstehen.

Übernommene Pseudoelemente für die Hervorhebung im Bereich „Stile“ anzeigen

Chromium-Problem: 1024156

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

  • Im Bereich Eigenschaften werden jetzt standardmäßig Eigenschaften der Zugriffsfunktion mit dem Wert angezeigt. Er wurde zuvor versehentlich ausgeblendet. (1309087)
  • Im Bereich Stile werden die überschriebenen @support-Regeln jetzt korrekt durchgestrichen angezeigt. Bisher wurden die Regeln nicht durchgestrichen. (1298025)
  • Die CSS-Formatierungslogik im Steuerfeld Quellen, die beim Bearbeiten von CSS zu mehreren Leerzeilen führte, wurde korrigiert. (1309588)
  • Begrenzen Sie die Option Rekursiv eines Objekts in der Konsole auf maximal 100, sodass sie bei kreisförmigen Objekten nicht dauerhaft wirksam wird. (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änderte Regel und klicken Sie daneben auf die Schaltfläche „Neu kopieren“.

Abgesehen davon können Sie alle CSS-Änderungen in Deklarationen kopieren. Klicken Sie dazu mit der rechten Maustaste auf eine Regel und wählen Sie Alle CSS-Änderungen kopieren aus.

Dem Tab Änderungen wurde außerdem die neue Schaltfläche Kopieren hinzugefügt, damit Sie Ihre CSS-Änderungen leicht 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 mithilfe der Farbauswahl eine Farbe außerhalb des Browsers auszuwählen. Bisher konnten Sie eine Farbe nur im Browser 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 Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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