Nouveautés des outils de développement, Chrome 128

Les insights de la console par Gemini sont déployés dans la plupart des pays européens

Cette version permet d'utiliser les insights de la console de Gemini dans la plupart des pays européens.

Si vous vous trouvez dans l'un de ces pays, vous pouvez désormais demander à Gemini de vous fournir des insights directement dans la console, ce qui vous permet de mieux comprendre les erreurs et les avertissements.

Modifications apportées au panneau "Performances"

Cette mise à jour apporte quelques améliorations au panneau Performances.

Piste réseau améliorée

La piste Réseau du panneau Performances a été améliorée pour afficher les informations critiques en premier, par exemple la durée et l'arborescence de l'initiateur réseau plus détaillées, et pour fournir plus de clarté sur les repères visuels et les couleurs. Vous n'avez donc plus besoin de basculer entre le panneau Réseau et l'onglet Performances > Récapitulatif. De plus, si vous avez encore besoin de passer au panneau Réseau, nous avons simplifié et accéléré la procédure.

La piste Réseau effectue désormais les opérations suivantes :

• Affiche une légende des couleurs pour les types de demandes.
• Marque les requêtes bloquant l'affichage avec des triangles rouges en haut à droite.
• Affiche l'initiateur de la requête lorsqu'il est sélectionné, avec une flèche. Cela vous aide à comprendre l'arborescence des initiateurs de réseau, qui n'était auparavant disponible que dans le panneau Réseau.
• Au survol, une info-bulle retravaillée affiche désormais des informations temporelles structurées, y compris l'état de blocage du rendu et les changements de priorité, le cas échéant.
• L'onglet Résumé affiche désormais également une répartition des durées dans une colonne à droite.

Vous pouvez également effectuer un clic droit sur la requête dans la piste ou sur son URL dans l'onglet Récapitulatif, puis sélectionner Afficher dans le panneau "Réseau" dans le menu déroulant. Les outils de développement vous redirigent vers le panneau Réseau et mettent en surbrillance la requête que vous recherchez dans le tableau.

Personnaliser les données de performances avec l'API d'extensibilité

Cette version permet d'afficher les données d'extension dans le panneau Performances. Vous pouvez désormais ajouter des pistes personnalisées avec des événements et des descriptions d'info-bulles à la trace de performances, des détails à l'onglet Récapitulatif, et plus encore. Cette fonctionnalité peut être utile aux développeurs de frameworks, de bibliothèques et d'applications complexes avec instrumentation personnalisée.

Consultez un exemple de piste personnalisée sur cette page de démonstration. Dans Performances > Paramètres de capture, activez check_box Données d'extension. Démarrez un enregistrement des performances, cliquez sur Add new Corgi (Ajouter un nouveau corgi) sur la page de démonstration, puis arrêtez l'enregistrement. Vous verrez une piste personnalisée dans la trace qui contient des événements avec des info-bulles et des détails personnalisés dans l'onglet Résumé.

En bref, pour étendre les données de performances, transmettez une structure spécifique aux paramètres measureOption.detail ou markOption.detail des appels d'API performance.measure() ou performance.mark().

Informations dans la piste "Timings"

Si vous êtes un développeur Web qui utilise la partie User Timing de l'API Performance pour ajouter des entrées à la piste Timings, vous pouvez désormais afficher vos informations arbitraires dans l'onglet Résumé pour les événements mark et measure, ainsi que leurs codes temporels.

Problème Chromium : 345418915.

Copier toutes les requêtes listées dans le panneau "Réseau"

Au lieu de copier l'intégralité du journal réseau, le panneau Réseau vous permet désormais d'appliquer des filtres et de copier uniquement les requêtes listées.

Instantanés du tas plus rapides avec des balises HTML nommées et moins d'encombrement

Les instantanés de segment de mémoire dans le panneau Mémoire sont encore plus rapides. Ils regroupent désormais les objets par balises HTML nommées, correspondent mieux à la sémantique du langage JavaScript en affichant moins d'objets internes et incluent toujours des valeurs numériques.

Les performances du paramètre check_box Inclure les valeurs numériques dans la capture ont été améliorées. Il est désormais activé par défaut et a été supprimé du panneau Mémoire.

Pour inclure manuellement des objets internes dans le snapshot, activez d'abord Paramètres Paramètres > Tests > check_box Afficher l'option permettant d'exposer les éléments internes dans les snapshots du tas, puis activez check_box Exposer les éléments internes (...) dans le panneau Mémoire.

Problèmes Chromium : 41490040, 343341610, 42203857.

Ouvrez le panneau "Animations" pour capturer des animations et les modifier en direct @keyframes.

Le panneau Animations effectue désormais les opérations suivantes :

• Capture les animations déjà en cours lorsque vous ouvrez le panneau. Vous n'avez donc pas besoin d'actualiser la page pour capturer les animations.
• Compatible avec la modification en temps réel de @keyframes. En d'autres termes, il met à jour l'animation capturée lorsque vous modifiez la section @keyframes dans Éléments > Styles.

Découvrez ces deux fonctionnalités en action dans la vidéo suivante.

Problème Chromium : 352718055.

Lighthouse 12.1.0

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

Cette mise à jour apporte plusieurs modifications, y compris la suppression de l'ancienne métrique First Meaningful Paint (FMP) au profit de la métrique Largest Contentful Paint (LCP). 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 : 772558.

Accessibilité

Cette version présente les améliorations d'accessibilité suivantes :

• Appuyer sur la touche Tabulation après l'autocomplétion dans le champ de modification des expressions Live déplace le curseur vers le point de focus suivant. Auparavant, il permettait d'indenter le texte.
• Lorsque vous cliquez sur un redimensionneur, il est sélectionné. Vous pouvez alors le déplacer à l'aide des touches fléchées vers la droite et vers la gauche.
• Un lecteur d'écran annonce désormais le champ de modification Ajouter une expression à surveiller dans Sources. De plus, l'option Supprimer une expression à surveiller est désormais clairement visible lorsque vous naviguez au clavier.

Problèmes Chromium : 349939551, 343942719, 349334243, 349428374.

Autres points importants

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

• Performances :
  • Piste Réseau : ajout d'événements de connexion WebSocket 331351979.
  • Le panneau Performances zoome désormais correctement sur l'activité la plus intense du thread principal 345599356.
  • Correction d'un bug lié à l'importation de types de fichiers de trace incorrects. Désormais, l'importation de tout type de fichier autre que .json ou .gz est impossible. 349864878
• Éléments > Styles :
  • La liste déroulante des unités dans les valeurs de propriété de longueur est désormais obsolète 41495618.
  • Correction de la résolution des propriétés actives pour les règles @ imbriquées 346732737.
  • Les sections @position-try inactives sont désormais grisées 40246493.
• Application :
  • Cookies : correction d'un bug qui empêchait l'actualisation des cookies lorsque l'utilisateur cliquait sur Actualiser 348683488.
  • Stockage local : vous pouvez désormais trier les clés par ordre alphabétique 341129585.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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.