Nouveautés des outils pour les développeurs, Chrome 136

Sofia Emelianova

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Nouveaux insights sur les performances

L'onglet Performances > Insights propose de nouveaux insights:

• HTTP moderne qui met en évidence les requêtes qui utilisent l'ancien protocole HTTP/1.1.
• Utilisez des durées de mise en cache efficaces qui mettent en évidence les requêtes qui pourraient bénéficier de durées de mise en cache plus longues et accélérer le temps de chargement de votre site Web.
• Affichage des polices qui indique les économies de temps estimées si vous optimisez font-display.

Cliquer pour mettre en surbrillance

Vous pouvez désormais cliquer sur des éléments dans les tableaux Récapitulatif, De bas en haut, Arborescence des appels et Journal des événements pour conserver les événements correspondants en surbrillance dans la trace et atténuer les autres lorsque vous parcourez la trace des performances.

Délais du serveur dans le récapitulatif des requêtes réseau

L'onglet Récapitulatif du panneau Performances affiche désormais les temps de latence du serveur pour les requêtes réseau qui implémentent des technologies de rendu côté serveur.

Le panneau Performances utilise les données de l'en-tête de réponse Server-Timing.

Filtrer les cookies dans "Confidentialité et sécurité"

Un filtre est appliqué au tableau de la section Confidentialité et sécurité > Confidentialité > Cookies tiers afin que vous puissiez trouver plus rapidement les cookies qui vous intéressent.

Tailles en ko dans les tableaux de différents panneaux

Pour que les unités restent les mêmes dans le même contexte, les tableaux des panneaux Network (Réseau) et Memory (Mémoire), ainsi que le tableau 1p / 3p dans Performances > Récapitulatif affichent désormais toutes les tailles en Ko. Vous pouvez ainsi comparer directement les chiffres d'une même colonne et entre les différents panneaux, au lieu de surveiller les unités Mo, Ko et B.

La saisie semi-automatique est compatible avec corner-shape et corner-*-shape dans Éléments > Styles.

La saisie semi-automatique dans Éléments > Styles peut désormais suggérer les valeurs correspondantes pour les propriétés corner-shape et corner-*-shape.

Problème Chromium: 402346406.

Fonctionnalité expérimentale: mise en évidence des problèmes liés aux éléments et aux attributs dans le DOM

Grâce à cette nouvelle fonctionnalité expérimentale, le panneau Éléments peut désormais mettre en évidence les problèmes liés aux éléments ou aux attributs DOM à l'aide d'une ligne rouge en zigzag. Pointez sur ces éléments ou attributs pour afficher une info-bulle contenant un lien vers l'erreur correspondante dans le panneau Problèmes.

Le panneau Éléments met actuellement en évidence les descendants non valides de <select>, les définitions ARIA non concordantes et les attributs ARIA non valides.

Problème Chromium: 378738916.

Lighthouse 12.5.0

Le panneau Lighthouse exécute désormais Lighthouse 12.5.0.

Plus particulièrement, dans cette version, legacy-javascript utilise désormais Baseline au lieu de esmodules. Consultez la liste complète des modifications.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 40543651.

Autres points forts

Voici quelques corrections et améliorations importantes apportées à cette version:

• Performances > Insights > Arbre des dépendances réseau: l'heure de toutes les requêtes réseau de l'arborescence réseau est désormais affichée (400708304).
  • Arborescence des dépendances réseau: l'heure de toutes les requêtes réseau de l'arborescence réseau est désormais affichée (400708304).
• Animations: correction d'un bug qui entraînait l'affichage d'éléments dissociés dans le panneau Mémoire en raison d'animations capturées 400635410.
• Enregistreur: utilise désormais la même boîte de dialogue de confirmation que le collage de code lorsque vous exécutez l'enregistrement pour la première fois.
• Calques: la barre d'état en bas de l'écran indique désormais le nombre total de calques et la mémoire totale de tous les calques visibles.
• Mémoire: l'initialisation de l'instantané du tas de mémoire a été améliorée en parallélisant les tâches entre deux nœuds de calcul au lieu d'en utiliser un seul (42203857).
• Problèmes: les erreurs CORS de l'accès au réseau local (LAN) sont désormais signalées (395895368).
• Accessibilité :
  • Info-bulles: elles s'affichent désormais lorsque vous appuyez sur une touche de raccourci au lieu de l'activation du focus (396311936).
  • Éléments > Styles: vous pouvez désormais interagir avec la fonction var() à l'aide du clavier. Pour cela, sélectionnez --custom-property, puis appuyez sur Entrée pour accéder à la cible de son lien (401212692).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.