Découvrez comment DevTools adopte une approche mobile first avec un nouveau mode Appareil simplifié et toujours activé. Utilisez les boutons de couleur pour ajouter rapidement des couleurs à vos sélecteurs et découvrir ce qui arrivera bientôt dans DevTools.
Un aperçu de l'avenir de la création
Nous venons de rentrer du Chrome Dev Summit, où je vous ai montré à quoi ressemble le travail avec DevTools aujourd'hui et à l'avenir. Je ne mentionne généralement pas les fonctionnalités qui sont encore en phase de test ou en cours de développement 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 la conférence, voici les points clés:
Mode Appareil version 2
Nous travaillons toujours activement sur cette nouvelle itération audacieuse du mode Appareil, mais nous voulions donner à tous la possibilité de l'essayer. Nous l'avons donc activé dans votre Canary dès aujourd'hui. Ces modifications nous permettent de faire évoluer DevTools vers un avenir mobile first, où le développement mobile est le paramètre par défaut et le développement pour ordinateur le "module complémentaire". Nous allons procéder à d'autres itérations au cours des prochaines semaines et publier un article de blog détaillé à la fin.
Inspection d'animation efficace
L'inspection des animations, en cours de développement, vous donne une vue complète et détaillée de ce qui se passe sur tout élément en mouvement. Au lieu de vous montrer une transition sur un seul élément à la fois, nous avons ajouté des heuristiques qui regroupent les animations complexes afin que vous puissiez vous concentrer sur tout ce que vous voyez. Regardez la vidéo. Nous publierons un article de blog plus détaillé et indépendant lorsque nous aurons terminé le déploiement.
Mode de mise en page (aperçu)
Le nouveau mode de mise en page, qui n'est pas encore tout à fait prêt, mais qui est très prometteur, est une fonctionnalité que j'ai hâte de voir pleinement développée. Le mode de mise en page ajoute des fonctionnalités de modification WYSIWYG à DevTools pour tous les éléments de la page. Jusqu'à présent, la hauteur, la largeur, les marges intérieures et les marges extérieures peuvent être modifiées dans le contexte. Il nous faudra un peu plus de temps pour que vous puissiez l'essayer, mais nous vous tiendrons informé.
Profilage des performances avec le nouveau panneau "Timeline"
Dans le cadre de la présentation du nouveau modèle de performances RAIL, des centaines de modifications ont été apportées au panneau "Chronologie", de petites et de grandes. Ensemble, elles transforment et améliorent considérablement le profilage des performances. Au lieu de montrer chaque changement individuel de manière isolée, Paul Irish nous a montré comment déboguer correctement les performances d'un site, en l'occurrence le site mobile d'Hotel Tonight, en direct sur scène. Parmi les nouvelles fonctionnalités annoncées figurent les films de chargement et de performances, la cascade de diffusion réseau incluse, le résumé de la vue arborescente et la possibilité d'afficher les coûts de performances par domaine et par fichier.
Ajouter facilement des couleurs de premier plan et d'arrière-plan à n'importe quel élément
Chaque fois que vous souhaitiez ajouter une propriété "background-color" ou "color" à votre élément, vous ne pouviez pas simplement ouvrir le sélecteur de couleur. À la place, la plupart d'entre vous saisissez quelque chose comme "background: red;" à chaque fois pour que l'icône du sélecteur de couleur s'affiche, puis choisissez la couleur souhaitée.
Nous avons pensé que nous pouvions simplifier ce processus. Nous avons ajouté deux boutons pratiques qui s'affichent lorsque vous pointez sur le coin 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 dans le panneau "Style" en affichant des types de médias génériques. Nous les masquons désormais avant vos sélecteurs s'ils ne sont pas inhabituels.
- Vous pouvez désormais pointer de manière prolongée sur un sélecteur CSS 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 d'impression est toujours disponible pour voir à quoi ressemblera votre page lorsqu'elle sera imprimée. Nous l'avons simplement déplacée dans les paramètres de rendu.
- Lorsque vous choisissez un élément à inspecter, nous développons et fermons automatiquement le sous-arbre DOM correspondant. C'est difficile à expliquer, mais voir c'est croire.
Comme toujours, n'hésitez pas à nous faire part de vos commentaires sur Twitter ou dans les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.
À bientôt !
Paul Bakaus et l'équipe DevTools