Chrome Canary a été riche en fonctionnalités pendant un mois. Lisez la suite pour découvrir quels scripts tiers provoquent des problèmes de performances sur votre site grâce aux détails agrégés dans la chronologie. Découvrez comment choisir des couleurs cohérentes avec la nouvelle palette de couleurs, comment simuler une connexion Wi-Fi de conférence avec des profils réseau personnalisables et comment exploiter pleinement l'interface utilisateur des outils de développement avec le nouveau menu principal et les info-bulles améliorées.
Amélioration des problèmes de performances "blâme" : détails cumulés dans "Vos trajets"
Les sites Web d'aujourd'hui utilisent de plus en plus de balises, d'analyse, de réseaux sociaux, de chargement de police et de services publicitaires tiers, voire un peu trop. Pour éviter que cela ne se produise et pour vous donner une meilleure visibilité sur le problème, nous introduisons des informations agrégées dans la chronologie.
Dans l'onglet Détails agrégés, vous pouvez vous concentrer uniquement sur les fonctions coûteuses ou l'arborescence d'appel entière, puis répartir les données sélectionnées par domaine, sous-domaine ou URL distincte. Par exemple, dans la chronologie ci-dessus d'un chargement de page, vous pouvez désormais attribuer facilement des 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é le panneau, les paramètres et les icônes d'ancrage dans un nouveau menu principal dédié.
La station d'accueil a été beaucoup plus simple. Au lieu d'appuyer de manière prolongée sur l'icône précédente, chaque position d'ancrage dispose de sa propre icône.
En plus de la fonction de recherche sur la station d'accueil, nous avons ajouté des raccourcis de recherche de fichiers, des raccourcis et de l'aide (qui mènent à notre nouvelle page d'accueil).
Découvrir les outils de développement grâce à des info-bulles améliorées
Nous proposons de nombreux boutons dans les outils de développement, et nous savons qu'ils ne s'expliquent pas tous par eux-mêmes. Nous avons désormais simplifié la découverte des actions et de leurs raccourcis en remplaçant 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 réducteur de réseau sont trop restrictives pour vos cas d'utilisation et que vous avez besoin d'une option "Wi-Fi de conférence" ou, par souci de nostalgie, souhaitez émuler une ligne "110 Bauds", j'ai une bonne nouvelle à vous annoncer. Nous avons ajouté un panneau "Paramètres" qui vous permet d'effectuer ces actions.
Palettes de couleurs automatiques, Material et personnalisées
Que vous souhaitiez recréer des couleurs magiques ou travailler avec une palette de couleurs existante, le sélecteur de couleurs amélioré vous aide à choisir une palette de couleurs cohérente pour votre site.
Cliquez sur la petite icône de changement à côté de la palette pour sélectionner 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 s'avère donc très utile si vous agrandissez un site existant.
- Material Design : la palette Material Design offre de belles couleurs prêtes à l'emploi et constitue un choix idéal pour démarrer un nouveau projet. Pour le moment, vous verrez toutes les couleurs primaires, mais nous ajouterons bientôt toutes les nuances.
- Personnalisé : c'est votre propre terrain de jeu. Pour ajouter de nouvelles couleurs, choisissez-en une dans l'outil de sélection, puis cliquez sur l'icône "plus" à côté de la palette. Réorganisez-les en les faisant glisser, puis en cliquant avec le bouton droit de la souris pour afficher d'autres options (par exemple, supprimer).
Dites-nous ce que vous en pensez et comment nous pourrions étendre 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).
- Avec la mise en page automatique des panneaux, lorsque vous redimensionnez vos outils de développement
, les panneaux s'adaptent aux nouvelles contraintes d'espace. - Un ensemble de nouvelles icônes s'affiche à côté de l'option Inspecter le mode Élément et Appareil.
- Les attributs du panneau DOM sont désormais de couleur différente, même lorsque le nœud est en surbrillance. Elles étaient toutes blanches auparavant.
- Pour les éléments masqués (activés en appuyant sur "h" sur un nœud DOM sélectionné), un indicateur de cercle gris s'affiche à gauche. Les points d'arrêt DOM font de même avec un cercle bleu. (cela ressemble aux indicateurs orange dont nous disposons déjà pour forcer un état d'élément tel que :hover).
Comme toujours, donnez-nous votre avis via Twitter ou les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.
À très bientôt !
Paul Bakaus et l'équipe DevTools