Entwicklertools jetzt dunkel, @keyframe-Bearbeitung und intelligentere automatische Vervollständigung

Paul Bakaus
Paul Bakaus

Hier erfährst du, wie du mit den Entwicklertools mit intelligenterer automatischer Vervollständigung in der Konsole weniger Text eingibst, wie du @keyframe-Regeln direkt im Bereich „Stile“ bearbeiten kannst, wie du mit benutzerdefinierten CSS-Variablen Spaß hast und wie du der Dunklen Seite beitrittst.

Eine intelligentere automatische Vervollständigung in Ihrer Konsole

Wenn Sie wie ich und viele andere auch, geben Sie einen Befehl in die Konsole ein, um Fehler in Ihrer App zu beheben. Sie sehen, dass sie nicht funktioniert, iterieren und geben ihn immer und immer wieder ein. Um Ihnen dabei zu helfen, werden jetzt vollständige Angaben, die Sie zuvor eingegeben haben, automatisch vervollständigt, wie zum Beispiel:

Automatische Vervollständigung

@keyframe-Regeln direkt im Bereich „Stile“ bearbeiten

Als wir den Animationsinspektor und den Easing-Editor in die Entwicklertools eingeführt haben, beschränkte er sich auf Übergänge, da wir im Bereich „Stil“ nie @keyframe-basierte CSS-Animationen zeigten. Ich freue mich, dir mitteilen zu können, dass das jetzt der Vergangenheit angehört. Lass dich also nicht davon abhalten! In unserem Video-Tweet findest du eine Vorschau.

Unterstützung für benutzerdefinierte CSS-Eigenschaften

Benutzerdefinierte CSS-Eigenschaften in den Entwicklertools

CSS bietet viele Vorteile, darunter benutzerdefinierte Variablen, die in Chrome 49 eingeführt werden. Wir haben darauf geachtet, dass die Entwicklertools vollen Support bieten. Wenn Sie also bereits Variablen in SASS verwendet haben, sollten Sie die nativen Variablen ausprobieren, denn mit ihnen können Sie Eigenschaften im Handumdrehen im Bereich „Stile“ bearbeiten und abhängige Elemente sofort aktualisieren.

Dunkles Design für Entwicklertools

Das dunkle Design in Aktion

Wir sind endlich einer Aufforderung nachgekommen, die wir in den letzten Jahren oft gehört haben: Ihr könnt jetzt in den Entwicklertools die dunkle Seite wählen. Gehe zu den Einstellungen der Entwicklertools und setze das Design auf „dunkel“. Diese Funktion befindet sich noch in der Betaphase, da viele davon automatisch erstellt wurden. Wenn ihr also Verbesserungsmöglichkeiten findet, lasst es uns bitte wissen.

Das Beste vom Rest

  • Die Konsolenleiste wird jetzt automatisch minimiert, wenn Sie auf den vollständigen Tab „Konsole“ klicken.
  • Der Dateibaum in den Quellen wurde überarbeitet und mit neuen Symbolen und neuen Gruppierungsfunktionen versehen.

Wie immer kannst du uns über Twitter deine Meinung mitteilen oder die Kommentare unten nutzen. Programmfehler kannst du unter crbug.com/new melden.

Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team