Découvrez comment DevTools vous permet de taper moins grâce à un autocomplétion de la console plus intelligente, 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 la console
Si vous êtes comme moi et beaucoup d'autres, vous saisissez une commande dans la console pour déboguer votre application, constatez qu'elle ne fonctionne pas, itérez et saisissez-la à nouveau, encore et encore. Pour vous aider, nous proposons désormais de compléter automatiquement les phrases que vous avez saisies précédemment, comme suit:
Modifier directement les règles @keyframe dans le panneau "Styles"
Lorsque nous avons lancé l'inspecteur d'animation et l'éditeur d'atténuation dans DevTools, ils étaient limités aux transitions, car nous n'affichions jamais les animations CSS basées sur @keyframe dans le volet "Style". Je suis heureux de vous annoncer que c'est désormais de l'histoire ancienne. Alors, faites-vous plaisir ! Pour en avoir un aperçu, consultez notre tweet vidéo.
Prise en charge des propriétés CSS personnalisées
De nombreuses nouveautés sont à venir pour le CSS, dont les variables personnalisées, qui seront lancées dans Chrome 49. Nous avons pris soin d'inclure une compatibilité complète dans DevTools. Si vous utilisiez déjà des variables dans Sass, essayez les variables natives, car elles vous permettent de modifier les propriétés instantanément dans le volet "Styles" et de mettre à jour immédiatement les éléments dépendants.
Un thème sombre pour les outils de développement
Nous avons finalement cédé à une demande que nous avons entendue des dizaines de fois au cours des deux dernières années: vous pouvez désormais choisir le côté obscur dans DevTools. Accédez aux paramètres des outils pour les développeurs, définissez le thème sur "sombre" et profitez-en. Cette fonctionnalité est encore en version bêta, car une grande partie d'elle est générée automatiquement. Si vous voyez des domaines qui pourraient être améliorés, n'hésitez pas à nous en faire part.
Le meilleur des autres
- Le panneau de la console se réduit désormais automatiquement lorsque vous cliquez sur l'onglet "Console" complet.
- L'arborescence des fichiers dans "Sources" a été remaniée avec de nouvelles icônes et une nouvelle fonctionnalité de regroupement
Comme toujours, n'hésitez pas à nous faire part de vos commentaires sur Twitter ou dans les commentaires ci-dessous, et à signaler les bugs sur crbug.com/new.
À bientôt !
Paul Bakaus et l'équipe DevTools