Découvrez comment les outils de développement vous aident à saisir moins de texte grâce à la saisie semi-automatique intelligente de la console, comment modifier les règles @keyframe directement dans le volet "Styles", comment vous amuser avec les variables CSS personnalisées et comment rejoindre le côté obscur.
Une saisie semi-automatique plus intelligente dans votre console
Si, comme moi, et bien d'autres, vous saisissez une commande dans la console pour déboguer votre application, vous voyez qu'elle ne fonctionne pas, vous l'itérez et vous la saisissez encore et encore. Pour vous aider, la saisie semi-automatique des instructions complètes que vous avez saisies auparavant s'applique désormais:
Modifiez directement les règles @keyframe dans le volet "Styles"
Lorsque nous avons introduit l'inspecteur d'animation et l'éditeur de lissage de vitesse dans les outils de développement, ils se limitaient aux transitions, car nous n'avons jamais montré d'animations CSS basées sur @keyframe dans le volet de style. Je suis ravi de dire que cela appartient maintenant au passé, alors déchaînez-vous ! Consultez notre tweet vidéo pour en avoir un aperçu.
Prise en charge des propriétés CSS personnalisées
Les fonctionnalités CSS sont très nombreuses. L'une d'elles concerne les variables personnalisées, que nous lançons dans Chrome 49. Nous nous sommes assurés que les outils de développement étaient entièrement compatibles avec les outils de développement. Par conséquent, si vous avez déjà utilisé des variables dans Sass, essayez les variables natives, car elles vous permettent de modifier les propriétés à la volée dans le volet "Styles" et de mettre immédiatement à jour les éléments dépendants.
Thème sombre pour les outils de développement
Nous avons enfin cédé à une demande reçue des dizaines de fois ces dernières années: vous pouvez désormais choisir le côté obscur dans les outils de développement. Accédez aux paramètres des outils de développement, définissez le thème sur sombre et profitez-en. Je dirais qu'il s'agit encore d'une version bêta, car une grande partie de cette fonctionnalité est générée automatiquement. Si vous constatez des améliorations, n'hésitez pas à nous le signaler.
Le meilleur des autres
- Le panneau de la console se réduit désormais automatiquement lorsque vous cliquez sur l'onglet complet de la console.
- L'arborescence de fichiers de la section "Sources" a fait l'objet d'une belle refonte, avec de nouvelles icônes et une nouvelle fonctionnalité de regroupement.
Comme toujours, donnez-nous votre avis sur Twitter ou dans les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.
Nous vous attendons le mois prochain !
Paul Bakaus et l'équipe DevTools