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

Sofia Emelianova
Sofia Emelianova

Améliorations du 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 maintenant passer en mode de configuration des canaux en effectuant un clic droit sur le nom du canal, puis en sélectionnant Configurer les canaux. Le bouton "Modifier" qui nécessitait de l'espace supplémentaire a été supprimé.

Remplacement du bouton "Modifier" par une option de menu avant et après.

Le mode de configuration des pistes vous permet de modifier l'ordre des pistes et de les masquer. Cliquez sur la flèche arrow_upward vers le haut ou arrow_downward vers le bas pour déplacer le tracé, ou cliquez sur Masquer visibility_off. Pour quitter le mode de configuration, cliquez sur Terminer la configuration des canaux en bas de la page. Cette configuration persiste pour les nouvelles traces, mais pas lors des prochaines sessions des outils de développement.

Problème Chromium: 336266699.

Ignorer les scripts dans le graphique de type "flamme"

Le graphique de type "flamme" du canal Main est compatible avec les listes d'éléments à ignorer. Vous pouvez maintenant effectuer un clic droit sur un script dans le graphique, puis sélectionner Ajouter un script à la liste des éléments à ignorer.

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

Le graphique réduit les scripts ignorés, les marque comme Sur la liste des éléments à ignorer et les ajoute aux Règles d'exclusion personnalisées dans Paramètres > Paramètres > Liste d'é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.

Réduire le processeur par 20

Le menu de limitation du processeur dans Paramètres de capture du panneau Performances dispose d'une nouvelle option Ralenti x20. Vous pouvez ainsi reproduire et analyser avec plus de précision des problèmes de performances réels, même sur des ordinateurs haut de gamme.

Avant et après l'ajout de "20x slowdonw" l'option "Paramètres de capture".

Problème Chromium: 324978881.

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

Le panneau expérimental Insights sur les performances sera abandonné en 2024. L'équipe DevTools travaille actuellement à l'intégration de ses fonctionnalités les plus utiles dans le panneau Performance. Le panneau Informations sur les performances affiche désormais une bannière en haut de l'écran pour vous informer de l'abandon à venir.

Bannière d'avertissement concernant l'abandon dans "Insights sur les performances" panneau.

Pour en savoir plus, consultez Outils d'optimisation des performances à partir de 2024.

Si vous avez des commentaires sur ce qui fonctionne, ce qui ne fonctionne pas et ce que vous pensez pouvoir améliorer, n'hésitez pas à nous en faire part.

Collez des 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 complète (HEADER_NAME: VALUE), et les outils de développement diviseront la chaîne à : en un nom d'en-tête et sa valeur.

Pour en savoir plus, regardez la vidéo suivante.

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

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

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

Problèmes Chromium: 330967147, 337012362, 328210785

Identifier les utilisations excessives de la mémoire à l'aide de nouveaux filtres dans les instantanés de segments de mémoire

Les instantanés de tas de mémoire du panneau Memory (Mémoire) obtiennent de nouveaux filtres qui peuvent vous aider à identifier des cas courants d'utilisation inefficace de la mémoire, tels que des chaînes dupliquées, des objets conservés par des nœuds DOM dissociés et la console DevTools.

Options de filtrage avant et après l'ajout 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 sous Application > Stockage. Cette arborescence, auparavant expérimentale, a été activée par défaut.

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 auto-XSS à l'aide d'une option de ligne de commande

Si vous automatisez l'utilisation de Chrome ou que vous ouvrez les outils de développement à partir de la ligne de commande à des fins de débogage, il est souvent utile de désactiver l'avertissement auto-XSS qui s'affiche dans chaque nouvelle session des outils de développement.

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

Vous pouvez maintenant 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 la version 12.0.0.

Cette mise à jour apporte un certain nombre de modifications, y compris la suppression de catégories PWA, la réorganisation des catégories SEO, l'abandon de la fonctionnalité É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 les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

  • Performances: <ph type="x-smartling-placeholder">
      </ph>
    • Les paramètres de capture lente (Activer l'instrumentation avancée de peinture et Activer les statistiques du sélecteur CSS) sont désormais supprimés automatiquement lors de la prochaine session des outils de développement.
    • L'onglet Statistiques du sélecteur ne défile plus automatiquement vers le bas lorsque vous effectuez un zoom sur le graphique de flammes et des modifications de données (337999939).
  • Console: le raccourci Ctrl+` ferme désormais la console dans le panneau uniquement si elle est active (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 sont fixes (324930007).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

  • Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème dans les outils de développement.
  • Tweetez à l'adresse @ChromeDevTools.
  • Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement