Neuerungen in den Entwicklertools (Chrome 111)

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(). Beispiele für CSS-Farbdefinitionen.

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

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. Eine Gamut-Grenzlinie.

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. Umwandeln von Farben zwischen Farbformaten.

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. Warnung bei Farbabschneidung.

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

Aktivieren Sie die Pipette.

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

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. Optionen zum Pausieren der Ausnahme.

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

  • Es gibt neue Optionen zum Deaktivieren, Entfernen und Bearbeiten von Haltepunkten, wenn der Mauszeiger auf einen Haltepunkt oder eine Datei bewegt wird. Neue Optionen zum Deaktivieren von Haltepunkten.

  • 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. Dialogfeld zum Bearbeiten des Haltepunkts

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. Die Tastenkombinationen für die Rekorder App.

Sie können diese Verknüpfungen auch über das Menü Einstellungen anpassen. Tastenkombinationen für die Rekorder App 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. Erstellen Sie einen neuen Aufnahmebefehl.

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. Syntaxhervorhebung für die Angular-HTML-Vorlagen.

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. Caches im Anwendungsbereich.

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) Ausdrücke mit privaten Klassenmitgliedern auswerten.

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