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

Sofia Emelianova
Sofia Emelianova
GitHub

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Déplacer et masquer des pistes avec le mode de configuration des pistes mis à jour

Vous pouvez désormais accéder au mode de configuration des pistes en effectuant un clic droit sur le nom de la piste et en sélectionnant Configurer les pistes. Le bouton de modification qui nécessitait de l'espace supplémentaire a été supprimé.

Avant et après le remplacement du bouton "Modifier" par une option de menu.

Le mode de configuration des pistes vous permet de modifier l'ordre des pistes et de les masquer. Cliquez sur vers le haut ou vers le bas pour déplacer la piste, ou sur pour la masquer. Pour quitter le mode configuration, cliquez sur Terminer la configuration des pistes en bas de l'écran. Cette configuration est conservée pour les nouvelles traces, mais pas pour les prochaines sessions DevTools.

Problème Chromium : 336266699.

Ignorer les scripts dans le graphique en flammes

Le graphique en flammes de la piste Principale est désormais compatible avec la liste des éléments à ignorer. Vous pouvez désormais effectuer un clic droit sur un script dans le graphique et sélectionner Ajouter le script à la liste des scripts à ignorer.

Option de menu permettant d'ajouter le script à la liste des éléments à ignorer, scripts marqués comme ignorés et règles correspondantes dans les paramètres.

Le graphique réduit les scripts ignorés, les marque comme Dans la liste des éléments à ignorer et les ajoute aux Règles d'exclusion personnalisées dans Paramètres > Liste des éléments à ignorer. Les scripts ignorés sont enregistrés jusqu'à ce que vous les supprimiez de la trace ou des Règles d'exclusion personnalisées.

Problème Chromium : 336266714.

Limiter la consommation de ressources processeur par 20

Le menu de limitation du processeur dans les paramètres de capture du panneau Performances propose une nouvelle option Ralentissement x20. Vous pouvez donc désormais reproduire et analyser plus précisément les problèmes de performances réels, même sur des ordinateurs haut de gamme.

Avant et après l'ajout de l'option "20x slowdonw" (Ralentissement x20) aux "Paramètres de capture".

Problème Chromium : 324978881.

Le panneau "Informations sur les performances" va être abandonné

Le panneau expérimental Informations sur les performances sera abandonné en 2024. L'équipe des outils pour les développeurs travaille à l'intégration de ses fonctionnalités les plus utiles au panneau Performances. Le panneau Insights sur les performances affiche désormais une bannière en haut de la page pour vous informer de la prochaine obsolescence.

Bannière d'avertissement de l'obsolescence dans le panneau "Informations sur les performances".

Pour en savoir plus, consultez Outils de performances en 2024 et au-delà.

Si vous avez des commentaires sur ce qui fonctionne, ce qui ne fonctionne pas et ce qui pourrait être amélioré, n'hésitez pas à nous les faire savoir.

Collez les chaînes d'en-tête entières pour les remplacer.

Lorsque vous remplacez des en-têtes, vous pouvez désormais coller une chaîne d'en-tête entière (HEADER_NAME: VALUE). Les outils de développement diviseront la chaîne au niveau de : en un nom d'en-tête et sa valeur.

Regardez la vidéo suivante pour voir comment cela fonctionne.

Lorsque vous modifiez des en-têtes, le panneau Réseau vous avertit désormais si vous avez saisi des caractères autres que des caractères alphanumériques, des traits d'union et des traits de soulignement.

Avertissement à côté d'un nom d'en-tête contenant des caractères non acceptés.

De plus, les options de menu "Remplacer" et les boutons Modifier sont désactivés pour les URL chrome://, ce qui correspond au comportement prévu.

Problèmes Chromium : 330967147, 337012362, 328210785.

Identifier une utilisation excessive de la mémoire grâce aux nouveaux filtres des instantanés du tas

Les instantanés du tas du panneau Mémoire sont dotés de nouveaux filtres qui peuvent vous aider à identifier les cas courants d'utilisation inefficace de la mémoire, tels que les chaînes en double, les objets conservés par les nœuds DOM détachés et la console des outils pour les développeurs.

Avant et après l'ajout d'options de filtrage pour les cas courants d'utilisation inefficace de la mémoire.

Problème Chromium : 337094903.

Inspecter les buckets de stockage dans Application > Stockage

Vous pouvez désormais inspecter les buckets de stockage dans un arbre dédié dans la section Application > Stockage. Cet arbre, qui était auparavant expérimental, a été activé par défaut.

Arborescence des buckets de stockage avant et après l'activation dans la section "Stockage".

Problème Chromium : 338094915.

Désactiver les avertissements d'auto-XSS avec un indicateur de ligne de commande

Si vous automatisez l'utilisation de Chrome ou si vous ouvrez les outils de développement à partir de la ligne de commande pour le débogage, vous souhaiterez souvent désactiver l'avertissement d'auto-XSS qui s'affiche à chaque nouvelle session des outils de développement.

Boîte de dialogue d'avertissement d'auto-XSS dans la console.

Vous pouvez désormais désactiver cette boîte de dialogue en transmettant l'indicateur de ligne de commande --unsafely-disable-devtools-self-xss-warnings à Chrome.

Problème Chromium : 41491762.

Lighthouse 12.0.0

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

Cette mise à jour apporte un certain nombre de modifications, y compris la suppression de la catégorie PWA, la réorganisation de la catégorie SEO, l'abandon des économies globales, de nouveaux audits et des modifications d'audit. Consultez la liste complète des modifications.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, 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 :

  • Performances :
    • Les paramètres de capture lente (Activer l'instrumentation de peinture avancée et Activer les statistiques du sélecteur CSS) sont désormais automatiquement effacés lors de la prochaine session Outils de développement.
    • L'onglet Statistiques du sélecteur ne défile plus automatiquement vers le bas lorsque vous zoomez sur le graphique en flammes et que les données changent (337999939).
  • Console : le raccourci Ctrl+` ferme désormais la console dans le tiroir uniquement si elle est sélectionnée (40875466, 328210785).
  • Saisie automatique : l'analyse des adresses est corrigée (335409093, 335409707).
  • Accessibilité : les annonces du lecteur d'écran pour les chaînes localisées ont été corrigées (324930007).

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.