Neuerungen in den Entwicklertools (Chrome 102)

Jecelyn Yeen

Funktion in der Vorabversion: Neuer Bereich „Leistungsstatistiken“

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

Öffnen Sie das Steuerfeld und starten Sie eine neue Aufnahme entsprechend Ihrem Anwendungsfall. Angenommen, wir möchten den Seitenaufbau dieser Demoseite messen.

Sobald die Aufnahme abgeschlossen ist, werden die Leistungsstatistiken im Bereich Statistiken angezeigt. Klicken Sie auf die einzelnen Statistikelemente (z. B. „Render blockierende Anfrage“, „Layoutverschiebung“), um das Problem und mögliche Korrekturen zu sehen.

Weitere Informationen finden Sie in der Dokumentation zum Bereich Leistungsstatistiken.

Diese Vorschaufunktion soll Webentwicklern (insbesondere Nicht-Experten für Leistung) helfen, potenzielle Leistungsprobleme zu erkennen und zu beheben. Unser Team arbeitet fortlaufend an dieser Funktion und wir würden uns sehr über Ihr Feedback freuen, damit wir sie weiter verbessern können.

Chromium-Problem: 1270700

Neue Tastenkombinationen zum Emulieren von hellem und dunklem Design

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

Bisher waren mehr Schritte erforderlich, um Designs zu emulieren.

Chromium-Problem: 1314299

Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“

In den Entwicklertools wird die Content Security Policy (CSP) jetzt auf dem Tab Vorschau im Bereich Netzwerk 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 Stylesheet-Anfrage 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. Es ist jetzt wie erwartet blockiert (zweiter Screenshot).

Chromium-Problem: 833147

Verbessertes Neuladen am Haltepunkt

Der Debugger beendet jetzt die Skriptausführung, wenn beim Haltepunkt neu geladen wird.

In dieser React-Demo ist das Skript beispielsweise zuvor in eine Endlosschleife geraten, wenn der ReactDOM-Haltepunkt festgelegt und neu geladen wurde. Das Feld Quellen wurde aufgrund der Endlosschleife nicht mehr angezeigt.

Die weitere Ausführung von JavaScript führt zu vielen Problemen für Entwickler und kann den Renderer in einem fehlerhaften Zustand zurücklassen. Durch diese Änderung wird das Debugging-Verhalten an andere Browser wie Firefox angeglichen.

Chromium-Probleme: 1014415, 1004038, 1112863, 1134899

Konsolenupdates

Fehler bei der Skriptausführung in der Console beheben

Bei Fehlern während der Skriptauswertung in der Console werden jetzt korrekte Fehlerereignisse generiert, die den window.onerror-Handler auslösen und als "error"-Ereignisse für das Fensterobjekt gesendet werden.

Chromium-Problem: 1295750

Live-Ausdruck mit der Eingabetaste bestätigen

Wenn Sie eine Live-Formel eingegeben haben, können Sie auf Enter klicken, um sie zu übernehmen. Bisher wurden durch Drücken der Eingabetaste neue Zeilen hinzugefügt. Das ist nicht konsistent mit anderen Teilen der Entwicklertools.

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

Chromium-Problem: 1260744

Aufzeichnung des Nutzerablaufs am Anfang abbrechen

Sie können die Aufzeichnung während des Starts der Aufzeichnung des Nutzerflows abbrechen. Bisher gab es keine Möglichkeit, die Aufnahme abzubrechen.

Chromium-Problem: 1257499

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

Die geerbten Pseudo-Elemente für die Markierung (z.B. ::selection, ::spelling-error, ::grammar-error und ::highlight) werden im Bereich Stile angezeigt. Bisher wurden diese Regeln nicht angezeigt.

Wie in der Spezifikation beschrieben, wird der Gewinnerstil durch die Kaskade bestimmt, wenn mehrere Stile in Konflikt stehen. Mit dieser neuen Funktion können Sie die Übernahme und Priorität der Regeln besser nachvollziehen.

Chromium-Problem: 1024156

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

• Im Bereich Properties (Attribute) werden jetzt standardmäßig Accessor-Attribute mit Wert angezeigt. Es 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 Logik für die CSS-Formatierung im Quellen-Bereich wurde korrigiert. Dadurch wurden beim Bearbeiten von CSS mehrere leere Zeilen eingefügt. (1309588)
• Begrenzen Sie die Option Rekursiv erweitern eines Objekts in der Konsole auf maximal 100, damit sie bei zirkulären Objekten nicht unendlich fortgesetzt wird. (1272450)

[Experimentell] CSS-Änderungen kopieren

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

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

Auf dem Tab Änderungen gibt es jetzt auch die Schaltfläche Kopieren, damit Sie Ihre CSS-Änderungen ganz einfach im Blick behalten und kopieren können.

Chromium-Problem: 1268754

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

Wenn Sie dieses Experiment aktivieren, können Sie mit der Farbauswahl eine Farbe außerhalb des Browsers auswählen. Bisher konnten Sie nur eine Farbe im Browser auswählen.

Klicken Sie im Bereich Stile auf eine beliebige Farbvorschau, um die Farbauswahl zu öffnen. Mit der Pipette können Sie Farben an beliebiger Stelle auswählen.

Chromium-Problem: 1245191

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.