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

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations apportées au panneau "Réseau"

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

Des filtres réseau repensés

Le panneau Réseau est doté 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 épurée.

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

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

Pour revenir à l'ancienne conception des filtres, décochez Paramètres > Expérimental > Nouvelle conception de la barre de filtres dans le panneau "Réseau".

Dites-nous ce que vous pensez de cette nouvelle interface.

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 les en-têtes Cookie, Set-Cookie et Authorization par défaut.

Pour exporter les journaux au format HAR avec les données sensibles, activez Paramètres > Préférences > Réseau > Autoriser la génération au format HAR (y compris des données sensibles). Dans le panneau Réseau, le bouton Exporter  est marqué d'une flèche. Appuyez de manière prolongée sur le bouton, puis sélectionnez Exporter au format 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 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 de 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.

Débordements de défilement signalés par un badge

Le panneau Éléments affiche désormais un nouveau badge "scroll" pour les éléments qui contiennent du contenu en dépassement et qui ont overflow: scroll ou overflow: auto. Vous pouvez ainsi repérer facilement les dépassements de défilement. Comme les autres badges, celui-ci reflète le DOM actuel et disparaît si le contenu cesse de déborder (par exemple, en raison 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 brutes après les règles imbriquées ne sont pas "décalées vers le haut"

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

Dans l'exemple de code suivant, la déclaration brute après la règle imbriquée n'entraîne plus le réordonnancement inattendu des styles dans la cascade par Chrome :

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

  background-color: green;
}

Avant et après l'autorisation des déclarations brutes après 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 statistiques en direct

Les métriques en direct peuvent désormais fournir des recommandations spécifiques aux métriques qui vous aident à configurer votre environnement de développement de manière aussi proche que possible de ce que vivent vos utilisateurs.

Pour obtenir des recommandations, configurez la récupération 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 d'environnement.

Sections développées avec des recommandations.

Suivez les recommandations pour vous faire une idée de l'expérience de vos utilisateurs.

Vous pouvez désormais parcourir les fils d'Ariane dans la timeline d'un enregistrement des performances : "sauter" d'un fil d'Ariane à un autre, remplacer un fil d'Ariane enfant et supprimer plusieurs enfants. Auparavant, lorsque vous sélectionniez un breadcrumb parent, 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 propose un nouveau type de profil : Éléments détachés. Il indique les objets conservés par une référence JavaScript.

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

Problème Chromium : 350519222.

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

Pour organiser et désencombrer la catégorie Object dans les instantanés de tas, 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 les rechercher par ces noms construits par les outils de développement.
  • Regroupées si elles ont les mêmes propriétés.

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

Problème Chromium : 350519222.

Désactiver le thème dynamique

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

Pour désactiver le thème dynamique, décochez Paramètres > Préférences > Apparence  Utiliser le jeu de couleurs de Chrome, puis rechargez les outils de développement.

Avant et après la désactivation du thème dynamique.

Problème Chromium : 328472696.

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

Si vous voyez le message "Cet onglet partage des ressources avec d'autres onglets…" dans une info-bulle lorsque les outils de développement sont ouverts, cela signifie que vous faites partie du petit groupe pour lequel l'expérience de partage de processus est activée.

Info-barre "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: Process sharing.

Lighthouse 12.2.1

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

Cette mise à jour introduit un seuil d'ignorance < 20 KB pour les suggestions de compression des 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 bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 772558.

Autres points importants

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, en tant que valeurs indé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 service 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 Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.