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

Sofia Emelianova
Sofia Emelianova
GitHub

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 utilisant l'ancien protocole HTTP/1.1.
  • Utiliser des durées de mise en cache efficaces met 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 de la police : indique les économies de temps estimées si vous optimisez font-display.

Trois nouveaux insights dans l'onglet "Insights".

Cliquer pour mettre en surbrillance

Vous pouvez désormais cliquer sur des éléments dans les tableaux Récapitulatif, De bas en haut, Arbre des appels et Journal des événements pour que les événements correspondants restent mis en surbrillance dans la trace et que le reste soit atténué lorsque vous parcourez la trace de performances.

Temps de réponse du serveur dans le récapitulatif des requêtes réseau

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

Tableau "Timing du serveur" dans le récapitulatif d'une requête réseau.

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

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

Un filtre est ajouté au tableau de la section Confidentialité et sécurité > Confidentialité > Cookies tiers pour vous permettre de trouver plus rapidement les cookies qui vous intéressent.

Filtre dans le tableau "Cookies tiers".

Tailles en ko dans les tableaux de tous les panneaux

Pour que les unités restent les mêmes dans un même contexte, les tableaux des panneaux Réseau et 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 nombres d'une même colonne et de différents panneaux, au lieu de devoir faire attention aux unités (Mo, Ko ou octets).

Unités de taille unifiées avant et après.

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.

Options de saisie semi-automatique pour la propriété "corner-shape".

Problème Chromium : 402346406.

Expérimental : 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'un trait ondulé rouge. Pointez sur ces éléments ou attributs pour afficher un info-bulle contenant un lien vers l'erreur correspondante dans le panneau Problèmes.

Avant et après la mise en évidence d'un problème lié au DOM dans l'arborescence DOM, avec un info-bulle et un lien vers 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.

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

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 40543651.

Autres points importants

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

  • Performances > Insights > Arborescence des dépendances réseau : affiche désormais la durée de toutes les requêtes réseau dans l'arborescence réseau (400708304).
    • Arborescence des dépendances réseau : affiche désormais la durée de toutes les requêtes réseau dans l'arborescence réseau (400708304).
  • Animations : correction d'un bug qui entraînait l'affichage d'éléments détachés dans le panneau Mémoire en raison des animations capturées 400635410.
  • Enregistreur : utilise désormais la même boîte de dialogue de confirmation que le collage de code lors de la première exécution de l'enregistrement.
  • Calques : le nombre total de calques et la mémoire totale de tous les calques visibles sont désormais indiqués dans la barre d'état en bas de l'écran.
  • Mémoire : l'initialisation des instantanés 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'un seul (42203857).
  • Problèmes : les erreurs CORS d'accès au réseau local (ANL) sont désormais signalées (395895368).
  • Accessibilité :
    • Info-bulles : elles s'affichent désormais lorsque vous appuyez sur un raccourci clavier, et non lorsque vous sélectionnez un élément (396311936).
    • Éléments > Styles : vous pouvez désormais interagir avec la fonction var() à l'aide du clavier. Cela signifie que vous pouvez sélectionner --custom-property et appuyer sur Entrée pour accéder à sa cible de lien (401212692).

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.