Ce mois a été riche en fonctionnalités dans Chrome Canary. Lisez la suite pour découvrir quels scripts tiers causent des problèmes de performances sur votre site avec les détails agrégés dans Vos trajets, comment choisir des couleurs cohérentes avec la nouvelle palette de couleurs, comment simuler le Wi-Fi de conférence avec des profils réseau personnalisables et comment exploiter davantage l'interface utilisateur de DevTools avec le nouveau menu principal et de meilleures info-bulles.
Amélioration des performances des reproches: informations agrégées dans Vos trajets
Sur les sites Web d'aujourd'hui, nous utilisons de plus en plus de balises, d'outils d'analyse, de réseaux sociaux, de services de chargement de polices et de publicité de tiers, parfois un peu trop. Pour éviter cela et vous donner une visibilité sur le problème, nous ajoutons des informations agrégées à la chronologie.
Dans l'onglet Détails agrégés, vous pouvez vous concentrer uniquement sur les fonctions coûteuses ou sur l'ensemble de l'arborescence des appels, puis ventiler les données sélectionnées par domaine, sous-domaine ou URL distinctes. Par exemple, dans la chronologie de chargement d'une page ci-dessus, vous pouvez désormais attribuer facilement les ralentissements aux scripts tiers provenant de domaines tels que facebook.net ou twitter.com.
Nouveau menu principal dédié
Pour désencombrer la barre d'outils principale, nous avons déplacé les icônes de panneau, de paramètres et d'ancrage dans un nouveau menu principal dédié.
En particulier, l'ancrage est beaucoup plus simple. Au lieu d'appuyer de manière prolongée sur l'icône précédente, chaque position de docking dispose de sa propre icône.
En plus de l'ancrage, nous avons ajouté une recherche de fichiers en accès rapide, des raccourcis et une aide (qui mène à notre nouvelle page d'accueil).
Découvrir les outils de développement grâce à des info-bulles améliorées
Les outils de développement comportent de nombreux boutons, et nous savons qu'ils ne sont pas tous explicites. Pour faciliter la découverte des actions et de leurs raccourcis, nous avons remplacé les info-bulles natives du système par des info-bulles personnalisées et cohérentes avec la plate-forme.
Les nouvelles info-bulles s'affichent beaucoup plus rapidement et incluent des raccourcis clavier (le cas échéant).
Créer des profils de limitation de bande passante réseau personnalisés
Si les options par défaut du limiteur de débit réseau sont trop limitées pour vos cas d'utilisation, et que vous avez besoin d'une option "WiFi de conférence" ou, par nostalgie, que vous souhaitez revenir aux anciennes méthodes et émuler une ligne "110 bauds", j'ai de bonnes nouvelles pour vous. Nous avons ajouté un nouveau panneau de paramètres qui vous permet de faire tout cela.
Palettes de couleurs automatiques, Material et personnalisées
Que vous souhaitiez recréer les couleurs de la magie ou utiliser une palette de couleurs existante, le sélecteur de couleurs amélioré vous aide à choisir une palette de couleurs cohérente pour votre site.
En cliquant sur la petite icône de bascule à côté de la palette, vous pouvez choisir l'une des options suivantes:
- Couleurs de page : cette palette est générée automatiquement à partir des couleurs que nous trouvons dans votre code CSS. Elle est donc idéale si vous souhaitez développer un site existant.
- Material Design : la palette Material Design offre de belles couleurs prêtes à l'emploi et constitue un choix idéal pour commencer un nouveau projet. Pour le moment, vous trouverez toutes les couleurs primaires, mais nous allons bientôt ajouter toutes les nuances.
- Personnalisé : il s'agit de votre propre terrain de jeu. Ajoutez des couleurs en en sélectionnant une dans le sélecteur, puis cliquez sur l'icône Plus à côté de la palette. Réorganisez-les en les faisant glisser et faites un clic droit pour afficher d'autres options, comme "Supprimer".
Dites-nous ce que vous en pensez et comment nous pourrions développer davantage l'histoire des couleurs.
Le meilleur des autres
- Les requêtes effectuées à l'aide de l'API fetch() sont désormais affichées dans le panneau "Network" (Réseau).
- La mise en page automatique des panneaux garantit que lorsque vous redimensionnez vos panneaux DevTools
, ils s'adaptent aux nouvelles contraintes d'espace. - Inspecter l'élément et le mode appareil comporte un ensemble de nouvelles icônes.
- Les attributs du panneau DOM sont désormais de couleur différente, même lorsque le nœud est mis en surbrillance. (Ils étaient tous blancs auparavant.)
- Les éléments masqués (activés en appuyant sur "h" sur un nœud DOM sélectionné) affichent désormais un indicateur en forme de cercle gris à gauche, et les points d'arrêt DOM font de même avec un cercle bleu. (Cela équivaut aux indicateurs orange que nous utilisons déjà pour forcer un état d'élément tel que :hover.)
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.
À bientôt !
Paul Bakaus et l'équipe DevTools