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

Sofia Emelianova
Sofia Emelianova
GitHub

Nouveau panneau de saisie automatique

Cette version ajoute le nouveau panneau Saisie automatique aux outils de développement. La saisie automatique de Chrome permet de remplir facilement et automatiquement les formulaires sur les sites Web avec les adresses enregistrées. Le nouveau panneau Remplissage automatique vous permet d'inspecter le mappage entre les champs de votre formulaire, les valeurs de remplissage automatique prédites 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 ..., puis sur Envoyer. Dans la boîte de dialogue Enregistrer l'adresse ?, cliquez sur Enregistrer, puis revenez à la page contenant le formulaire.
  2. Ouvrez les outils de développement et déclenchez un événement de saisie 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 déduits par la saisie automatique et les valeurs enregistrées.

Panneau de saisie automatique.

Pour en savoir plus, consultez Découvrir Forms et Remplissage automatique.

Limitation de bande passante réseau améliorée pour WebRTC

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

Les nouveaux paramètres sont les suivants : Perte de paquets (en %), Longueur de la file d'attente des paquets (nombre de paquets) et le paramètre 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. Tout d'abord, autorisez la page à utiliser l'appareil photo. Ensuite, dans le panneau Réseau, sélectionnez le profil personnalisé que vous avez configuré. De retour sur la page, cliquez sur Démarrer et 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, indiqué par une icône de souris.

Un groupe d'animations marqué par une icône de apparaît dans la vue d'ensemble. Vous pouvez maintenant l'inspecter. Le groupe affiche des valeurs en pixels 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 accolades. L'imbrication CSS permet de regrouper les règles CSS pour les rendre moins verbeuses et plus structurées.

Avant et après l'ajout d'indentation et l'inclusion des styles imbriqués dans des accolades.

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 flammes

Pour filtrer le bruit du graphique en flammes 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 et sélectionnez une option dans le menu contextuel.

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

Les fonctions dont les enfants sont masqués sont associées à un bouton Menu déroulant à droite. Pointez dessus pour afficher 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 et sélectionnez Réinitialiser la trace.

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

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

Avant et après : flèches indiquant les événements sélectionnés et initiés, et liens nommés au lieu de "Afficher".

De plus, tous les initiateurs disposent désormais de champs Initiateur pour dans l'onglet Résumé. Les champs Initiateur pour et Initié par comportent 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. Ce paramètre est désactivé par défaut.

Avant et après l'ajout d'un paramètre d'échantillonnage JS avec option d'activation.

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

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

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

Avant et après l'affichage d'un info-bulle descriptif pour des groupes d'objets spéciaux.

Problème Chromium : 41490331.

Application > Informations sur l'espace de stockage

Cette version apporte quelques modifications à Application > Stockage.

Octets utilisés pour le stockage partagé

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

Avant et après : nombre d'octets utilisés pour le stockage partagé.

Shared Storage vous permet de bénéficier d'un accès en écriture illimité et multisite, avec un accès en lecture respectueux de la confidentialité.

Problème Chromium : 324464353.

Web SQL est entièrement obsolète

Chrome a déclaré Web SQL obsolète 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.

Les outils de développement ont également supprimé la section Web SQL du panneau Application.

Problème Chromium : 327254049.

Améliorations apportées au panneau "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 celles de leurs parents.

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

  • La couleur du code utilisé est désormais grise au lieu de verte pour améliorer la visibilité, en particulier pour les personnes atteintes de déficience de la vision des couleurs sans perception du vert.

Avant et après le changement de couleur du code utilisé en gris.

Problème Chromium : 41494198, 329253687.

Le panneau des calques va peut-être devenir obsolète

Le panneau Calques va peut-être devenir obsolète, car il est peu utilisé. Une bannière d'avertissement s'affiche désormais en haut du panneau.

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

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

Arrêt du profileur JavaScript : phase quatre, finale

Dans cette version, le panneau JS Profiler 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 importants

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 Initiateur (327665602).
  • Surveillance des performances : les cases à cocher sont désormais identiques à celles du reste de l'UI (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 nouveau Galaxy Z Fold5 (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 linguistiques, telles que l'extension Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Performances : correction de la pile d'appels recadrée et de sa mauvaise mise en page dans l'onglet Résumé (325314708).
  • Panneau : Les boutons Fermer 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 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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.