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

Sofia Emelianova

Améliorations apportées au panneau "Network" (Réseau)

Cette version apporte plusieurs améliorations au panneau Réseau.

Refonte des filtres réseau

Nous avons repensé le panneau Network (Réseau) en fonction de vos commentaires, grâce à de nouveaux filtres. Les filtres spécifiques au type restent les mêmes : un ensemble de badges dans une barre de sélection multiple claire.

Pour désencombrer l'interface utilisateur, les cases à cocher de masquage, de blocage et liées à des tiers sont déplacées vers une liste déroulante. La liste comporte un nombre qui indique le nombre de filtres cochés dans la liste déroulante.

Pour rétablir l'ancienne interface de filtrage, effacez les paramètres Paramètres > Tests > check_box_outline_blank Refonte de la barre de filtre dans le panneau "Network" (Réseau).

Donnez-nous votre avis sur ce nouveau design.

Problème Chromium: 362672528.

Les exportations HAR excluent désormais les données sensibles par défaut

Pour réduire les risques de fuites accidentelles d'informations sensibles, le journal réseau exporté au format HAR ne contiendra plus d'en-têtes Cookie, Set-Cookie et Authorization par défaut.

Pour exporter les journaux au format HAR avec les données sensibles, activez settings Settings > Preferences > Network > check_box Allow to generate HAR with sensitive data (Paramètres > Paramètres > Préférences > Réseau > Cocher la case "Autoriser la génération au format HAR avec des données sensibles"). Le panneau Network (Réseau) affiche une flèche à côté du bouton Download (Télécharger) Export (Exporter). Appuyez de manière prolongée sur le bouton, puis sélectionnez Exporter le fichier HAR (avec des données sensibles) dans le menu déroulant.

Problème Chromium: 361717594.

Améliorations apportées au panneau "Elements"

Cette version apporte un certain nombre d'améliorations au panneau Éléments.

Valeurs de saisie semi-automatique pour les propriétés text-emphasis-*

La saisie semi-automatique dans l'onglet Styles suggère désormais des valeurs pour les propriétés CSS suivantes :

• Raccourci text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Problème Chromium: 361471205.

Dépassement de défilement signalé par un badge

Le panneau Éléments affiche désormais un nouveau "défilement". Badgez les éléments qui contiennent trop de contenu et qui comportent overflow: scroll ou overflow: auto, afin de pouvoir facilement repérer les dépassements de contenu lors du défilement. Comme les autres badges, ce badge reflète le DOM actuel et disparaît si le contenu cesse de dépasser en raison, par exemple, d'un changement de taille.

Problème Chromium : 40670442.

Les déclarations brutes après des règles imbriquées ne sont pas "déplacées vers le haut".

Suite à la décision du groupe de travail CSS d'autoriser les déclarations brutes à suivre les règles imbriquées, l'onglet Styles ne "déplace plus" ces déclarations lors de l'analyse.

Dans l'exemple de code suivant, la déclaration simple après la règle imbriquée n'entraîne pas la réorganisation inattendue des styles dans la cascade dans Chrome:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Problème Chromium: 358119261.

Améliorations du panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Recommandations dans les métriques en direct

Les métriques en direct peuvent désormais fournir des recommandations spécifiques aux métriques pour vous aider à configurer votre environnement de développement le plus près possible de l'expérience de vos utilisateurs.

Pour obtenir des recommandations, configurez l'extraction de données réelles à partir du rapport d'expérience utilisateur Chrome (CrUX), puis développez la section Tenir compte de vos conditions de test locales dans chaque fiche de métrique (le cas échéant) et Tenir compte des environnements utilisateur réels dans les paramètres de l'environnement.

Suivez les recommandations pour se rapprocher de l'expérience de vos utilisateurs.

Parcourir le fil d'Ariane

Vous pouvez désormais parcourir les maillons dans la chronologie d'un enregistrement de performances : "sauter" d'un maillon à l'autre, écraser un maillon enfant et supprimer plusieurs maillons enfants. Auparavant, lorsque vous sélectionniez un élément parent du fil d'Ariane, ses enfants disparaissaient.

Améliorations apportées au panneau "Mémoire"

Cette version apporte un certain nombre d'améliorations au panneau Memory (Mémoire).

Nouveau profil "Éléments dissociés"

Le panneau Mémoire bénéficie d'un nouveau type de profil : Éléments détachés. Il affiche les objets conservés par une référence JavaScript.

Problème Chromium: 350519222.

Amélioration de la dénomination des objets JavaScript simples

Pour organiser et désencombrer la catégorie Object dans les instantanés de tas de mémoire, les objets JavaScript simples sont désormais :

• Nommés en fonction des propriétés qu'ils contiennent (par exemple, {firstProperty, secondProperty, ..., *nthProperty}).
• Inclus dans l'index de recherche, ces noms sont créés par les outils de développement.
• Regroupés s'ils ont les mêmes propriétés.

Problème Chromium : 350519222.

Désactiver la thématisation dynamique

Vous pouvez désormais désactiver la correspondance automatique des couleurs des outils de développement avec les couleurs de votre thème personnalisé dans Chrome.

Pour désactiver la thématisation dynamique, désélectionnez settings Settings > Preferences > Appearance > check_box_outline_blank Match Chrome color scheme (Paramètres > Préférences > Apparence > Correspondre au jeu de couleurs de Chrome) et actualisez DevTools.

Problème Chromium : 328472696.

Chrome Testing: partage de processus

Normalement, lorsque vous ouvrez plusieurs onglets à partir du même site Web (comme Google Docs), Chrome crée un processus de rendu distinct pour chacun d'eux. Le test du partage de processus modifie ce comportement en permettant à plusieurs onglets de partager le même processus de moteur de rendu afin d'améliorer les performances.

Si le message "Cet onglet partage des ressources avec d'autres onglets" s'affiche, barre d'informations lorsque les outils de développement sont ouverts, cela signifie que vous faites partie du petit groupe pour lequel le test de partage de processus est activé.

Le partage de processus peut affecter le débogage des points d'arrêt et l'analyse des performances. Pour en savoir plus, consultez Test Chrome : partage de processus.

Lighthouse 12.2.1

Le panneau Lighthouse exécute désormais Lighthouse 12.2.1.

Cette mise à jour introduit un seuil d'omission de < 20 KB pour les suggestions de compression des ressources afin de vous aider à vous concentrer uniquement sur les économies significatives de taille de fichier. Consultez la liste complète des modifications.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse de votre site Web.

Problème Chromium : 772558.

Autres points forts

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

• Éléments :
  • Plusieurs corrections pour la modification du CSS imbriqué (41486635, 361477264, 328263458, 41487826).
  • Correction de l'analyse des propriétés personnalisées définies, mais avec une valeur vide, comme non définies (365578428).
• Console : correction d'un esperluet non échappé dans les chaînes multilignes des commandes cURL (352651673).
• Mémoire : correction de la sélection par défaut sur les pages avec des services workers. Le thread principal est désormais sélectionné (40669896).
• Sécurité: le schéma d'URL qui est mis en évidence est désormais correctement mis à jour lorsque l'étape de sécurité d'une origine change (359920086).

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 décrites dans l'article, ou pour tout autre sujet lié aux outils de développement.

• Envoyez-nous une suggestion ou des 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.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur nos vidéos YouTube sur les nouveautés dans DevTools ou sur nos vidéos YouTube sur les conseils DevTools.

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