Neuerungen in den Entwicklertools (Chrome 111)

Jecelyn Yeen

Fehlerbehebung bei HD-Farben mit dem Bereich „Stile“

Es gibt neue CSS-Farbtypen und -Räume für das Web. Ebenso spannend ist, dass in DevTools neue Tools eingeführt wurden, mit denen Entwickler High-Definition-Farben erstellen, konvertieren und debuggen können.

Im Bereich Stile werden jetzt 12 neue Farbräume und 7 neue Farbskalen unterstützt, wie in der CSS Color Level 4-Spezifikation beschrieben. Umfassender Leitfaden zu High-Definition-CSS-Farben

Hier sind 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 Berechnet ansehen.

Die Farbauswahl unterstützt alle neuen Farbräume mit zusätzlichen Funktionen. Klicken Sie beispielsweise auf das Farbmuster von color(display-p3 1 0 1). Außerdem wurde eine Gamut-Grenzlinie hinzugefügt, die zwischen den Gamuts sRGB und display-p3 unterscheidet, damit Sie das Gamut der ausgewählten Farbe besser nachvollziehen können.

DevTools unterstützt die Konvertierung von Farben zwischen Farbformaten. Klicken Sie auf das Symbol Farbformat ändern, um auf das Konvertierungs-Pop-up zuzugreifen, oder halten Sie einfach die Shift-Taste gedrückt und klicken Sie im Bereich Stile auf ein Farbmuster.

Beim Konvertieren ist es wichtig zu wissen, ob die Konvertierung beschnitten wurde, um in den verfügbaren Platz zu passen. In DevTools wird neben der konvertierten Farbe ein Warnsymbol angezeigt, das Sie auf dieses Clipping aufmerksam macht.

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

Die Einstellung Farbformat ist jetzt veraltet, um Platz für das neue HD-Farbformat zu schaffen.

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

Verbesserte UX für Haltepunkte

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

Hier einige Highlights: - Beide Optionen für Pausenausnahmen wurden in den Bereich Breakpoints verschoben und mit Text versehen, um sie verständlicher zu machen.

• Haltepunkte sind 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 zum Bearbeiten des Haltepunkts, um den Haltepunkt-Editor zu öffnen. Hier können Sie die Haltepunktbedingung eingeben oder zu einem Logpoint wechseln.

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

Chromium-Probleme: 1407586, 1402891, 1402893

Anpassbare Recorder-Tastenkombinationen

Mit Tastenkombinationen können Sie Nutzerabläufe schneller aufzeichnen und wiedergeben.

Mit dem Recorder werden einige praktische Tastenkombinationen eingeführt, mit denen sich User Flows schneller aufzeichnen und wiedergeben lassen.

Sie können sich nicht an die Tastenkombinationen erinnern? Kein Problem. Klicken Sie einfach auf die Schaltfläche ?, um sich jederzeit alle Tastenkombinationen anzusehen.

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

Wenn Sie in einem anderen Bereich arbeiten und eine Aufzeichnung des Nutzerflusses starten möchten, verwenden Sie den Befehl Create a new recording (Neue Aufzeichnung erstellen) aus dem Befehlsmenü in den Entwicklertools.

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 besser erkennen können.

Chromium-Probleme: 1385374, 1385678

Caches im Bereich „Anwendung“ neu anordnen

Der Bereich Cache Storage befindet sich jetzt im Bereich Storage des Bereichs Application. Der Bereich Back/forward cache wurde in den Bereich Background Services verschoben.

Chromium-Problem: 1407166

Sonstige Highlights

Hier sind einige wichtige Korrekturen in dieser Version:

• Die Entwicklertools wurden aktualisiert, sodass die Einstellung Cache deaktivieren beim Laden von Sourcemaps berücksichtigt wird. (1407084)
• Im Bereich Elemente wird jetzt sofort der Fokus auf das erste übereinstimmende Element in den Suchergebnissen gesetzt. (1381853)
• Verschiedene Korrekturen zur Verbesserung der Zuverlässigkeit von Quellzuordnung und Breakpoints. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• Um das Debugging zu erleichtern, unterstützt DevTools jetzt die Auswertung von Ausdrücken mit privaten Klassenmembern. (1381806)

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.