Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Déplacer et masquer des parcours grâce au nouveau mode de configuration des canaux

Vous pouvez désormais accéder au mode de configuration du canal en effectuant un clic droit sur le nom du canal, puis en sélectionnant Configurer les canaux. Le bouton de modification qui nécessitait plus d'espace a été supprimé.

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

Problème Chromium: 336266699.

Ignorer les scripts dans le graphique de type "flamme"

Le graphique de type "flamme" dans le canal Principal est compatible avec les listes d'éléments à ignorer. Vous pouvez maintenant effectuer un clic droit sur un script du graphique et sélectionner Ajouter le 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 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.

Réduire le processeur 20 fois

Le menu de limitation du processeur dans les Paramètres de capture du panneau Performances dispose d'une nouvelle option de ralentissement de 20 fois. Ainsi, vous pouvez désormais reproduire et analyser avec plus de précision des problèmes de performances concrets, 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.

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

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

Pour en savoir plus, consultez Outils d'optimisation des performances en 2024 et au-delà.

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

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

Lorsque vous ignorez les en-têtes, vous pouvez désormais coller une chaîne d'en-tête complète (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.

Découvrez un exemple concret dans 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 traits d'union et des traits de soulignement.

Avertissement affiché à 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 souhaité.

Problèmes Chromium: 330967147, 337012362, 328210785.

Identifier une utilisation excessive de la mémoire grâce aux nouveaux filtres dans les instantanés de segments de mémoire

Les instantanés de tas de mémoire dans le panneau Memory (Mémoire) reçoivent de nouveaux filtres qui peuvent vous aider à identifier les cas courants d'utilisation de la mémoire inefficace, tels que les chaînes en double, les objets conservés par des nœuds DOM dissociés et la console DevTools.

Les options avant/après ajout de filtres 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 maintenant inspecter les buckets de stockage dans une arborescence dédiée sous Application > Stockage. Cette arborescence, qui était auparavant expérimentale, est activée par défaut.

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

Problème Chromium: 338094915.

Désactiver les avertissements auto-XSS à l'aide d'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 à des fins de débogage, vous aurez souvent besoin de désactiver l'avertissement auto-XSS qui s'affiche dans chaque nouvelle session d'outils de développement.

Boîte de dialogue d'avertissement "self-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 la catégorie des PWA, la réorganisation des catégories SEO, l'abandon des économies globales, ainsi que de nouveaux audits et modifications des audits. 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 du site Web.

Problème Chromium: 772558.

Points forts divers

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

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

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.