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

Nouveau panneau de saisie automatique

Cette version apporte le nouveau panneau Autofill (Saisie automatique) aux outils de développement. La saisie automatique de Chrome est un outil pratique pour remplir automatiquement les formulaires sur les sites Web avec des adresses enregistrées. Le nouveau panneau Saisie automatique vous permet d'inspecter la correspondance entre les champs de votre 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:

1. Dans la section 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 du 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 de la saisie automatique et les valeurs enregistrées.

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

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

Avec l'ajout récent de paramètres liés aux paquets aux profils personnalisés de limitation de bande passante réseau, vous pouvez désormais limiter vos applications WebRTC directement dans les outils de développement. Cette fonctionnalité est utile pour tester l'implémentation de votre communication en temps réel, sans avoir besoin d'utiliser de 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 indicateur 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 > Limitation et sélectionnez-la dans le panneau Network (Réseau).

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

Un groupe d'animations marqué d'une icône représentant une souris apparaît dans la section Aperçu. Vous pouvez maintenant l'inspecter. Le groupe affiche les valeurs de pixels au lieu de millisecondes dans la timeline.

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

La page Éléments > L'onglet Styles améliore la prise en charge de l'imbrication CSS et affiche désormais les styles imbriqués avec retraits et accolades. L'imbrication CSS permet de regrouper des règles CSS afin de créer des éléments moins détaillés et plus structuré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 de type "flamme"

Filtrer le bruit du graphique de flammes dans Performances > Main, vous pouvez désormais masquer les fonctions non pertinentes et leurs enfants. Dans le graphique de flammes, effectuez un clic droit sur une fonction et choisissez une option dans le menu contextuel.

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

Flèches allant des auteurs sélectionnés aux événements qu'ils ont initiés

Auparavant, lorsque vous sélectionniez un événement dans le canal Main (Principal), une flèche reliant son initiateur à l'événement sélectionné s'affichait. Désormais, le canal affiche également une flèche reliant l'événement sélectionné à celui qu'il a lancé, le cas échéant.

De plus, tous les initiés disposent désormais de champs Initiator for (Initiateur pour) dans l'onglet Summary (Résumé), et les champs Initiator for (Initiateur de) et Initié par, sont associés à des liens au lieu de Reveal (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. Consultez la liste complète des modifications.

Parmi les changements notables, citons le nouveau paramètre d'activation check_box_outline_blank Activer l'échantillonnage JS. Ce paramètre est désactivé par défaut.

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

La trace est disponible dans le menu "Outils" de more_vert > Affichez la trace non limitée après avoir généré le rapport Lighthouse.

Pour découvrir les principes de base 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 d'objets spéciaux 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 détaillée dans la documentation.

Problème Chromium: 41490331.

Application > Mises à jour de l'espace de stockage

Cette version apporte quelques mises à jour à Application > Stockage :

Octets utilisés pour le stockage partagé

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

Le stockage partagé vous permet de bénéficier d'un accès en écriture illimité à un espace de stockage intersites tout en respectant 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'é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 des URL filtrées. Auparavant, au lieu de additionner les données d'utilisation des enfants correspondant au filtre, les données de leurs parents étaient additionnées.

• Pour améliorer la visibilité, le code utilisé est désormais en gris au lieu de vert, en particulier pour déficience visuelle en couleur non verte.

Problème Chromium: 41494198, 329253687.

Le panneau "Calques" est peut-être obsolète

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

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

Abandon du Profileur JavaScript: phase 4, 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 Performance.

Problème Chromium: 40262073.

Points importants divers

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

• Réseau: <ph type="x-smartling-placeholder">
  </ph>
  • 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).
• Analyseur des performances: les cases à cocher de suivi sont désormais les mêmes que dans le reste de l'interface utilisateur (1467464).
• Sources: ajout de la coloration syntaxique pour les documents XHTML (327940244).
• Paramètres > Appareils: l'ancien Galaxy Fold est remplacé par le plus récent, le Galaxy Z Fold 5 (40113439).
• Performances: tous les résultats de recherche avec correspondance sont désormais mis en surbrillance lorsque vous effectuez une recherche avec Ctrl/Ctrl+Ctrl (1523279).
• Ressources pour les développeurs: affiche désormais également les ressources chargées via des extensions de langage, telles que l'extension Chrome C/C++ DevTools Support (DWARF) Chrome (40746829).
• Performances: correction de la pile d'appel recadrée et de sa mise en page incorrecte dans l'onglet Summary (Résumé). (325314708)
• Vous pouvez désormais sélectionner le bouton Panneau Fermer Fermer, ce qui permet de fermer les panneaux à l'aide du clavier.

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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement