Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Les insights sur 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, Chypre, Croatie, Danemark, Espagne, Estonie, Finlande, France, Grèce, Hongrie, Irlande, Islande, Italie, Liechtenstein, Lituanie, Luxembourg, Lettonie, Malte, Norvège, Pays-Bas, Pologne, Portugal, République tchèque, Roumanie, Royaume-Uni, Slovénie, Suède.

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 les informations critiques à l'avance. Vous n'avez donc pas besoin de basculer entre les panneaux Network (Réseau) et Performance > (Performances >). Résumé, et pour clarifier les repères visuels et les couleurs. 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 (Réseau) effectue désormais les opérations suivantes:

Affiche une légende de couleur pour les types de requêtes.
Marque les requêtes bloquant l'affichage avec des triangles rouges dans l'angle supérieur droit et affiche l'initiateur de la requête à l'aide d'une flèche lors de la sélection.
Lorsque l'utilisateur pointe dessus, une info-bulle retravaillée affiche désormais des informations temporelles structurées, y compris les changements de priorité et le blocage de l'affichage, le cas échéant.
À présent, l'onglet Résumé affiche également le détail des délais dans une colonne à droite.

Piste réseau améliorée avec une légende de couleur, des info-bulles, des indicateurs de blocage de l'affichage et des codes temporels dans l'onglet "Résumé".

De plus, vous pouvez désormais effectuer un clic droit sur la demande associée au canal ou sur son URL dans l'onglet Résumé, puis sélectionner Afficher dans le panneau "Network" (Afficher dans le panneau "Network") dans le menu déroulant. Les outils de développement vous redirigent vers le panneau Network (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 prend en charge les données sur les extensions dans le panneau Performances. Vous pouvez désormais ajouter des canaux personnalisés à la trace des performances avec des événements et des descriptions sous forme d'info-bulles, des détails dans l'onglet Résumé 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, check_box 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 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().

Informations sur le canal "Durée"

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.

Un événement personnalisé dans le suivi des temps, avec un code temporel et des informations détaillées.

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 Réseau vous permet désormais d'appliquer des filtres et de ne copier que les requêtes répertoriées.

Copier les options uniquement pour les requêtes listées.

Instantanés de segments de mémoire plus rapides avec des balises HTML nommées et moins encombré

Les instantanés de tas de mémoire dans le panneau Memory (Mémoire) sont encore plus rapides. Les objets sont désormais 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 check_box Inclure les valeurs numériques dans la capture ont été accélérées et activées par défaut, et supprimées du panneau Mémoire.

Pour inclure manuellement des objets internes dans l'instantané, activez d'abord paramètres Paramètres > Tests > check_box Affichez l'option permettant d'exposer les éléments internes dans les instantanés de segments de mémoire, puis activez check_box Exposer les éléments internes (...) dans le panneau Memory (Mémoire).

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 bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Accessibilité

Cette version comporte les améliorations d'accessibilité suivantes:

Si vous appuyez sur la touche Tabulation après la saisie semi-automatique dans le champ de modification des expressions actives, le curseur est placé sur le point de sélection suivant. Auparavant, le texte était mis en retrait.
Cliquez sur un redimensionnable pour le sélectionner. Vous pouvez donc le déplacer à l'aide des flèches vers la droite et vers la gauche.
Un lecteur d'écran annonce désormais le champ de modification Add watch expression (Ajouter une expression de contrôle) dans Sources et Delete watch expression (Supprimer l'expression de contrôle) est désormais clairement visible lors de la navigation à l'aide d'un clavier.

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

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

Performances:
- Canal Réseau: 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 @règles 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 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 Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.