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 den Farbumfang 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 auf Shift und dann auf ein Farbmuster im Bereich Styles (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 auf diesen Ausschnitt aufmerksam macht. Warnung bei Farbabschneidung.

Außerdem können Sie mit der neuen Tastenkombination Farben auf Ihrem Bildschirm auswählen. Drücken Sie „C“, um die Pipette zu aktivieren, und 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: – Die beiden Optionen für Ausnahmen wurden in den Bereich Haltepunkte verschoben und mit Text beschriftet, um dies selbsterklärender zu gestalten. 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 Haltepunktbedingung 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 Tastenkombinationen sogar ü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, können Sie in den Entwicklertools im Befehlsmenü den Befehl Neue Aufnahme erstellen verwenden. 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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59