Diese Seite wurde von der Cloud Translation API übersetzt.

Neuerungen in den Entwicklertools (Chrome 111)

Jecelyn Yeen

Debugging der HD-Farbe mit dem Bereich „Stile“

Demnächst gibt es im Web neue CSS-Farbtypen und ‐bereiche. Genauso aufregend ist auch, dass in den Entwicklertools neue Tools eingeführt wurden, die Entwicklern das Erstellen, Konvertieren und Debuggen von High Definition-Farben erleichtern.

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

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 Computed ansehen. und das Farbmix-Ergebnis im
Bereich „Berechnet“.

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 Gamut-Grenze hinzugefügt, durch die die Farbskala sRGB und display-p3 voneinander unterschieden werden kann. So lässt sich der Umfang der ausgewählten Farbe besser nachvollziehen. Eine Gamut-Grenze.

Die Entwicklertools unterstützen die Konvertierung von Farben zwischen Farbformaten. Klicken Sie auf das Symbol Farbformat ändern, um das Konvertierungs-Pop-up aufzurufen, oder klicken Sie auf Shift und dann im Bereich Stile auf ein Farbmuster. Farben zwischen Farbformaten umwandeln.

Bei der Konvertierung ist es wichtig zu wissen, ob die Konvertierung an den Platz angepasst wurde. In den Entwicklertools wird neben der konvertierten Farbe ein Warnsymbol angezeigt, das dich auf diesen Clip zeigt. Warnung vor Farbclips.

Mit der neuen Tastenkombination können Sie außerdem Farben auf dem Bildschirm auswählen. Drücken Sie „C“, um die Pipette zu aktivieren, und dann Escape, um sie zu deaktivieren. Mit der Pipette werden nur Farben im sRGB-Farbraum gesampelt. Wenn Sie beispielsweise versuchen, die Farbe color(display-p3 1 0 1) abzutasten, die sich außerhalb des sRGB-Farbraums befindet, wird die Farbe mit der Pipette auf die nächste Farbe im sRGB-Bereich zugeschnitten: Magenta color(display-p3 0.92 0.2 0.97).

Aktivieren Sie die Pipette.

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

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

Verbesserte Haltepunkt-UX

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

Hier einige Highlights: – Beide Optionen für Pausenausnahmen wurden in den Bereich Breakpoints verschoben und mit Text gekennzeichnet, um sie selbsterklärender zu machen. Optionen zum Pausieren von Ausnahmen

Haltepunkte werden nach Datei gruppiert, nach Zeilen- oder Spaltennummern sortiert und sind minimierbar.
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 „Haltepunkt bearbeiten“, um den Haltepunkteditor zu öffnen. Hier können Sie die Haltepunktbedingung eingeben oder zu einem Logpoint wechseln.

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

Chromium-Probleme: 1407586, 1402891, 1402893

Anpassbare Rekorder-Tastenkombinationen

Verwenden Sie Tastenkombinationen, um Nutzerflüsse schneller aufzuzeichnen und wiederzugeben.

Die Rekorder App bietet einige praktische Tastenkombinationen zur schnelleren 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 Verknüpfungen zu sehen. Die Rekorder-Tastenkombinationen

Diese Kurzbefehle lassen sich sogar über das Menü Einstellungen anpassen. Du kannst die Kurzbefehle für den Rekorder anpassen.

Wenn Sie in einem anderen Bereich arbeiten und eine User Flow-Aufzeichnung starten möchten, verwenden Sie in den Entwicklertools den Befehl Create a new record (Neue Aufzeichnung erstellen) im Command-Menü der Entwicklertools. Erstellen Sie einen neuen Aufzeichnungsbefehl.

Chromium-Problem: 1339771

Bessere Syntaxhervorhebung für Angular

Die Entwicklertools haben 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 Anwendungsbereich neu organisieren

Sie finden den Bereich Cache-Speicher jetzt im Bereich Anwendung unter Speicher. Der Bereich Back-Forward-Cache wurde in den Abschnitt Hintergrunddienste verschoben. Caches im Anwendungsbereich.

Chromium-Problem: 1407166

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Die Entwicklertools wurden aktualisiert, um die Einstellung Cache deaktivieren beim Laden von Sourcemaps zu berücksichtigen. (1407084)
Im Steuerfeld Elemente wird jetzt automatisch das erste übereinstimmende Element in den Suchergebnissen fokussiert. (1381853)
Verschiedene Korrekturen zur Verbesserung der Zuverlässigkeit der Source Map und der Haltepunkte. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
Zur einfacheren Fehlerbehebung unterstützen die Entwicklertools jetzt die Auswertung von Ausdrücken mit Mitgliedern privater Klassen. (1381806)

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

Sende uns über crbug.com Vorschläge oder Feedback.
Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden.
Senden Sie einen Tweet an @ChromeDevTools.
Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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

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

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Leistungsmesswerte im Bereich „Leistung“ visualisieren
Textknoten in der DOM-Struktur markieren
Kopieren Sie den JS-Pfad in einen DOM-Knoten.
Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Schlüsselwörter für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü erkennt
Bonustipp: Verwenden Sie den Gerätemodus, um Medienabfragen zu prüfen (Video)

Chrome 71

Bewegen Sie den Mauszeiger auf ein Ergebnis des Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
DOM-Knoten als globale Variablen speichern
Informationen zum Initiator und zur Priorität jetzt in HAR-Importen und -Exporten
Im Hauptmenü auf das Befehlsmenü zugreifen
Haltepunkte im Bild im Bild
Bonustipp: Mit monitorEvents() können Sie ausgelöste Knotenereignisse in der Console protokollieren (Video)