Nouveautés de DevTools (Microsoft Edge 109)

Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.

Vidéo : Nouveautés de DevTools 109

Importez et exportez vos instances DevTools avec la nouvelle fonctionnalité de traces améliorée

Dans Microsoft Edge 109, vous pouvez activer de nouveaux paramètres pour exporter des suivis améliorés à partir des outils Performances et Mémoire . Ces suivis améliorés incluent d’autres informations, telles que :

• Messages enregistrés sur la console.
• Code JavaScript qui s’exécutait sur la page au moment de l’enregistrement.
• Instantanés du DOM.

Lors de l’enregistrement de profils de performances, d’instantanés de tas, de chronologies d’allocation ou d’un échantillonnage d’allocation, vous pouvez désormais exporter un nouveau .devtools format de fichier. Lorsque vous importez ensuite le fichier, une nouvelle instance de DevTools s’ouvre.devtools, avec l’état de vos outils Éléments, Console et Sources conservé. Ces traces améliorées offrent une nouvelle façon puissante de collaborer et de partager les informations dans vos DevTools.

Pour essayer la fonctionnalité de traces améliorées :

1. Dans DevTools, cliquez sur le bouton Paramètres ().

2. Dans la section Persistance de la page des paramètres Préférences , cochez la case Exporter les performances améliorées et les traces mémoire :

   

3. Si vous souhaitez conserver les messages de console, JavaScript ou les captures instantanées DOM, cochez les cases correspondantes.

4. Cliquez sur le bouton Fermer (x) dans les paramètres DevTools.

5. Dans l’outil Performances , effectuez un enregistrement.

6. Cliquez sur le bouton Enregistrer le profil ().

7. Dans la boîte de dialogue Enregistrer sous , enregistrez le nouveau .devtools fichier.

Importation :

1. Importez le .devtools fichier à partir de l’outil Performances en cliquant sur le bouton Profil de chargement () :

   

2. Une nouvelle fenêtre DevTools s’ouvre, contenant un sous-ensemble des outils, y compris l’outil Performances chargé avec le profil que vous venez d’enregistrer. Les outils Éléments, Console et Sources sont également préremplis avec leur état préservé :

   

Vous pouvez également exporter à partir de l’outil Mémoire avec le nouveau .devtools format de fichier. Il s’agit d’une nouvelle fonctionnalité que l’équipe DevTools expérimente activement. Veuillez donc nous envoyer vos commentaires dans [Commentaires] Expérience de traces améliorées #122.

Voir aussi :

• Partager une trace mémoire avec plus de données
• Partager un suivi des performances avec plus de données

Déboguer des événements de recalcul de style de longue durée avec de nouvelles statistiques de sélecteur

Dans Microsoft Edge 109, dans l’outil Performances , vous pouvez activer le paramètre Activer l’instrumentation de rendu avancée (lent) dans l’outil Performances pour accéder à la nouvelle fonctionnalité de statistiques de sélecteur.

Avec ce paramètre désactivé :

1. Sélectionnez Enregistrer, puis exécutez le scénario que vous souhaitez améliorer sur votre site web ou votre application.

2. Sélectionnez Arrêter.

3. Sélectionnez un événement Recalculer le style . Dans la section inférieure de l’outil Performances , sélectionnez l’onglet Statistiques du sélecteur :

   

L’onglet Statistiques du sélecteur fournit une liste de tous les sélecteurs CSS qui ont été calculés par le moteur du navigateur lors de l’événement Recalculer le style . Vous pouvez trier les sélecteurs en fonction du temps écoulé qu’ils ont pris pour le traitement ou du nombre d’éléments correspondants (la colonne Nombre de correspondances ). Utilisez ces données pour :

• Recherchez les sélecteurs qui prennent beaucoup de temps à traiter par le navigateur et simplifiez-les.
• Rendez les sélecteurs plus spécifiques pour améliorer les performances.

Voir aussi :

• La vérité sur les performances du sélecteur CSS - billet de blog
• [Commentaires] Explication du suivi des performances du sélecteur · Numéro #98
• Analyser les performances du sélecteur CSS pendant les événements de recalcul de style

Suivre les objets abandonnés par le nettoyage de la mémoire lors de l’échantillonnage d’allocation

Dans Microsoft Edge 109, le type de profilage d’échantillonnage d’allocation dans l’outil Mémoire dispose désormais de deux nouvelles options :

• Inclure les objets rejetés par les principaux GC.

• Inclure les objets rejetés par les GC mineurs.

Sans sélectionner ces options, l’outil Mémoire continuera de fonctionner comme avant, signalant les allocations qui sont encore actives à la fin de la session de profilage. Dans ce mode, les objets qui sont générés et ramassés par la mémoire (GC) et qui disparaissent ensuite ne sont pas suivis par l’échantillonnage d’allocation.

Sélectionnez les deux options si vous souhaitez suivre les déchets générés par votre site web ou votre application. Dans le profil obtenu, vous pourrez voir les déchets générés par vos fonctions JavaScript qui ont ensuite été classées en GC. Utilisez ces options si vous souhaitez réduire la quantité de déchets générés par votre code. Pour en savoir plus sur les différences entre GC majeur et mineur, voir Trash talk : le ramasse-miettes de l’Orénoque.

Voir aussi :

• Étudiez l’allocation de mémoire, avec moins de déchets (cases à cocher « Inclure les objets ») dans Accélérer le runtime JavaScript (type de profilage « échantillonnage d’allocation »).

Extension du visualiseur d’instantané de tas pour DevTools

Ajoutez la nouvelle extension du visualiseur d’instantanés de tas à Microsoft Edge pour obtenir de nouvelles visualisations des données qui se trouvent dans vos fichiers instantané de tas. L’installation de cette extension ajoute un nouvel outil de visualisation d’instantané de tas dans DevTools. Dans l’outil Heap Snapshot Visualizer, vous pouvez charger un fichier de instantané de tas pour le voir représenté sous forme de graphique dirigé ou d’arborescence. Ces nouvelles visualisations vous permettent d’explorer la chaîne de retenues, de la racine du nettoyage de la mémoire (GC) à un nœud individuel.

Vue graphique :

Arborescence :

Voir aussi :

• Visualiseur d’instantané de tas sur le site web des modules complémentaires Microsoft Edge .

Améliorations apportées à l’affichage rapide en mode Focus

Nous avons écouté vos commentaires et amélioré les options Affichage rapide en mode Focus. Au lieu de proposer uniquement un sous-ensemble des outils dans une liste déroulante Affichage rapide , vous pouvez désormais sélectionner n’importe quel outil DevTools en cliquant sur le bouton Plus d’outils (), comme dans la barre d’outils principale de DevTools. Chargez n’importe quel outil dans le panneau Aperçu rapide de DevTools, pour afficher plusieurs outils en même temps.

L’état de votre barre d’outils Affichage rapide est conservé entre les sessions DevTools. Le panneau Affichage rapide se réduit automatiquement si vous ouvrez le même outil dans le volet supérieur de DevTools.

Accédez directement aux onglets Styles et Styles calculés de l’outil Éléments

Il y avait un problème d’accessibilité où les utilisateurs de la commande vocale ne pouvaient pas accéder à l’onglet Styles ou à l’onglet Calculé dans l’outil Éléments . Vous pouvez désormais accéder à ces onglets via deux nouvelles commandes dans le menu Commande :

• Afficher les styles
• Afficher les styles calculés

Voir aussi :

• Exécuter des commandes dans le menu Commande
• Naviguer dans DevTools avec les technologies d’assistance

Annonces du projet Chromium

Microsoft Edge 109 inclut également les mises à jour suivantes du projet Chromium :

• Afficher les noms de fonctions réels dans les enregistrements des performances
• Nouveaux raccourcis clavier dans le panneau Console & Sources
• Amélioration du débogage JavaScript

Voir aussi

• Nouveautés de Microsoft Edge DevTools
• Notes de publication pour la plateforme web Microsoft Edge