Neuerungen in den Entwicklertools (Chrome 111)

Jecelyn Yeen

Fehlerbehebung bei HD-Farben mit dem Bereich „Stile“

Neue CSS-Farbtypen und -räume kommen auf das Web zu! Ebenso spannend ist, dass in DevTools neue Tools eingeführt wurden, mit denen Entwickler High-Definition-Farben erstellen, konvertieren und beheben können.

Der Bereich Stile unterstützt jetzt 12 neue Farbräume und 7 neue Farbräume, wie in der CSS Color Level 4-Spezifikation beschrieben. Im High Definition CSS Color Guide finden Sie umfassende Informationen zu den im Web verfügbaren Farboptionen.

Hier sind Beispiele für CSS-Farbdefinitionen mit color(), lch(), oklab() und color-mix().

Wenn Sie die Funktion color-mix() verwenden, können Sie sich die endgültige Farbausgabe im Bereich Berechnet ansehen.

Die Farbauswahl unterstützt alle neuen Farbräume mit mehr Funktionen. Klicken Sie beispielsweise auf das Farbmuster von color(display-p3 1 0 1). Außerdem wurde eine Linie für den Farbraum hinzugefügt, die zwischen dem sRGB- und dem display-p3-Farbraum unterscheidet, um den Farbraum der ausgewählten Farbe besser zu verstehen.

In den DevTools können Farben zwischen Farbformaten konvertiert werden. Über das Symbol Farbformat ändern können Sie das Pop-up-Fenster für die Umwandlung aufrufen. Sie können auch einfach die Taste Shift gedrückt halten und im Bereich Stile auf ein Farbmuster klicken.

Bei der Umwandlung ist es wichtig zu wissen, ob die Umwandlung zugeschnitten wurde, um in den Bereich zu passen. In den DevTools wird neben der umgewandelten Farbe ein Warnsymbol angezeigt, das Sie auf diese Beschneidung hinweist.

Außerdem können Sie mit der neuen Tastenkombination Farben auf dem Bildschirm auswählen. Drücken Sie die Taste „c“, um den Farbfüller zu aktivieren, und die Taste Escape, um ihn zu deaktivieren. Mit der Pipette können Sie nur Farben im sRGB-Farbraum erfassen. Wenn Sie beispielsweise versuchen, die Farbe color(display-p3 1 0 1) zu erfassen, die sich außerhalb des sRGB-Farbraums befindet, wird die Farbe mit dem Pipetten-Tool auf die nächstgelegene Farbe im sRGB-Farbraum zugeschnitten, also auf Magenta color(display-p3 0.92 0.2 0.97).

Außerdem wird die Einstellung Farbformat eingestellt, um Platz für das neue HD-Farbformat zu schaffen.

Chromium-Probleme: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

Verbesserte UX für Unterbrechungen

Im neu gestalteten Bereich Bruchstellen haben Sie schnellen Zugriff auf häufig verwendete Funktionen, insbesondere zum Deaktivieren, Bearbeiten und Entfernen von Bruchstellen.

Im Folgenden finden Sie einige Highlights: – Die beiden Optionen für Ausnahmen bei der Pause wurden in den Bereich Bruchstellen verschoben und mit Text versehen, damit sie selbsterklärender sind.

• Haltepunkte werden nach Datei gruppiert, nach Zeilen- oder Spaltennummern sortiert und können minimiert werden.

• Es gibt neue Optionen zum Deaktivieren, Entfernen und Bearbeiten von Haltepunkten, wenn Sie den Mauszeiger auf einen Haltepunkt oder eine Datei bewegen.

• Klicken Sie auf die Schaltfläche „Unterbrechungspunkt bearbeiten“, um den Unterbrechungspunkt-Editor zu öffnen. Hier können Sie die Unterbrechungsbedingung eingeben oder zu einem Logpoint wechseln.

Weitere Informationen zum Debuggen mit den DevTools finden Sie in der Referenz zum JavaScript-Debugging.

Chromium-Probleme: 1407586, 1402891, 1402893

Benutzerdefinierte Tastenkürzel für den Rekorder

Mit Tastenkombinationen können Sie Nutzerflüsse schneller aufzeichnen und wiedergeben.

Der Aufzeichnungstool bietet einige praktische Tastenkombinationen für eine schnellere Aufzeichnung und Wiedergabe von Nutzerflüssen.

Sie können sich die Tastenkürzel nicht merken? Kein Problem. Klicken Sie auf die Schaltfläche ?, um sich jederzeit alle Tastenkürzel anzusehen.

Sie können diese Tastenkombinationen auch über das Menü Einstellungen anpassen.

Wenn Sie in einem anderen Bereich arbeiten und eine Aufzeichnung des Nutzerflusses starten möchten, verwenden Sie den Befehl Neue Aufzeichnung erstellen im Befehlsmenü in den DevTools.

Chromium-Problem: 1339771

Bessere Syntaxhervorhebung für Angular

In den DevTools wurde die Syntaxhervorhebung für Angular-HTML-Vorlagen verbessert, sodass Sie Code leichter lesen und seine Struktur erkennen können.

Chromium-Probleme: 1385374, 1385678

Caches im Bereich „Anwendung“ neu anordnen

Der Bereich Cache-Speicher befindet sich jetzt im Bereich Speicher des Bereichs Anwendung. Der Bereich Back-/Forward-Cache wurde in den Bereich Hintergrunddienste verschoben.

Chromium-Problem: 1407166

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

• Die Entwicklertools wurden aktualisiert, damit beim Laden von Quellkarten die Einstellung Cache deaktivieren berücksichtigt wird. (1407084)
• Im Bereich Elemente wird jetzt automatisch der Autofokus auf das erste übereinstimmende Element in den Suchergebnissen gesetzt. (1381853)
• Verschiedene Fehlerkorrekturen zur Verbesserung der Zuverlässigkeit der Quellkarte und der Unterbrechungspunkte. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Zur besseren Fehlerbehebung wird in den DevTools jetzt die Auswertung von Ausdrücken mit privaten Klassenmitgliedern unterstützt. (1381806)

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.