Hier erfährst du, wie die Entwicklertools dank der intelligenteren automatischen Vervollständigung in der Console weniger Eingaben machen, wie du @keyframe-Regeln direkt im Bereich „Styles“ bearbeiten kannst, wie du benutzerdefinierte CSS-Variablen optimal einsetzen kannst und wie du die Dunkle Seite verknüpfen kannst.
Eine intelligentere automatische Vervollständigung in Ihrer Konsole
Wenn es Ihnen wie bei mir und vielen anderen geht, geben Sie einen Befehl in die Konsole ein, um Ihre App zu debuggen, und stellen fest, dass sie nicht funktioniert. Anschließend können Sie den Befehl wiederholen und immer wieder eingeben. Um Sie dabei zu unterstützen, werden jetzt vollständige Anweisungen, die Sie zuvor eingegeben haben, automatisch vervollständigt:
@keyframe-Regeln direkt im Bereich „Stile“ bearbeiten
Bei der Einführung des Animationsprüfers und des Easing-Editors in den Entwicklertools waren nur Übergänge verfügbar, da im Bereich „Stil“ nie @keyframe-basierte CSS-Animationen angezeigt wurden. Das gehört der Vergangenheit an. In unserem Video-Tweet können Sie sich eine Vorschau ansehen.
Unterstützung für benutzerdefinierte CSS-Eigenschaften
Bei CSS gibt es noch viele weitere Verbesserungen. Eine davon sind benutzerdefinierte Variablen, die in Chrome 49 eingeführt werden. Die Entwicklertools bieten volle Unterstützung. Wenn Sie also bereits Variablen in Sass verwendet haben, probieren Sie die nativen Elemente aus, da Sie damit Eigenschaften direkt im Bereich „Stile“ bearbeiten und abhängige Elemente sofort aktualisieren können.
Ein dunkles Design für die Entwicklertools
Wir haben in den letzten Jahren Dutzende Male von unserer Bitte ausgetragen: Ab sofort könnt ihr in den Entwicklertools die „Dunkle Seite“ wählen. Rufe die Einstellungen der Entwicklertools auf und setze das Design auf „dunkel“. Viel Spaß! Da sich viele Funktionen noch in der Betaphase befinden, werden sie automatisch generiert. Wenn du also Bereiche siehst, in denen Verbesserungen möglich sind, wende dich an uns.
Alles andere
- Die Konsolenleiste wird jetzt automatisch minimiert, wenn Sie auf den vollständigen Tab der Konsole klicken.
- Die Dateistruktur in „Quellen“ wurde überarbeitet und mit neuen Symbolen und neuen Gruppierungsfunktionen versehen.
Wie immer könnt ihr uns über Twitter oder die Kommentare unten eure Meinung mitteilen und Fehler unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team