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

Sofia Emelianova
Sofia Emelianova
GitHub

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.

Panneau de saisie automatique

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.

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 Paramètres > Limitation, puis sélectionnez ce paramètre dans le panneau 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.

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

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

L'onglet Éléments > Styles améliore la compatibilité de l'imbrication CSS et affiche désormais les styles imbriqués avec des retraits et des accolades. L'imbrication CSS permet de regrouper des règles CSS afin de rendre les choses moins détaillées et plus structurées.

Avant et après l'ajout d'un retrait, et les styles imbriqués entre 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 de type "flamme"

Pour filtrer le bruit du graphique de flammes sous Performances > Principale, 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.

Avant et après, ajout d'un menu contextuel qui vous permet de masquer les fonctions et leurs enfants.

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.

Les boutons "avant" et "après" affichent des flèches allant de la sélection aux événements initiés et aux liens nommés au lieu de "Révéler".

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 Lighthouse 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.

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ées à la trace des performances, mais peut ralentir la génération du rapport.

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

La trace est disponible sous le menu "Tools" (Outils) more_vert > View Unthrottled Trace (Afficher la trace non limitée) après avoir généré le rapport Lighthouse.

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 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.

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

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 section Application > Stockage > Stockage partagé affiche désormais le nombre d'octets utilisés par une origine.

Valeurs "avant" et "après" indiquant le nombre d'octets utilisés pour le stockage partagé.

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:

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

Le calcul avant et après est correct des statistiques d'enfants correspondantes.

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

Le code "avant" et "après" a changé la couleur du code utilisé en gris.

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.

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

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 :
    • 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 Galaxy Z Fold 5, plus récent (40113439).
  • Performances: tous les résultats de recherche avec correspondance 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 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 une suggestion ou un commentaire via crbug.com.
  • Signalez un problème dans les outils de développement en sélectionnant Autres options   More   > Aide > Signaler un problème dans les outils de développement 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

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été annulé.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59