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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Repenser les filtres réseau

Le panneau Réseau propose de nouveaux filtres, repensés en fonction de vos commentaires. 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 aux tiers sont déplacées vers une liste déroulante. Sous le menu déroulant, un nombre indique le nombre de filtres sélectionnés.

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 du filtre, 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").

N'hésitez pas à nous faire part de votre avis sur cette nouvelle conception.

Problème Chromium: 362672528.

Les exportations au format 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 > Preferences > Network > Allow to generate HAR with sensitive data (Paramètres > Paramètres > Préférences > Réseau > Cocher la case "Autoriser la génération de HAR avec des données sensibles"). Le panneau Network (Réseau) affiche une flèche à côté du bouton (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.

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

Problème Chromium: 361717594.

Améliorations apportées au panneau "Elements"

Cette version apporte plusieurs 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:

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, celui-ci reflète le DOM actuel et disparaît si le contenu ne déborde plus 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 sans attributs 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 nue après la règle imbriquée ne provoque plus la réorganisation inattendue des styles dans la cascade par 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 vous rapprocher de l'expérience de vos utilisateurs.

Vous pouvez désormais parcourir les maillons dans la chronologie d'un enregistrement de performances: "sauter" d'un maillon à un 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 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}).
  • Vous pouvez effectuer des recherches sur ces noms créés par DevTools.
  • Regroupés s'ils partagent les mêmes propriétés.

Avant et après l'organisation de la catégorie "Object" dans les instantanés de tas.

Problème Chromium: 350519222.

Désactiver la thématisation dynamique

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

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

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 permet à 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 dans la barre d'informations lorsque les outils de développement sont ouverts, cela signifie que vous faites partie du petit groupe pour lequel le test du 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 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'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.

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 dont la valeur est vide, comme non définie (365578428).
  • Console: correction d'un esperluette 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é: 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

Envisagez d'utiliser Chrome Canary, Dev ou Bêta 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 élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

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