Nouveautés de DevTools (Microsoft Edge 102)

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

Vidéo : Microsoft Edge | Nouveautés de DevTools 102

Extension DevTools : nouveau navigateur avec émulation d’appareil et de mode et prise en charge de la carte source

L’extension Microsoft Edge DevTools pour Visual Studio Code dispose désormais d’un aperçu du navigateur qui vous permet d’émuler différents appareils. Cliquez sur le nouveau bouton Émuler les fonctionnalités multimédias CSS () pour afficher un aperçu du projet actuel dans différents modes, tels que Sombre, Clair, Impression et Contraste élevé :

Cliquez sur le nouveau bouton Émuler les déficiences visuelles () pour tester facilement l’accessibilité, par exemple en montrant à quoi ressemble la page Web avec une vision floue ou des défaillances visuelles des couleurs.

Parmi les autres nouvelles fonctionnalités, citons un moyen plus simple de basculer la mise en miroir CSS, qui prend désormais en charge les cartes de source. Cela signifie que vous pouvez déboguer et modifier les CSS créés par Sass, React et d’autres abstractions en direct dans le navigateur et voir les modifications dans les fichiers sources.

Voir aussi :

• Émulation d’appareil et d’état
• Mettez en correspondance le code traité avec votre code source original, pour le débogage
• Modification du miroir CSS avec Sourcemaps : problèmes connus et commentaires

Enregistrer toutes les chaînes à partir d’un instantané de segment de mémoire dans JSON

Dans Microsoft Edge 102, lors de la prise d’un instantané de tas dans l’outil Mémoire, vous pouvez désormais exporter tous les objets chaîne de l’instantané vers un fichier JSON. Dans l’outil Mémoire , dans la section Constructeur , cliquez sur le nouveau bouton Enregistrer tout dans un fichier en regard de l’entrée (string) .

L’outil Mémoire exporte un fichier JSON qui contient tous les objets chaîne de l’instantané de tas :

Voir aussi :

• Enregistrez et exportez des chaînes à partir d’un instantané de segment de mémoire vers JSON dans Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »).#

Nouveaux filtres pour les dispositifs de rétention dans l’outil Mémoire

Dans les versions précédentes de Microsoft Edge, les cycles et les nœuds internes étaient affichés dans la section Retainers d’un instantané de tas. Pour simplifier le chemin de rétention, dans Microsoft Edge 102, la section Dispositifs de rétention de l’outil Mémoire comporte désormais de nouveaux filtres pour masquer les cycles et les nœuds internes dans le chemin de rétention.

Dans la section Retainers , un nœud cyclé est indiqué par un effet grisé.

Dans l’image suivante, dans le menu déroulant Filtrer les bords , Masquer les tronçons n’est pas sélectionné, donc un nœud cyclé (grisé) s’affiche :

Dans l’image suivante, dans le menu déroulant Filtrer les arêtes , Masquer les tronçons est sélectionné, de sorte que le nœud cyclé n’est pas affiché :

Les cycles sont des nœuds qui apparaissent au moins deux fois dans un chemin de rétention. Une apparition d’un nœud est antérieure dans le chemin de rétention, et d’autres apparences de ce nœud se trouvent plus tard dans le chemin de rétention. Pour libérer de la mémoire, il est très important de supprimer l’occurrence du nœud qui apparaît en premier dans le chemin de retenue. La deuxième apparition et les suivantes potentielles du nœud sont toujours affichées dans la section Retainers .

Les nœuds internes sont des objets spécifiques à V8 (le moteur JavaScript de Microsoft Edge). Les nœuds internes sont également affichés dans la section Retainers .

Voir aussi :

• Masquer les cycles dans Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »).#

L’info-bulle Inspecter l’élément peut maintenant être conservée jusqu’à ce que vous la couvriez

Auparavant, dans l’outil Elements , la superposition du nœud que vous avez sélectionné ne s’affichait qu’au survol lorsque vous utilisiez l’outil Inspecter (). La conception précédente était difficile à utiliser avec une loupe d’écran ou d’autres technologies d’assistance.

Dans Microsoft Edge 102, lorsque vous utilisez l’outil Inspecter et que vous vous déplacez dans la page web rendue, vous pouvez conserver la superposition Inspecter actuelle. Appuyez de façon prolongée sur Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) pendant que vous vous déplacez dans la page web rendue. L’info-bulle et la superposition de couleurs de grille existantes pour l’outil Inspecter restent affichées lorsque vous pointez sur différentes parties de la page web rendue :

De plus, vous pouvez désormais appuyer sur Ctrl pour masquer la superposition de l’outil Inspecter pendant que vous déplacez le pointeur de la souris sur la page web rendue.

Pour consulter l’historique de cette fonctionnalité dans le projet open source Chromium, consultez Problème 1316208.

Voir aussi :

• Persistance de l’info-bulle et de la superposition de couleurs de grille de l’outil Inspecter dans Analyser les pages à l’aide de l’outil Inspecter.
• Persistance de l’info-bulle de l’outil Inspecter et de la superposition de couleurs de grille dans Navigate DevTools avec une technologie d’assistance.

Amélioration du rendu des menus déroulants, des boutons et des icônes en mode contraste élevé

Dans les versions précédentes de Microsoft Edge, les éléments suivants ne s’affichaient pas correctement en mode contraste élevé :

• Menus déroulants de l’outil Problèmes .
• Boutons de l’outil Éléments détachés .
• Barre d’activités en mode Focus.

Dans Microsoft Edge 102, ces problèmes ont été résolus.

Les menus de l’outil Problèmes s’affichent correctement en mode contraste élevé :

L’interface utilisateur de l’outil Éléments détachés s’affiche correctement en mode contraste élevé :

La barre d’activités et le panneau Affichage rapide (lors de l’utilisation du mode Focus) s’affichent correctement en mode contraste élevé :

Voir aussi :

• Naviguer dans DevTools avec les technologies d’assistance
• Mode contraste élevé Windows

En savoir plus sur les expériences dans DevTools à partir des Paramètres

Dans la pageExpériencesde paramètres>, chaque expérience dispose désormais d’un bouton Aide () :

Pour obtenir plus d’informations sur une fonctionnalité expérimentale, cliquez sur le bouton Aide () correspondant. Le bouton d’aide affiche la section correspondante de l’article Fonctionnalités expérimentales dans Microsoft Edge DevTools .

Meilleure disposition des paramètres réseau lorsqu’il est étroit

Dans les versions précédentes de Microsoft Edge, l’ouverture des paramètres réseau avec l’icône d’engrenage dans l’outil Réseau se chevauchait lorsque les DevTools étaient très étroits :

Dans Microsoft Edge 102, ce problème a été résolu. Les paramètres individuels s’affichent mieux dans les dispositions étroites :

Voir aussi :

• Capture des captures d’écran pendant le chargement de la page dans la référence des fonctionnalités réseau, à propos des paramètres configurables de l’outil Réseau.

Annonces du projet Chromium

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

• Nouveaux raccourcis pour émuler des thèmes clairs et sombres
• Sécurité améliorée sous l’onglet Aperçu réseau
• Rechargement amélioré au point d’arrêt
• Mises à jour de la console
  • Gérer les erreurs d’exécution de script dans la console
  • Valider une expression dynamique avec Entrée
• Afficher les pseudo-éléments de surbrillance hérités dans le volet Styles
• [Expérimental] Copier les modifications CSS
• [Expérimental] Sélection d’une couleur en dehors du navigateur

Voir aussi

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