Découvrez comment les outils de développement s'orientent d'abord vers le mobile avec un nouveau mode Appareil simplifié, toujours activé. Utilisez les boutons de couleur pour ajouter rapidement des couleurs à vos sélecteurs et découvrir les fonctionnalités bientôt disponibles dans les outils de développement.
Un aperçu de l'avenir de la création
Nous venons juste de revenir du Chrome Dev Summit, où je vous ai montré à quoi ressemblerait l'utilisation des outils de développement aujourd'hui et demain. Je ne mentionne généralement pas de fonctionnalités encore expérimentales ou de travaux ambitieux dans ce récapitulatif, mais je fais une exception cette fois-ci. Si vous n'avez pas le temps de regarder l'intégralité de l'intervention, voici les informations à retenir:
Mode Appareil version 2
Nous travaillons encore activement sur cette nouvelle version audacieuse du Mode Appareil, mais nous souhaitions donner à tout le monde la possibilité de l'essayer. C'est pourquoi nous l'avons activée dans votre version Canary aujourd'hui. Avec ces changements, nous intégrons les outils de développement dans un avenir axé sur les mobiles, où le développement pour mobile est le paramètre par défaut, tandis que le développement pour ordinateur est le "module complémentaire". D'autres améliorations seront disponibles au cours des prochaines semaines en publiant un article de blog plus complet lorsque nous aurons terminé.
Contrôle d'animation performant
L'inspection d'animation, en cours de développement, vous offre une image complète et détaillée de ce qui se passe sur tout type de mouvement. Au lieu de vous montrer une transition sur un élément à la fois, nous avons ajouté des méthodes heuristiques qui regroupent des animations complexes afin que vous puissiez vous concentrer sur tout ce que vous voyez. Regardez la vidéo. Nous publierons un article de blog indépendant et plus grand lorsque le programme sera disponible.
Mode de mise en page (aperçu)
Pas tout à fait prêt pour un lancement grand public, mais très prometteur est le nouveau mode de mise en page, une fonctionnalité que j'ai hâte de voir entièrement prête à l'emploi. Le mode de mise en page ajoute des fonctionnalités d'édition WYSIWYG aux outils de développement pour n'importe quel élément de la page. Jusqu'à présent, la hauteur, la largeur, les marges intérieures et les marges peuvent être modifiées en contexte. Cela va vous prendre un peu plus de temps, mais nous vous tiendrons informé.
Profilage des performances avec le nouveau panneau "Timeline"
Dans le cadre de l'introduction du nouveau modèle de performances RAIL, des centaines de modifications de plus en plus petites et plus importantes ont été apportées au panneau "Timeline". Ensemble, elles transforment et améliorent largement l'analyse du profilage des performances. Ainsi, au lieu de présenter chaque modification séparément, notre propre Paul Irish nous a montré comment déboguer correctement les performances d'un site, en l'occurrence le site mobile d'Hotel Tonight, sur scène. Parmi les nouveautés annoncées, citons les films de chargement et de performances, la cascade d'annonces réseau incluse, le résumé des arborescences et la possibilité d'afficher les coûts de performances par domaine et fichier.
Ajoutez facilement des couleurs de premier plan et d'arrière-plan à n'importe quel élément
Lorsque vous souhaitez ajouter une propriété de couleur d'arrière-plan ou de couleur à votre élément, vous ne pouvez pas simplement ouvrir le sélecteur de couleur. Au lieu de cela, la plupart d'entre vous tapent quelque chose comme « arrière-plan: rouge » à chaque fois afin que l'icône du sélecteur de couleur apparaisse, puis choisissez la couleur que vous souhaitez.
Nous avons pensé qu'il serait possible de simplifier ce processus. Nous avons ajouté deux boutons très pratiques qui s'affichent lorsque vous pointez sur l'angle inférieur droit d'un sélecteur. Ils vous permettent d'ajouter une couleur et d'afficher le sélecteur en un seul clic:
Le meilleur des autres
- Nous avons gaspillé beaucoup d'espace précédemment dans le panneau "Style" en affichant des types de supports génériques. Nous masquons désormais ces éléments avant vos sélecteurs s'ils ne sont pas inhabituels.
- Vous pouvez désormais passer de manière prolongée sur un sélecteur CSS dans le panneau "Style" pour voir le nombre d'éléments auxquels il s'applique sur la page.
- Vous n'avez pas encore abandonné l'impression ? L'émulation de supports imprimés est encore disponible pour vous permettre de voir à quoi ressemblerait votre page une fois imprimée. Nous venons de la déplacer dans les paramètres de rendu.
- Désormais, lorsque vous choisissez un élément à inspecter, l'arborescence DOM appropriée se développe automatiquement et se ferme. Difficile à expliquer, voir pour y croire.
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