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

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations du panneau "Network"

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 épurée.

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 vous indique le nombre de filtres cochés dans la liste déroulante.

Avant et après le déplacement des filtres de masquage, de blocage et liés à des tiers dans un menu déroulant.

Pour rétablir l'ancienne conception des filtres, effacez Settings > Experiments > Redesign of the filter bar in the Network panel (Paramètres > Tests > Réorganisation de la barre de filtre dans le panneau "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 fuite accidentelle d'informations sensibles, le journal réseau exporté au format HAR ne contiendra plus par défaut les en-têtes Cookie, Set-Cookie et Authorization.

Pour exporter des journaux au format HAR contenant les données sensibles, activez > Paramètres > Préférences > Réseau > Autoriser la génération de fichiers HAR à partir de données sensibles. Le panneau Network (Réseau) affiche une flèche à côté du bouton (Télécharger) Export (Exporter). Effectuez un clic long sur le bouton, puis sélectionnez Exporter le fichier HAR (avec données sensibles) dans le menu déroulant.

Avant et après l'ajout d'options d'exportation avec et sans données sensibles à l'exportation HAR.

Problème Chromium: 361717594.

Améliorations du panneau "Éléments"

Cette version apporte plusieurs améliorations au panneau Éléments.

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

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

Avant et après l'ajout de l'option de saisie semi-automatique pour les propriétés "text-emphasis-*".

Problème Chromium : 361471205.

Les éléments en trop dans le défilement sont signalés par un badge

Le panneau Éléments affiche désormais un nouveau badge "défilement" sur les éléments contenant du contenu débordant et ayant overflow: scroll ou overflow: auto, ce qui vous permet de repérer facilement les débordements de 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.

Avant et après le marquage des débordements de défilement avec un badge.

Problème Chromium: 40670442.

Les déclarations nues après les règles imbriquées ne "décalent pas" vers le haut

Conformément à la décision du groupe de travail CSS de permettre des déclarations simples après 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;
}

Avant et après, les déclarations brutes peuvent suivre les règles imbriquées.

Problème Chromium : 358119261.

Améliorations apportées au 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 des données de champ à 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.

Sections développées avec des recommandations.

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

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

Améliorations du panneau "Mémoire"

Cette version apporte plusieurs améliorations au panneau 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.

Avant et après avoir ajouté le type de profil "Éléments détachés" au panneau "Mémoire".

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 partagent les mêmes propriétés.

Avant et après l'organisation de la catégorie "Objet" dans des instantanés de segments de mémoire

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ésactivez les Paramètres > Préférences > Apparence > Utiliser le jeu de couleurs Chrome, puis actualisez les Outils de développement.

Avant et après la désactivation de la thématisation dynamique

Problème Chromium : 328472696.

Test Chrome : 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 Partage de processus change cela en permettant à plusieurs onglets de partager le même processus de rendu pour améliorer les performances.

Si le message "Cet onglet partage des ressources avec d'autres onglets..." s'affiche 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é.

Barre d'informations "Cet onglet partage des ressources avec d'autres onglets..."

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

Lighthouse 12.2.1

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

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

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

Problème Chromium : 772558.

Points importants divers

Voici quelques correctifs et améliorations importants dans 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'une esperluette non échappée 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é : la mise en surbrillance du schéma d'URL est désormais correctement mise à jour lorsque le niveau de sécurité d'une origine change (359920086).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser la version Canary, Dev ou Bêta de Chrome comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à 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, des mises à jour ou de tout autre sujet lié aux outils de développement.

Nouveautés des outils de développement

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.