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

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

Sofia Emelianova

Nouveau panneau de saisie automatique

Dans cette version, le nouveau panneau Saisie automatique est désormais disponible dans les outils de développement. La saisie automatique de Chrome offre un moyen pratique de remplir automatiquement des formulaires sur les sites Web à l'aide d'adresses enregistrées. Le nouveau panneau Saisie automatique vous permet d'inspecter le mappage entre les champs de formulaire, les valeurs de saisie 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:

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.
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. Il affiche les champs de formulaire détectés, les champs déduits de la saisie automatique et les valeurs enregistrées.

Panneau "Saisie automatique"

Pour en savoir plus, consultez Apprendre à utiliser Forms et Saisie automatique.

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

Grâce au nouvel ajout de paramètres liés aux paquets aux profils de limitation du réseau personnalisés, vous pouvez désormais limiter vos applications WebRTC directement dans les outils de développement. Cela s'avère utile pour tester la mise en œuvre de vos communications en temps réel, sans avoir besoin d'utiliser un logiciel tiers.

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

Pour limiter une connexion WebRTC, spécifiez les paramètres liés aux paquets dans un profil personnalisé dans settings Settings > Throttling (Paramètres > Throttling) et sélectionnez le paramètre dans le panneau Network (Réseau).

Testez les nouveaux paramètres sur cette page de démonstration. Commencez par autoriser la page à utiliser l'appareil photo. Ensuite, dans le panneau Réseau, sélectionnez le profil personnalisé que vous avez configuré et, sur la page, cliquez sur Démarrer, puis sur 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 des 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 des animations liées au défilement.

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

Un groupe d'animations signalé par une icône représentant une souris apparaît dans Aperçu. Vous pouvez maintenant l'inspecter. Le groupe affiche les 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 compatibilité avec l'imbrication CSS et affiche désormais les styles imbriqués avec un retrait et entre accolades. L'imbrication CSS permet de regrouper les règles CSS afin de les rendre moins détaillées et plus structurées.

L'avant et après l'ajout d'un retrait et l'encadrement des styles imbriqués entre accolades.

Problème Chromium: 40166888.

Panneau "Performances améliorées"

Cette version apporte plusieurs améliorations au panneau Performances.

Masquer des fonctions et leurs enfants dans le graphique de type "flamme"

Pour filtrer le bruit du graphique de 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.

Les fonctions avec des enfants masqués comportent un bouton Liste déroulante arrow_drop_down sur la droite. Passez la souris 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 flammes, effectuez un clic droit sur une fonction, puis sélectionnez Réinitialiser la trace.

Flèches vers les événements qu'ils ont lancés

Auparavant, lorsque vous sélectionniez un événement dans le titre principal, une flèche remontait à son déclencheur vers l'événement sélectionné. Désormais, le circuit affiche également une flèche reliant l'événement sélectionné à celui qui a été lancé, le cas échéant.

Les flèches avant/après affichent des flèches permettant d'accéder aux événements sélectionnés et aux liens nommés au lieu de l'option "Afficher".

De plus, tous les créateurs d'initiation disposent désormais de champs Initiateur pour dans l'onglet Résumé, et les champs Initiateur de et Initié par ont des liens nommés au lieu de Révéler.

Problèmes Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

Parmi les changements notables figurent le nouveau paramètre d'activation check_box_outline_blank 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 activable

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

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

La trace est disponible sous more_vert 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 du 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 de mémoire

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

L'avant et l'après affichage d'une info-bulle descriptive pour des groupes spéciaux d'objets.

Problème Chromium: 41490331.

Application > Mises à jour du stockage

Cette version apporte quelques mises à jour à Application > Storage.

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.

L'avant et l'après montrant le nombre d'octets utilisés pour le stockage partagé.

L'espace de stockage partagé vous permet de bénéficier d'un accès en écriture à l'espace de stockage intersite illimité et d'un accès en lecture protégeant la confidentialité.

Problème Chromium: 324464353.

Web SQL est entièrement obsolète

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

Suivant l'exemple, 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 mises à jour au panneau Couverture:

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

Le calcul avant et après le calcul correct des statistiques enfants correspondantes.

La couleur du code utilisé est désormais grise au lieu de vert pour améliorer la visibilité, en particulier en cas de déficience visuelle sans vert.

L'avant et après le changement de la couleur du code utilisé en gris.

Problème Chromium: 41494198, 329253687.

Le panneau "Calques" peut être obsolète

Le panneau Calques sera peut-être bientôt obsolète en raison de sa faible utilisation. Le panneau affiche désormais une bannière d'avertissement en haut de l'écran.

Bannière d'avertissement annonçant l'abandon potentiel en haut du panneau des calques.

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

Abandon du profileur JavaScript: phase 4, dernière

Dans cette version, le panneau Profileur JS est désormais 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.

Points forts divers

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

Réseau :
- Correction d'un bug qui provoquait l'analyse incorrecte des cookies multilignes (325410304).
- Correction de l'aperçu de la pile d'appel dans la colonne Initiateur (327665602).
Contrôleur 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), plus récent.
Performances: tous les résultats de recherche correspondants sont désormais mis en surbrillance lorsque vous effectuez une recherche à l'aide de la combinaison de touches Ctrl/Cmd+F (1523279).
Ressources pour les développeurs: affiche désormais également les ressources chargées via des extensions de langage, comme l'extension Chrome C/C++ DevTools Support (DWARF) (40746829).
Performances: correction de la pile d'appel recadrée et de sa mauvaise mise en page dans l'onglet Summary (Résumé). (325314708)
Panneau: les boutons de fermeture 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.