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

Sofia Emelianova
Sofia Emelianova
GitHub

Nouveau panneau de saisie automatique

Cette version introduit le nouveau panneau Saisie automatique dans DevTools. La saisie automatique de Chrome permet de remplir automatiquement des formulaires sur des sites Web à l'aide d'adresses enregistrées. Le nouveau panneau Remplissage automatique vous permet d'inspecter la mise en correspondance entre vos champs de formulaire, les valeurs de remplissage automatique prévues et les données enregistrées.

Essayez le nouveau panneau sur cette page de démonstration avec des données de test:

  1. Dans Saisie automatique du profil, cliquez sur l'un des boutons Remplir le formulaire, cliquez sur Envoyer, puis, dans la boîte de dialogue Enregistrer l'adresse ?, cliquez sur Enregistrer et revenez à la page contenant le formulaire.
  2. Ouvrez DevTools et déclenchez un événement de saisie semi-automatique: sélectionnez un champ de formulaire et choisissez l'adresse dans la liste déroulante.

Le panneau Saisie automatique s'ouvre automatiquement et affiche les champs de formulaire détectés, les champs inférés par la saisie automatique et les valeurs enregistrées.

Panneau "Saisie automatique".

Pour en savoir plus, consultez Apprendre à utiliser les formulaires et Remplissage automatique.

Amélioration de la limitation de bande passante réseau pour WebRTC

Grâce à l'ajout récent de paramètres liés aux paquets aux profils de limitation de débit réseau personnalisés, vous pouvez désormais limiter vos applications WebRTC directement dans DevTools. Cela vous permet de tester l'implémentation de votre communication en temps réel, sans avoir à utiliser de logiciel tiers.

Les nouveaux paramètres sont les suivants: Perte de paquets (en pourcentage), Longueur de la file d'attente de paquets (nombre de paquets) et l'indicateur Réordonnancement des paquets.

Avant et après l'ajout de nouvelles options liées aux paquets aux profils de limitation personnalisés.

Pour limiter une connexion WebRTC, spécifiez les paramètres liés aux paquets dans un profil personnalisé dans Paramètres > Limitation, puis sélectionnez-le dans le panneau Réseau.

Essayez les nouveaux paramètres sur cette page de démonstration. Commencez par autoriser la page à utiliser l'appareil photo. Ensuite, dans le panneau Network (Réseau), sélectionnez le profil personnalisé que vous avez configuré. De retour sur la page, cliquez sur Start (Démarrer) et sur Call (Appeler).

Problème Chromium: 41175925.

Prise en charge des animations liées au défilement dans le panneau "Animations"

Le panneau Animations vous permet désormais d'inspecter les animations liées au défilement.

Essayez cette fonctionnalité sur cette page de démonstration. Ouvrez le panneau Animations et actualisez la page pour capturer les animations déclenchées par le défilement.

Groupe d'animations déclenchées par le défilement, signalé par une icône de souris.

Un groupe d'animation marqué d'une icône en forme de s'affiche dans la section Présentation. Vous pouvez maintenant l'inspecter. Le groupe affiche des valeurs de pixel au lieu de millisecondes dans la chronologie.

Amélioration de la prise en charge de l'imbrication CSS dans Éléments > Styles

L'onglet Éléments > Styles améliore la prise en charge de l'imbrication CSS et affiche désormais les styles imbriqués avec une indentation et entre crochets. L'imbrication CSS permet de regrouper des règles CSS et de les rendre moins verbeuses et plus structurées.

État avant et après l'ajout d'une indentation et de crochets autour des styles imbriqués.

Problème Chromium: 40166888.

Panneau "Performances améliorées"

Cette version apporte plusieurs améliorations au panneau Performances.

Masquer les fonctions et leurs enfants dans le graphique en forme de flamme

Pour filtrer le bruit du graphique en forme de flamme dans Performances > Principal, vous pouvez désormais masquer les fonctions non pertinentes et leurs enfants. Dans le graphique de type "flamme", effectuez un clic droit sur une fonction, puis sélectionnez une option dans le menu contextuel.

Avant et après l'ajout d'un menu contextuel permettant de masquer les fonctions et leurs enfants.

Les fonctions avec des enfants masqués comportent un bouton Menu déroulant  à droite. Pointez dessus pour voir le nombre d'enfants masqués, puis cliquez dessus pour les afficher de nouveau. Pour revenir à l'état initial du graphique de type "flamme", effectuez un clic droit sur une fonction, puis sélectionnez Réinitialiser la trace.

Flèches des initiateurs sélectionnés vers les événements qu'ils ont déclenchés

Auparavant, lorsque vous sélectionniez un événement dans le canal Principal, une flèche s'affichait entre son initiateur et l'événement sélectionné. La piste affiche désormais également une flèche de l'événement sélectionné vers celui qu'il a déclenché, le cas échéant.

L'avant et l'après affichant des flèches de sélection à l'initiation d'événements et des liens nommés au lieu de "Révéler".

De plus, tous les initiateurs disposent désormais de champs Initiateur dans l'onglet Récapitulatif. Les champs Initiateur et Initiaté par comportent désormais des liens nommés au lieu de Afficher.

Problèmes Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Le panneau Lighthouse exécute désormais Lighthouse 11.6.0. Consultez la liste complète des modifications.

Parmi les modifications notables, citons le nouveau paramètre Activer l'échantillonnage JS , qui doit être activé. Ce paramètre est désactivé par défaut.

Avant et après l'ajout d'un paramètre d'échantillonnage JS nécessitant une confirmation

L'activation de l'échantillonnage JavaScript ajoute des piles d'appels JavaScript détaillées à la trace de performances, mais peut ralentir la génération de rapports.

Trace des performances sans (à gauche) et avec (à droite) échantillonnage JS.

La trace est disponible sous Menu "Outils" > Afficher la trace non limitée une fois le rapport Lighthouse généré.

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.

Instantanés de segments de mémoire"" id="heap" tabindex="-1">Info-bulles pour les catégories spéciales dans "Mémoire> Instantanés de tas"

Les instantanés de tas de mémoire du panneau Mémoire comportent des groupes d'objets spéciaux qui ne sont pas basés sur des constructeurs. Lorsque vous pointez sur ces objets, le panneau Mémoire affiche désormais une info-bulle contenant une brève description et un lien vers une description plus détaillée dans la documentation.

Avant/après avec une info-bulle descriptive pour des groupes d'objets spéciaux

Problème Chromium: 41490331.

Application > Mises à jour de l'espace de stockage

Cette version apporte quelques modifications à Application > Stockage.

Nombre d'octets utilisés pour l'espace de stockage partagé

La section Application > Stockage > Stockage partagé indique désormais le nombre d'octets utilisés par une origine.

Image avant/après montrant le nombre d'octets utilisés pour le stockage partagé.

Le stockage partagé vous permet d'accéder en écriture de manière illimitée au stockage intersites, avec un accès en lecture protégeant la confidentialité.

Problème Chromium: 324464353.

Web SQL est entièrement abandonné

Chrome a abandonné Web SQL dans la version 119 et a supprimé le jeton d'évaluation avant arrêt dans cette version. Vous ne pouvez donc plus utiliser Web SQL.

Par la suite, les outils de développement ont supprimé la section Web SQL du panneau Application.

Problème Chromium: 327254049.

Améliorations apportées au panneau de couverture

Cette version apporte quelques modifications au panneau Couverture:

  • La barre d'état calcule désormais correctement les statistiques d'utilisation pour les URL filtrées. Auparavant, au lieu d'additionner les données d'utilisation des enfants correspondant au filtre, elle additionnait les données de leurs parents.

Avant et après le calcul correct des statistiques des enfants correspondants.

  • La couleur du code utilisé est désormais grise au lieu de verte pour améliorer la visibilité, en particulier pour les déficiences de vision des couleurs ne concernant pas le vert.

État avant et après avoir modifié la couleur du code utilisé en gris.

Problème Chromium: 41494198, 329253687.

Le panneau des calques risque d'être abandonné

Le panneau Calques risque d'être bientôt abandonné en raison de son faible utilisation. Une bannière d'avertissement s'affiche désormais en haut du panneau.

Bannière d'avertissement annonçant la possible suppression en haut du panneau "Calques".

N'hésitez pas à nous faire part de vos commentaires et de vos préoccupations avant que l'équipe ne prenne la décision finale d'abandonner le panneau.

Abandon du profileur JavaScript: phase 4, finale

Dans cette version, le panneau Profiler JavaScript est entièrement obsolète et ne peut plus être réactivé.

Pour profiler les performances du processeur, utilisez le panneau Performances.

Problème Chromium: 40262073.

Autres points forts

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

  • Réseau :
    • Correction d'un bug lié à l'analyse incorrecte des cookies multilignes (325410304).
    • Correction de l'aperçu de la pile d'appels dans la colonne Initiator (327665602).
  • Surveillance des performances: les cases à cocher de suivi sont désormais identiques à celles du reste de l'interface utilisateur (1467464).
  • Sources: ajout de la mise en surbrillance de la syntaxe pour les documents XHTML (327940244).
  • Paramètres > Appareils: l'ancien Galaxy Fold est remplacé par le Galaxy Z Fold 5 (40113439).
  • Performances: tous les résultats de recherche correspondants sont désormais mis en surbrillance lorsque vous effectuez une recherche avec Ctrl/Cmd+F (1523279).
  • Ressources pour les développeurs: affiche désormais également les ressources chargées via des extensions de langage, telles que l'extension Chrome de compatibilité avec les outils pour les développeurs C/C++ (DWARF) (40746829).
  • Performances: correction de la pile d'appels rognée et de sa mauvaise mise en page dans l'onglet Récapitulatif (325314708).
  • Panneau: les boutons Close sont désormais sélectionnables, ce qui permet de fermer les panneaux à l'aide du clavier.

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.

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.