Sie erfahren, wie Sie mit den DevTools dank intelligenter automatischer Vervollständigung in der Console weniger tippen müssen, wie Sie @keyframe-Regeln direkt im Bereich „Styles“ bearbeiten, wie Sie CSS-Benutzerdefinierte Variablen verwenden und wie Sie sich der dunklen Seite zuwenden.
Intelligentere automatische Vervollständigung in der Konsole
Viele Entwickler geben einen Befehl in die Konsole ein, um ihre App zu debuggen, sehen, dass sie nicht funktioniert, und geben den Befehl noch einmal, noch einmal und noch einmal ein. Um Ihnen dabei zu helfen, werden jetzt vollständige zuvor eingegebene Sätze automatisch vervollständigt. Das funktioniert so:
@Keyframe-Regeln direkt im Bereich „Stile“ bearbeiten
Als wir den Animation-Inspektor und den Editor für Übergänge in den DevTools eingeführt haben, waren sie auf Übergänge beschränkt, da wir @keyframe-basierte CSS-Animationen nie im Bereich „Stil“ angezeigt haben. Das ist jetzt vorbei. Also lass dich ruhig aus! Eine Vorschau findest du in unserem Videotweet.
Unterstützung für benutzerdefinierte CSS-Properties
Es gibt viele neue Funktionen für CSS. Eine davon sind benutzerdefinierte Variablen, die in Chrome 49 eingeführt werden. Wir haben dafür gesorgt, dass die DevTools vollständig unterstützt werden. Wenn Sie also schon einmal Sass-Variablen verwendet haben, sollten Sie die nativen Variablen ausprobieren. Damit können Sie Eigenschaften im Bereich „Styles“ direkt bearbeiten und abhängige Elemente sofort aktualisieren.
Dunkles Design für DevTools
Wir haben uns endlich einer Bitte gebeugt, die wir in den letzten Jahren dutzende Male gehört haben: In den DevTools können Sie jetzt die dunkle Seite wählen. Rufen Sie die Einstellungen der Entwicklertools auf, legen Sie das Design auf „Dunkel“ fest und genießen Sie es. Die Funktion befindet sich noch in der Betaphase, da ein Großteil davon automatisch generiert wird. Wenn du Bereiche siehst, die verbessert werden könnten, lass es uns wissen.
Das Beste vom Rest
- Der Konsolenbereich wird jetzt automatisch minimiert, wenn Sie auf den Tab „Console“ klicken.
- Der Dateibaum in „Quellen“ wurde überarbeitet und enthält jetzt neue Symbole und Gruppierungsfunktionen.
Wie immer könnt ihr uns auf Twitter oder in den Kommentaren unten Feedback geben und Fehler unter crbug.com/new melden.
Bis zum nächsten Monat!
Paul Bakaus und das DevTools-Team