Découvrez comment les outils de développement passent en priorité aux appareils mobiles grâce à un nouveau mode Appareil simplifié, toujours activé. Utilisez les boutons de couleur pour ajouter rapidement des couleurs à vos sélecteurs et découvrir ce qui sera bientôt disponible dans les outils de développement.
Aperçu de l'avenir de la création
Nous revenons tout juste du Chrome Dev Summit, au cours duquel je vous ai montré à quoi ressemble l'utilisation des outils de développement aujourd'hui et à l'avenir. En général, je ne mentionne aucune fonctionnalité encore en phase de test ou en cours de développement, mais je fais une exception cette fois-ci. Si vous n'avez pas le temps de regarder la vidéo dans son intégralité, voici les informations à retenir:
Mode Appareil version 2
Nous travaillons encore sur cette nouvelle version audacieuse du mode Appareil, mais nous voulions donner à chacun l'occasion de l'essayer, c'est pourquoi nous l'avons activé dans la version Canary aujourd'hui. Avec ces changements, nous orientons les outils de développement vers un avenir axé sur les mobiles, où le développement sur mobile est l'option par défaut, tandis que le développement pour ordinateur est le "module complémentaire". Attendez-vous à de nouvelles itérations au cours des prochaines semaines avec un article de blog détaillé lorsque nous aurons terminé.
Inspection approfondie des animations
L'inspection d'animation, en cours de développement, vous donne une image complète et détaillée de ce qui se passe sur tout ce qui est en mouvement. Au lieu de vous montrer une transition sur un élément à la fois, nous avons ajouté des méthodes heuristiques qui regroupent les animations complexes pour que vous puissiez vous concentrer sur tout ce que vous voyez. Jetez un œil à la vidéo. Nous proposerons un article de blog indépendant et plus volumineux une fois le lancement terminé.
Mode de mise en page (aperçu)
Pas tout à fait prêt pour un lancement grand public, mais le nouveau mode de mise en page, une fonctionnalité que j'ai hâte de découvrir, est très prometteur. Le mode Mise en page ajoute des fonctionnalités d'édition WYSIWYG aux outils de développement pour n'importe quel élément de la page. Pour l'instant, la hauteur, la largeur, les marges intérieures et les marges peuvent être modifiées en contexte. Cela va prendre un peu plus de temps, mais nous vous tiendrons informé.
Profilage des performances avec le panneau "Timeline" mis à jour
Dans le cadre de l'expansion du nouveau modèle de performance RAIL, des centaines de modifications plus petites et plus importantes ont été apportées au panneau Timeline. Ensemble, elles transforment et améliorent considérablement l'histoire du profilage des performances. Ainsi, au lieu de présenter chacun des changements de manière isolée, notre propre Paul Irlandais nous a montré comment déboguer correctement les performances d'un site, en l'occurrence le site pour mobile de Hotel Tonight, en direct sur scène. Parmi les nouvelles fonctionnalités annoncées, citons les bandes de film de charge et de performance, la cascade d'annonces réseau incluse, le récapitulatif de l'arborescence et la possibilité d'afficher les coûts des performances par domaine et par 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, il ne suffisait pas d'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 pour que l'icône du sélecteur de couleur apparaisse, puis choisissez la couleur que vous souhaitez.
Nous avons pensé que cela pouvait être plus simple. Nous avons ajouté deux boutons pratiques qui s'affichent lorsque vous pointez sur le coin inférieur droit d'un sélecteur. Vous pouvez ainsi ajouter une couleur et afficher le sélecteur en un seul clic:
Le meilleur du reste
- Nous avons perdu beaucoup d'espace dans le panneau "Style" en affichant des types de supports génériques. Nous masquons désormais ces éléments avant vos sélecteurs si ce n'est pas inhabituel.
- Vous pouvez désormais passer la souris sur un sélecteur CSS de manière prolongée dans le panneau "Style" pour voir le nombre d'éléments de la page auxquels il s'applique.
- Vous n'avez pas encore abandonné l'impression ? L'émulation de supports imprimés est toujours disponible pour vous permettre de voir à quoi ressemblerait votre page une fois imprimée. Nous venons de la déplacer vers les paramètres de rendu.
- Lorsque vous choisissez un élément à inspecter, l'arborescence DOM correspondante s'étend automatiquement et se ferme. Difficile à expliquer, voir, c'est croire.
Comme toujours, n'hésitez pas à nous donner votre avis via Twitter ou les commentaires ci-dessous, et signalez vos bugs à l'adresse crbug.com/new.
Jusqu'au mois prochain !
Paul Bakaus et l'équipe DevTools