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

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

Cette version apporte la compatibilité avec les insights de la console de Gemini dans la plupart des pays européens.

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

Mises à jour du panneau "Performances"

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

Piste Enhanced Network

Le canal Network (Réseau) du panneau Performances a été amélioré pour afficher des informations essentielles dès le départ, par exemple une durée plus détaillée et l'arborescence de l'initiateur du réseau, et pour clarifier les repères visuels et les couleurs. Vous n'avez donc plus besoin de basculer entre le panneau Network (Réseau) et l'onglet Performance > Summary (Performances > Résumé). De plus, si vous devez toujours accéder au panneau Réseau, nous avons simplifié et accéléré la procédure.

Le canal Network effectue désormais les opérations suivantes:

• Affiche une légende de couleurs pour les types de requêtes.
• Les requêtes bloquant le rendu sont marquées par des triangles rouges en haut à droite.
• Affiche l'initiateur de la requête à l'aide d'une flèche lors de la sélection. Cela vous aide à comprendre l'arborescence des initiateurs de réseau, qui n'était auparavant disponible que dans le panneau Network (Réseau).
• Lorsque vous pointez sur un élément, une info-bulle retravaillée affiche désormais des informations temporelles structurées, y compris l'état de blocage du rendu et les modifications de priorité, le cas échéant.
• L'onglet Récapitulatif affiche désormais également une répartition des temps dans une colonne sur la droite.

Vous pouvez également effectuer un clic droit sur la requête dans le suivi ou sur son URL dans l'onglet Récapitulatif, puis sélectionner Afficher dans le panneau "Réseau" dans le menu déroulant. DevTools vous redirigera vers le panneau Network (Réseau) et surlignera la requête que vous recherchez dans le tableau.

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

Cette version est compatible avec les données d'extension dans le panneau Performances. Vous pouvez désormais ajouter des canaux personnalisés avec des événements et des descriptions d'info-bulles à la trace des 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.

Pour voir un exemple de canal personnalisé, consultez cette page de démonstration. Dans Performances > Paramètres de capture, activez la check_box Données d'extension. Démarrez un enregistrement des performances, cliquez sur Ajouter un corgi sur la page de démonstration, puis arrêtez l'enregistrement. Dans la trace, vous verrez un canal personnalisé contenant des événements avec des info-bulles et des détails personnalisés dans l'onglet Récapitulatif.

En résumé, 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().

Détails dans la piste "Timings"

Si vous êtes un développeur Web qui utilise la partie "User Timing" de l'API Performances pour ajouter des entrées au canal Timings, vous pouvez désormais afficher vos informations arbitraires dans l'onglet Summary (Récapitulatif) 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 "Network"

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

Des instantanés de tas de mémoire plus rapides avec des balises HTML nommées et moins d'encombrement

Les instantanés de tas de mémoire du panneau Mémoire sont encore plus rapides. Ils comportent désormais des objets regroupés 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é accélérées, activées par défaut et supprimées du panneau Mémoire.

Pour inclure manuellement des objets internes dans l'instantané, activez d'abord settings Settings > Experiments > check_box Show option to expose internals in heap snapshots (Paramètres > Tests > Afficher l'option permettant d'exposer les éléments internes dans les instantanés de tas), puis activez check_box Expose internals (...) (Exposer les éléments internes "(...)") dans le panneau Memory (Mémoire).

Problèmes Chromium: 41490040, 343341610, 42203857.

Ouvrir le panneau "Animations" pour capturer des animations et modifier @keyframes en direct

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 les capturer.
• Compatible avec la modification en temps réel de @keyframes. En d'autres termes, met à jour l'animation capturée lorsque vous modifiez la section @keyframes dans Éléments > Styles.

Découvrez les 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 un certain nombre de modifications, y compris l'abandon 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 principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

Accessibilité

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

• Appuyer sur Tabulation après la saisie semi-automatique dans le champ de modification des expressions en direct déplace le focus sur le point de focus suivant. Auparavant, le texte était mis en retrait.
• Cliquez sur un outil de redimensionnement pour le mettre en surbrillance. 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 de surveillance dans Sources, et Supprimer une expression de surveillance est désormais clairement visible lorsque vous naviguez avec un clavier.

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

Autres points forts

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

• Performances :
  • Piste Network: ajout d'événements de connexion WebSocket 331351979.
  • Le panneau Performances fait désormais un zoom avant correct sur l'activité du thread principal la plus chargée (345599356).
  • Correction d'un bug lié à l'importation de mauvais types de fichiers de trace. Désormais, aucun type de fichier ne peut être importé, sauf les fichiers .json ou .gz appropriés 349864878.
• Éléments > Styles :
  • La liste déroulante d'unités dans les valeurs de la propriété "longueur" est désormais obsolète 41495618.
  • Correction de la résolution des propriétés actives pour les règles at 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 lors du clic 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 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.