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 nouveau mode de configuration des pistes

Vous pouvez désormais accéder au mode de configuration des canaux en cliquant avec le bouton droit sur le nom du canal et en sélectionnant Configurer les canaux. Le bouton de modification qui nécessitait un espace supplémentaire a été supprimé.

Avant et après le remplacement du bouton de modification 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 le canal, ou sur masquer. Pour quitter le mode de configuration, cliquez sur Terminer la configuration des pistes en bas de l'écran. Cette configuration persiste pour les nouvelles traces, mais pas pour les prochaines sessions DevTools.

Problème Chromium: 336266699.

Ignorer les scripts dans le graphique en forme de flamme

Le graphique en forme de flamme du canal Principal est compatible avec la liste d'éléments à ignorer. Vous pouvez désormais effectuer un clic droit sur un script dans le graphique, puis sélectionner Ajouter le script à la liste d'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 "Paramètres".

Le graphique réduit les scripts ignorés, les marque comme Dans la liste d'ignorer et les ajoute aux Règles d'exclusion personnalisées dans  > Paramètres > Liste d'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 le CPU 20 fois

Le menu de limitation du processeur dans les paramètres de capture du panneau Performances propose une nouvelle option de ralentissement 20 fois. Vous pouvez ainsi 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 ralenti" aux "Paramètres de capture".

Problème Chromium: 324978881.

Abandon du panneau "Informations sur les performances"

Le panneau expérimental Informations sur les performances sera abandonné en 2024. L'équipe DevTools 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 pour vous informer de l'abandon prochain de cette fonctionnalité.

Bannière d'avertissement d'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 que nous pourrions améliorer, n'hésitez pas à nous en faire part.

Coller l'intégralité des chaînes d'en-tête pour les remplacer

Lorsque vous remplacez des en-têtes, vous pouvez désormais coller une chaîne d'en-tête complète (HEADER_NAME: VALUE). DevTools divisera alors la chaîne à l'emplacement : en nom d'en-tête et valeur.

Pour voir comment cela fonctionne, regardez la vidéo suivante.

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 tirets 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 de remplacement 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.

Détecter une utilisation excessive de la mémoire avec de nouveaux filtres dans les instantanés de tas de mémoire

Les instantanés de tas du panneau Mémoire bénéficient 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 des nœuds DOM dissociés et la console des outils pour les développeurs.

Avant et après l'ajout d'options de filtre 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 une arborescence dédiée dans la section Application > Stockage. Cet arbre, qui était auparavant expérimental, a été activé par défaut.

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

Problème Chromium: 338094915.

Désactiver les avertissements d'auto-XSS à l'aide d'un indicateur de ligne de commande

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

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 de la catégorie "Économies globales", de nouveaux audits et des modifications apportées aux audits. 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:

  • 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 effacés automatiquement lors de la prochaine session DevTools.
    • L'onglet Statistiques du sélecteur ne défile plus automatiquement vers le bas lorsque vous faites un zoom sur le graphique en forme de flamme et que les données changent (337999939).
  • Console: le raccourci Ctrl+` ne ferme désormais la console dans le panneau latéral que si elle est sélectionnée (40875466, 328210785).
  • Saisie automatique: correction de l'analyse des adresses (335409093, 335409707).
  • Accessibilité: correction des annonces du lecteur d'écran pour les chaînes localisées (324930007).

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 plate-forme 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.