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

Sofia Emelianova
Sofia Emelianova
GitHub

Les insights de la console Gemini sont disponibles dans la plupart des pays européens

Cette version est compatible avec les insights sur la console de Gemini dans la plupart des pays européens.

Liste des pays européens nouvellement acceptés

Allemagne, Autriche, Belgique, Bulgarie, Chypre, Danemark, Espagne, Estonie, Finlande, France, Grèce, Hongrie, Irlande, Islande, Italie, Liechtenstein, Lituanie, Luxembourg, Malte, Norvège, Pays-Bas, Pologne, Portugal, République tchèque, Roumanie, Royaume-Uni, Slovaquie et Slovénie.

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.

Insight de Gemini sur une erreur dans la console

Mises à jour du panneau "Performances"

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

Suivi réseau amélioré

Le canal Network (Réseau) du panneau Performance a été amélioré pour afficher des informations critiques à l'avance (par exemple, une durée plus détaillée et une arborescence d'initiateurs 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 Performances > Summary (Récapitulatif). De plus, si vous avez besoin d'accéder au panneau Network (Réseau), cette opération est plus simple et plus rapide.

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

  • Affiche une légende de couleurs pour les types de requêtes.
  • Marque les requêtes bloquant l'affichage par des triangles rouges dans l'angle supérieur droit.
  • Affiche l'initiateur de la requête lorsque vous la sélectionnez à l'aide d'une flèche. Cela vous aide à comprendre l'arborescence des initiés 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.

La piste réseau améliorée avec une légende de couleurs, des info-bulles, des indicateurs de blocage du rendu et des délais dans l'onglet "Récapitulatif".

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.

Menu contextuel pour la demande comportant l'option "Révéler dans le panneau Réseau".

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

Cette version prend en charge les données sur les extensions 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 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 une instrumentation personnalisée.

Pour voir un exemple de canal personnalisé, consultez cette page de démonstration. Dans Performances > Paramètres de capture, activez la Données d'extension. Lancez un enregistrement de performance, cliquez sur Add new Corgi (Ajouter un nouveau Corgi) sur la page de démonstration, puis arrêtez l'enregistrement. Vous verrez un suivi personnalisé dans la trace qui contient des événements avec des info-bulles personnalisées et des détails dans l'onglet Résumé.

Un canal personnalisé dans le panneau "Performances"

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().

Détails dans la piste "Timings"

Si vous êtes développeur Web et que vous utilisez la partie "Temps utilisateur" de l'API Performance pour ajouter des entrées au canal Temps, vous pouvez désormais voir les détails arbitraires dans l'onglet Résumé pour les événements mark et measure, ainsi que leurs codes temporels.

Événement personnalisé dans la piste "Timings" avec un code temporel et des détails.

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.

Copier les options uniquement pour 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.

Objets regroupés par balises HTML nommées.

Les performances du paramètre 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 l'option > Paramètres > Tests > > Afficher l'option permettant d'exposer les composants internes dans les instantanés de segments de mémoire, puis cochez la case

Problèmes Chromium : 41490040, 343341610, 42203857.

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

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

  • Capture les animations en cours à l'ouverture du panneau. Vous n'avez donc pas besoin d'actualiser la page pour capturer des animations.
  • Compatible avec la modification en direct de @keyframes. En d'autres termes, 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 un certain nombre de 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 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 Performance zoome désormais correctement sur l'activité principale du thread principal 345599356.
    • Correction d'un bug qui entraînait l'importation de types de fichiers de suivi incorrects. Désormais, il empêche d'importer tous les types, à l'exception des bons .json ou .gz 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 at imbriquées 346732737.
    • Les sections @position-try inactives sont désormais grisées 40246493.
  • Application :
    • Cookies: correction d'un bug qui n'actualisait pas les cookies lorsque l'utilisateur cliquait sur Actualiser sur 348683488.
    • Stockage local: vous pouvez désormais trier les touches par ordre alphabétique (341129585).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome 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 plates-formes 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.

Nouveautés des outils de développement

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