Neuerungen in den Entwicklertools (Chrome 111)

Jecelyn Yeen

Debugging von HD-Farben mit dem Bereich „Stile“

Neue CSS-Farbtypen und -Bereiche sind bald im Web verfügbar. Ebenso spannend ist es, dass in den Entwicklertools neue Tools eingeführt wurden, mit denen Entwickler High-Definition-Farben erstellen, konvertieren und debuggen können.

Der Bereich Stile unterstützt jetzt 12 neue Farbräume und 7 neue Farbräume, wie in der Spezifikation CSS-Farbstufe 4 beschrieben. Einen umfassenden Überblick über die im Web verfügbaren Farboptionen finden Sie im Leitfaden zu CSS-Farben in High Definition.

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

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

Die Farbauswahl unterstützt alle neuen Farbräume mit mehr Funktionen. Klicken Sie beispielsweise auf das Farbmuster color(display-p3 1 0 1). Außerdem wurde eine Gamut-Grenzlinie hinzugefügt, mit der zwischen den Gamuts sRGB und display-p3 unterschieden wird, um die Farbskala der ausgewählten Farbe besser zu verstehen.

Die Entwicklertools unterstützen das Konvertieren von Farben zwischen Farbformaten. Verwenden Sie das Symbol Farbformat ändern, um das Konvertierungs-Pop-up zu öffnen, oder klicken Sie einfach bei gedrückter Shift-Taste auf ein Farbmuster im Bereich Stile.

Bei der Konvertierung ist es wichtig zu wissen, ob die Conversion an die Fläche angepasst wurde. In den Entwicklertools wird neben der konvertierten Farbe ein Warnsymbol angezeigt, das Sie auf diesen Ausschnitt aufmerksam macht.

Außerdem können Sie mit der neuen Tastenkombination Farben auf Ihrem Bildschirm auswählen. „C“ drücken um die Pipette zu aktivieren, und drücke Escape, um sie zu deaktivieren. Mit der Pipette werden nur Farben im sRGB-Farbraum abgefragt. Wenn Sie beispielsweise versuchen, die Farbe color(display-p3 1 0 1) zu verwenden, die sich außerhalb des sRGB-Farbraums befindet, kürzet die Pipette die Farbe auf die nächstgelegene Farbe im sRGB-Raum, also Magenta color(display-p3 0.92 0.2 0.97).

Die Einstellung Farbformat wurde eingestellt, um Platz für das neue HD-Farbformat zu schaffen.

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

Verbesserte UX für den Haltepunkt

Über den neu gestalteten Bereich Haltepunkte können Sie schnell auf häufig verwendete Funktionen zugreifen, insbesondere auf das Deaktivieren, Bearbeiten und Entfernen von Haltepunkten.

Hier einige Highlights: – Beide Optionen für das Pausieren von Ausnahmen wurden in den Bereich Haltepunkte verschoben und mit Text beschriftet, um dies selbsterklärend zu machen.

• 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 der Mauszeiger auf einen Haltepunkt oder eine Datei bewegt wird.

• Klicken Sie auf die Schaltfläche zum Bearbeiten des Haltepunkts, um den Haltepunkt-Editor zu öffnen. Hier können Sie die Breakpoint-Bedingung eingeben oder zu einem Logpoint wechseln.

Weitere Informationen zur Fehlerbehebung mit den Entwicklertools findest du in der Referenz zur JavaScript-Fehlerbehebung.

Chromium-Probleme: 1407586, 1402891, 1402893

Anpassbare Tastenkombinationen für die Rekorder App

Mit Tastenkombinationen können Sie User Flows schneller aufzeichnen und wiedergeben.

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

Du erinnerst dich nicht mehr an die Tastenkombinationen? Kein Problem. Du kannst jederzeit auf die Schaltfläche ? klicken, um alle Tastenkombinationen zu sehen.

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

Wenn Sie in einem anderen Bereich arbeiten und eine User Flow-Aufzeichnung starten möchten, verwenden Sie den Befehl Neue Aufnahme erstellen aus dem Befehlsmenü in den Entwicklertools.

Chromium-Problem: 1339771

Verbesserte Syntaxhervorhebung für Angular

Die Entwicklertools haben die Syntaxhervorhebung für Angular-HTML-Vorlagen verbessert, sodass du Code leichter lesen und seine Struktur leichter erkennen kannst.

Chromium-Probleme: 1385374, 1385678

Caches im Anwendungsbereich neu organisieren

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

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

• Die Entwicklertools wurden aktualisiert, sodass beim Laden von Quellzuordnungen die Einstellung Disable Cache berücksichtigt wird. (1407084)
• Im Steuerfeld Elemente wird jetzt sofort das erste übereinstimmende Element in den Suchergebnissen automatisch fokussiert. (1381853)
• Verschiedene Korrekturen, um die Zuverlässigkeit der Source Map und der Haltepunkte zu verbessern. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Um die Fehlerbehebung zu erleichtern, unterstützt die Entwicklertools jetzt die Auswertung von Ausdrücken mit privaten Klassenmitgliedern. (1381806)

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