Nouveautés de DevTools (Microsoft Edge 114)

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

Conseil

La conférence Microsoft Build 2023 s’est tenue du 23 au 25 mai 2023. Pour en savoir plus sur les nouvelles fonctionnalités de débogage de la mémoire, des performances et de la production dans DevTools, ainsi que sur les nouvelles fonctionnalités des PWA dans la barre latérale, WebView2 et les plug-ins de chat, regardez les vidéos suivantes :

Vidéo : Nouveautés des DevTools 113 et 114

Image miniature de la vidéo « Nouveautés de DevTools 113 et 114 »

Statistiques du sélecteur d’agrégation dans l’outil Performances

Microsoft Edge 109 a ajouté la fonctionnalité Statistiques de sélecteur à l’outil Performances . Vous pouvez utiliser les données des statistiques de sélecteur pour comprendre quels sélecteurs CSS prennent le plus de temps lors des événements de recalcul de style dans l’outil Performance et contribuent au ralentissement des performances.

Dans la version 114 de Microsoft Edge, vous n’avez plus besoin de sélectionner un événement de style de recalcul individuel pour afficher les sélecteurs qui ont été recalculés pendant cet événement. Au lieu de cela, l’onglet Statistiques de sélection dans le volet inférieur de l’outil Performance agrège automatiquement les données de tous les événements de recalcul de style dans le profil enregistré. Lorsque vous zoomez sur des parties spécifiques du profil, l’onglet Statistiques du sélecteur est mis à jour pour afficher uniquement les données de la partie du profil que vous analysez actuellement.

En outre, une nouvelle colonne de feuille de style a été ajoutée à l’onglet Statistiques du sélecteur . La colonne Feuille de style contient un lien pour chaque sélecteur vers la feuille de style où le sélecteur est défini.

Les statistiques de sélecteur sont désormais agrégées entre les événements Recalculer le style dans la section actuellement affichée du profil enregistré

Merci d’utiliser la fonctionnalité Statistiques de sélecteur et de partager vos commentaires avec nous dans GitHub Problème #98 : [Commentaires] Explication du suivi des performances du sélecteur !

Voir aussi :

L’outil Problèmes et le volet Styles mettent en garde contre les propriétés CSS qui déclenchent la disposition

DevTools détecte et avertit désormais des propriétés CSS qui peuvent provoquer des problèmes de performances basées sur la disposition lors de l’utilisation d’une animation CSS dans la page web, par exemple le déplacement de texte. La mise en page est le processus de navigateur Web permettant de recalculer les positions et les géométries des éléments dans le document, afin de restituer une partie ou la totalité du document. La mise en page étant une opération de blocage des utilisateurs dans le navigateur, nous vous recommandons de limiter la mise en page autant que possible, afin que votre contenu reste fluide et réactif à l’interaction.

Certaines propriétés CSS ne déclenchent pas d’opération de mise en page, car elles s’exécutent sur le thread du compositeur dans le navigateur, telles que la transformation et l’opacité. Toutefois, même les propriétés CSS qui ne déclenchent pas la disposition peuvent déclencher une opération Paint qui, lorsqu’elle est utilisée en combinaison avec des animations CSS, peut avoir un impact négatif sur les performances.

Dans le volet Styles de l’outil Éléments , un soulignement ondulé et une info-bulle ont été ajoutés sur les propriétés CSS qui déclenchent les opérations de mise en page ou de peinture. Pour afficher le problème dans une info-bulle, placez le curseur sur le soulignement ondulé :

Problème de mise en page CSS dans le volet Styles

Dans l’outil Problèmes , dans la catégorie Performances , un nouveau type de problème est signalé, par exemple « Les modifications apportées à cette propriété déclencheront : « Disposition », qui peut avoir une incidence sur les performances lorsqu’elle est utilisée à l’intérieur @Keyframes». Lorsque vous utilisez le volet Styles pour ouvrir le problème dans l’outil Problèmes , Maj+clic sur le trait de soulignement ondulé sur une telle propriété, ou cliquez avec le bouton droit sur le trait de soulignement ondulé, puis sélectionnez Afficher les problèmes. L’outil Problèmes s’ouvre dans le tiroir (désormais le panneau Affichage rapide ) en bas de DevTools :

Problème de mise en page CSS dans l’outil Problèmes

Voir aussi :

L’outil Mémoire peut charger des traces améliorées d’une taille supérieure à 1 Go

Dans les versions précédentes de Microsoft Edge, le chargement d’une trace améliorée supérieure à 1 Go échouait. Ce problème a été résolu dans la version 114 de Microsoft Edge. Vous pouvez désormais charger des traces améliorées de n’importe quelle taille.

Les traces améliorées sont une fonctionnalité expérimentale de Microsoft Edge qui vous permet d’exporter et d’importer des instances DevTools entières, enregistrées sous forme .devtools de fichiers, avec autant d’état préservé que possible dans les outils Mémoire, Performances, Éléments, Console et Sources . Un .devtools fichier s’ouvre dans une instance DevTools distincte et charge les informations de trace suivantes, tout en conservant les références au code source :

  • Captures instantanées DOM.
  • Messages de console.
  • Instantanés de tas.
  • Profils de performance.

Suivi amélioré

Voir aussi :

L’outil Mémoire compare plus précisément deux instantanés de segment de mémoire

Dans l’outil Mémoire , vous pouvez prendre plusieurs instantanés de segment de mémoire et les comparer pour rechercher les différences entre les objets du tas. Dans les versions précédentes de Microsoft Edge, l’outil Mémoire signalait un trop grand nombre d’objets nouveaux et supprimés lors de la comparaison des instantanés de tas, car les ID d’objets n’étaient pas suivis de manière cohérente par l’outil. En fait, beaucoup d’entre eux sont probablement les mêmes objets.

Dans Microsoft Edge 114, ce problème a été résolu en veillant à ce que les ID d’objet cohérents soient suivis sur plusieurs instantanés.

Comparaison de deux instantanés de segment de mémoire dans Microsoft Edge 114

Voir aussi :

Améliorations de l’accessibilité pour l’outil de vue d’ensemble du CSS

Dans Microsoft Edge 112, l’outil de vue d’ensemble CSS a été mis à jour pour afficher une liste de sélecteurs non simples lors de la prise d’un instantané de vue d’ensemble du CSS d’une page web. Dans Microsoft Edge 114, la section Sélecteurs non simples de l’outil de vue d’ensemble CSS est désormais plus facile à utiliser avec des technologies d’assistance, telles que les lecteurs d’écran.

Lorsque vous cliquez sur un sélecteur ou que vous accédez à un sélecteur, puis appuyez sur Entrée, les lecteurs d’écran annoncent désormais « Sélecteur CSS copié » :

Navigation dans l’outil de vue d’ensemble du CSS avec le clavier

Voir aussi :

L’extension DevTools pour VS Code offre une meilleure prise en charge du mode contraste élevé

Dans les versions précédentes de l’extension Microsoft Edge DevTools pour Visual Studio Code, en mode contraste élevé, le fait de pointer sur les icônes dans les outils ne rendait pas les contrôles de l’interface utilisateur avec un contraste suffisant. Le problème a été corrigé.

Par exemple, dans le volet Styles de l’outil Éléments , les cases à cocher permettant d’appliquer des styles aux éléments s’affichent désormais correctement en mode contraste élevé :

Pointage sur les cases à cocher du volet Styles en mode contraste élevé dans l’extension VS Code

Par ailleurs, dans l’outil Console , les icônes telles que Afficher la barre latérale de la console s’affichent désormais correctement en mode contraste élevé :

Pointage sur le bouton Afficher la barre latérale de la console en mode contraste élevé dans l’extension VS Code

Voir aussi :

Annonces du projet Chromium

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

Voir aussi

  • Dernière mise à jour :