Fonctionnalités expérimentales dans Microsoft Edge DevTools

Microsoft Edge DevTools fournit un accès aux fonctionnalités expérimentales qui sont encore en cours de développement. Cet article répertorie et décrit les fonctionnalités expérimentales qui se trouvent dans :

• Dernière version du canal d’évaluation Canary de Microsoft Edge.
• Dernière version de la version stable de Microsoft Edge.

Tous les canaux de Microsoft Edge ont des fonctionnalités expérimentales. Vous pouvez obtenir les dernières fonctionnalités expérimentales à l’aide de la canal Microsoft Edge Canary. Pour afficher la liste complète des expériences disponibles dans votre version de Microsoft Edge, consultez la page Expériences des paramètres> dans DevTools.

Ces expériences peuvent être instables ou peu fiables et peuvent vous obliger à redémarrer DevTools.

Expériences activées par défaut

Les fonctionnalités expérimentales suivantes sont activées par défaut. Vous pouvez utiliser ces fonctionnalités immédiatement, sans modifier les paramètres. Vous pouvez désactiver ces fonctionnalités expérimentales par défaut, si nécessaire.

Activé par défaut dans Microsoft Edge Canary 131 :

• Nouvelle conception de la barre de filtre dans le panneau Réseau
• Panneau de remplissage automatique
• Panneau performances : activer la page d’accueil des métriques en direct
• Enable webhint
• Afficher les problèmes dans les éléments
• Fichiers open source dans Visual Studio Code

Activé par défaut dans Microsoft Edge Stable 129 :

• Activer le sélecteur de page d’arrière-plan (pour le pré-affichage)
• Panneau de remplissage automatique
• Enable webhint
• Afficher les problèmes dans les éléments
• Fichiers open source dans Visual Studio Code
• Panneau Activer les chargements spéculatifs dans le panneau Application

Activation ou désactivation d’une expérience

Les fonctionnalités expérimentales sont constamment mises à jour et peuvent entraîner des problèmes de performances. C’est l’une des raisons pour lesquelles vous souhaiterez peut-être désactiver une expérience.

Pour activer ou désactiver une expérience dans Microsoft Edge :

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans DevTools, dans la barre d’outils main, cliquez sur le bouton Personnaliser et contrôler DevTools (), puis cliquez sur le bouton Paramètres (). Ou appuyez sur Maj+ ?.

3. Sur le côté gauche du panneau Paramètres , sélectionnez la page Expériences :

   

4. Activez ou désactivez la case à cocher pour une expérience. Certaines expériences sont sélectionnées par défaut.

5. Cliquez sur Fermer () dans le coin supérieur droit des paramètres DevTools.

6. Cliquez sur le bouton Recharger DevTools .

Restauration des valeurs par défaut pour lesquelles les expériences sont sélectionnées

Pour restaurer les paramètres par défaut pour lesquels les fonctionnalités expérimentales sont activées :

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans DevTools, dans la barre d’outils main, cliquez sur le bouton Paramètres (). Ou appuyez sur Maj+ ?. Le panneau Paramètres s’ouvre, avec la page Préférences sélectionnée.

3. En bas de la page Préférences, cliquez sur le bouton Restaurer les valeurs par défaut et actualiser, puis cliquez sur Fermer ().

Filtrage des expériences

Vous pouvez filtrer les fonctionnalités expérimentales par texte inclus dans le titre.

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans DevTools, dans la barre d’outils main, cliquez sur le bouton Paramètres (). Ou appuyez sur Maj+ ?. Le panneau Paramètres s’ouvre, avec la page Préférences sélectionnée.

3. Sur le côté gauche du panneau Paramètres , sélectionnez la page Expériences .

4. Cliquez dans la zone de texte Filtrer et entrez du texte, tel que chronologie. À mesure que vous tapez, seules les cases à cocher correspondantes s’affichent dans la page Expériences .

5. Pour mettre fin au filtrage, désactivez la zone de texte Filtrer .

Fournir des commentaires sur les expériences

Nous sommes impatients de connaître vos commentaires sur les fonctionnalités expérimentales. Pour nous faire part de vos commentaires, contactez l’équipe Microsoft Edge DevTools.

Liste des expériences

Les cases à cocher des expériences qui s’affichent dans la dernière version du canal d’aperçu Canary de Microsoft Edge sont répertoriées ci-dessous. La version Stable est également indiquée, après l’ajout ou la suppression de cases à cocher dans Canary.

Autoriser les extensions à charger des feuilles de style personnalisées

Certains modules complémentaires Microsoft Edge peuvent définir des thèmes de couleurs personnalisés pour DevTools. Si vous installez un module complémentaire qui définit un thème de couleur personnalisé pour DevTools, vous devez activer l’expérience Autoriser les extensions à charger des feuilles de style personnalisées pour afficher les thèmes du module complémentaire.

Voir aussi :

• Appliquer un thème de couleur à DevTools

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Capturer les piles de création de nœuds

Pour capturer les traces de pile JavaScript lorsque des nœuds DOM sont ajoutés au DOM au moment de l’exécution, activez cette expérience. Cette expérience ajoute l’onglet Trace de pile dans l’outil Éléments , regroupé avec l’onglet Styles :

Après avoir activé l’expérience, vous pouvez la tester comme suit :

1. Dans une nouvelle fenêtre ou un nouvel onglet, ouvrez une page web qui crée dynamiquement des nœuds DOM via JavaScript, comme l’application de démonstration TODO.
2. Dans la page de démonstration rendue, créez un élément todo.
3. Dans la page de démonstration affichée, cliquez avec le bouton droit sur le nouvel élément todo, puis sélectionnez Inspecter. DevTools s’ouvre et affiche l’outil Éléments .
4. Cliquez sur l’onglet Trace de pile, qui est regroupé avec l’onglet Styles .

Voir aussi :

• Prise en main de l’affichage et de la modification du DOM

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Moniteur de protocole

Rend l’outil de surveillance de protocole disponible dans DevTools :

L’outil Moniteur de protocole affiche les messages envoyés et reçus par DevTools pour déboguer la page inspectée. DevTools communique avec la page inspectée à l’aide du protocole CDP (Chrome DevTools Protocol).

Pour activer cette case à cocher, puis ouvrir l’outil Moniteur de protocole :

1. Cochez cette case Moniteur de protocole comme décrit dans Activer ou désactiver une expérience, ci-dessus.

2. Dans l’affichage rapide en bas de DevTools, cliquez sur le bouton Plus d’outils (+), puis sélectionnez Moniteur de protocole.

   Vous pouvez également ouvrir le menu Commande, par exemple en appuyant sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (macOS), puis tapez protocole dans la zone de texte. Sélectionnez ensuite Afficher le moniteur de protocole.

   L’outil Moniteur de protocole s’affiche dans le panneau Affichage rapide en bas de DevTools.

Voir aussi :

• Utiliser le protocole CDP (Chrome DevTools Protocol) dans les applications WebView2
• [Expérimental] Moniteur de protocole dans Nouveautés de DevTools (Chrome 92).

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Option Afficher pour exposer des éléments internes dans des instantanés de tas

nouveau à partir de Microsoft Edge 105

Indique s’il faut afficher une case à cocher pour exposer des éléments internes dans des instantanés de tas dans l’outil Mémoire .

Voir aussi :

• Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « Tas instantané »)

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Désactiver temporairement les marqueurs de mise en retrait

nouveau à partir de Microsoft Edge 122

Désactive temporairement les marqueurs de retrait dans l’outil Sources . Les marqueurs de retrait sont les lignes verticales qui indiquent le niveau de retrait du code :

Voir aussi :

• Vue d’ensemble de l’outil Sources

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer un nouvel algorithme de contraste perceptif avancé (APCA) en remplaçant le ratio de contraste précédent et les recommandations AA/AAA

L’Algorithme de contraste perceptuel avancé (APCA) remplace le taux de contraste des instructions AA/AAA dans le sélecteur de couleur. Le sélecteur de couleurs est utilisé dans l’onglet Styles de l’outil Éléments.

APCA est une nouvelle manière de calculer le contraste. Cette méthode est basée sur des recherches modernes sur la perception des couleurs. Par rapport aux directives AA/AAA, l’algorithme APCA dépend davantage du contexte. Le contraste se calcule en fonction des propriétés spatiales suivantes du texte, de la couleur et du contexte.

• Propriétés spatiales du texte qui incluent le poids et la taille de la police.
• Propriétés spatiales de la couleur qui incluent le contraste perçu entre le texte et l’arrière-plan.
• Propriétés spatiales de contexte qui incluent la lumière ambiante, l’environnement et l’objectif prévu.

Voir aussi :

• Nouveau calcul de contraste de couleur - Algorithme avancé de contraste perceptuel (APCA) dans Nouveautés de DevTools (Microsoft Edge 89).
• Modifier les couleurs avec le sélecteur de couleurs dans Référence des fonctionnalités CSS.
• Tester le contraste de couleur de texte à l’aide de la Color Picker

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer l’arborescence d’accessibilité complète dans le panneau Éléments

Ajoute un bouton Basculer vers l’arborescence d’accessibilité dans l’outil Éléments qui bascule entre l’arborescence DOM et l’arborescence d’accessibilité. L’étiquette du bouton bascule en mode Basculer vers l’arborescence DOM.

Si cette case Expérience est décochée, l’outil Éléments ne dispose pas du bouton :

Si cette case Expérience est cochée, l’outil Éléments dispose du bouton :

L’arborescence d’accessibilité dans l’outil Éléments :

Voir aussi :

• Tester l’accessibilité à l’aide de l’onglet Accessibilité
• Arborescence d’accessibilité complète dans l’outil Éléments dans Nouveautés de DevTools (Microsoft Edge 90).

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer le nouvel éditeur de polices dans le volet Styles

Vous pouvez utiliser le visuel Police Rédacteur pour modifier les polices. Utilisez-la pour définir des polices et des caractéristiques de police. Le visuel Police Rédacteur vous aide à effectuer les opérations suivantes :

• Basculer entre les unités concernant différentes propriétés de police
• Basculer entre les mots clés de différentes propriétés de police
• Convertir des unités
• Générer un code CSS précis

Pour utiliser le visuel Police Rédacteur :

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

2. Dans DevTools, dans la barre d’outils main, sélectionnez l’onglet Éléments. Si l’onglet Éléments n’est pas visible, cliquez sur le bouton Plus d’onglets () ou sur le bouton Plus d’outils ().

3. Sous l’onglet Styles, sélectionnez l’icône Police Rédacteur.

   

Certains canaux de navigateur ont l’étiquette de case à cocher Activer la nouvelle police Rédacteur outil dans le volet Styles.

Voir aussi :

• Modifier les styles et paramètres de police CSS dans le volet Styles

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer le rapport automatique des problèmes de contraste via le panneau Problèmes

Active la création de rapports automatiques sur les problèmes de contraste dans l’outil Problèmes .

Voir aussi :

• Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer les fonctionnalités de cookies expérimentales

Active les fonctionnalités de cookies expérimentales.

Voir aussi :

• Afficher, modifier et supprimer des cookies

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Outil de création de longueur> CSS <déconseillé dans l’onglet Styles

Non applicable à Microsoft Edge. La sélection ou la désactivation de cette case à cocher n’a aucun effet.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Synchroniser les modifications CSS sous l’onglet Styles

Indique s’il faut synchroniser les modifications CSS sous l’onglet Styles de l’outil Éléments .

Voir aussi :

• Modifier les styles et paramètres de police CSS dans le volet Styles

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Met en surbrillance un nœud ou un attribut en violation dans l’arborescence DOM du panneau Éléments

nouveau à partir de Microsoft Edge 106

Met en surbrillance un nœud ou un attribut en violation dans l’arborescence DOM de l’outil Éléments .

Voir aussi :

• Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Regrouper les sources dans des arborescences créées et déployées

nouveau à partir de Microsoft Edge 104

Détermine s’il faut regrouper les ressources dans des arborescences Créées et Déployées distinctes sous l’onglet Page de l’outil Sources . Cette fonctionnalité de l’outil Sources vous permet de regrouper les fichiers sources dans deux dossiers selon qu’il s’agit des suivants :

• Fichiers sources d’origine (créés, c’est-à-dire les fichiers avec vos modifications locales).
• Fichiers de production (fichiers déployés sur le serveur web après la compilation et le regroupement des fichiers sources).

Voir aussi :

• Utilisation de l’onglet Page pour explorer les ressources qui construisent la page web actuelle dans Vue d’ensemble de l’outil Sources.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Masquer le code répertorié ignoré dans l’arborescence Des sources

nouveau à partir de Microsoft Edge 106

Dans l’arborescence de l’outil Sources , omet le code inclus dans la liste Ignorer.

Voir aussi :

• Ajouter des scripts de contenu à la liste Ignorer
• Liste d’ignorer améliorée
• Amélioration du paramètre Ignorer la liste

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Mettre en surbrillance les propriétés DOM importantes sous l’onglet Propriétés

nouveau à partir de Microsoft Edge 105

Si vous activez cette case à cocher, les propriétés DOM importantes sont mises en surbrillance sous l’onglet Propriétés d’outils tels que l’outil Éléments , pour l’élément d’arborescence DOM actuellement sélectionné. Cette nouvelle expérience rend les propriétés principales plus faciles à voir. Certaines propriétés apparaissent en gras, tandis que d’autres apparaissent en gras et comportent une icône de star à côté d’elles.

Cette mise en surbrillance est utile, car en JavaScript, les objets héritent d’objets parents, qui eux-mêmes héritent d’autres ancêtres, ce qui équivaut parfois à des centaines de propriétés. Cette expérience vous aide à trouver les propriétés main.

La visionneuse Propriétés de l’objet se trouve dans plusieurs outils, notamment Éléments, Sources, Console et Réseau. Il fournit une arborescence des propriétés des objets.

Dans l’outil Éléments

Pour afficher la visionneuse Propriétés de l’objet dans l’outil Éléments :

1. Cliquez avec le bouton droit sur un élément dans une page web, puis sélectionnez Inspecter. DevTools s’ouvre, avec l’élément page sélectionné dans l’arborescence DOM de l’outil Éléments .

2. Dans l’outil Éléments , sélectionnez l’onglet Propriétés , qui est regroupé avec l’onglet Styles .

   L’onglet Propriétés contient la liste des propriétés de l’élément sélectionné.

Voir aussi :

• Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements

Dans l’outil Sources

Pour afficher la visionneuse Propriétés de l’objet dans l’outil Sources :

1. Ouvrez un .js fichier.

2. Définissez un point d’arrêt sur une ligne de code dans le .js fichier.

3. Suspendez le débogueur à cette ligne en exécutant le code sur la page web.

   Les propriétés de l’objet sont affichées dans la section Étendue de la barre latérale droite. Consultez Afficher et modifier des propriétés et des variables dans les fonctionnalités de débogage JavaScript.

Voir aussi :

• Vue d’ensemble de l’outil Sources

État :

• Cette case à cocher n’est pas présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer le sélecteur de page d’arrière-plan (pour le pré-affichage)

nouveau à partir de Microsoft Edge 114, nouvelle étiquette pour la case à cocher à partir de Microsoft Edge 128

Active le sélecteur de page d’arrière-plan, par exemple pour le débogage de préréglage.

Voir aussi :

• Vue d’ensemble et chronologies de la migration vers Manifeste V3 - Workers de service au lieu des pages d’arrière-plan, pour les extensions Microsoft Edge.
• chrome.runtime : récupère la page d’arrière-plan.

État :

• Cette case à cocher n’est pas présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Nouvelle conception de la barre de filtre dans le panneau Réseau

nouveau à partir de Microsoft Edge 120

Dans l’outil Réseau , la barre de filtre a été repensée :

• Les boutons sont remplacés par une liste déroulante Types de requêtes .
• Les cases à cocher sont remplacées par une liste déroulante Plus de filtres .

Barre de filtre avec cette case à cocher désactivée :

Barre de filtre avec cette case à cocher sélectionnée :

Voir aussi :

• Filtrez les ressources dans Inspecter l’activité réseau.
• Filtrer les demandes dans informations de référence sur les fonctionnalités réseau.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau de remplissage automatique

nouveau à partir de Microsoft Edge 125

Ajoute un outil de remplissage automatique à DevTools pour enregistrer différents événements déclenchés par le navigateur lorsqu’un utilisateur remplit un formulaire à l’aide de la fonctionnalité de remplissage automatique du navigateur. Par exemple, lorsque le navigateur mémorise votre adresse et la remplit automatiquement dans un champ d’adresse.

Voir aussi :

• Remplissage automatique dans le livre blanc sur la confidentialité de Microsoft Edge.
• Remplissage automatique dans Vue d’ensemble des fonctionnalités et API WebView2.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 123, sous la forme Activer la vue de remplissage automatique.

Panneau de performances : afficher les flux de distribution et de gestion postMessage

nouveau à partir de Microsoft Edge 124

Cette expérience améliore la section Principale de l’outil Performance pour vous aider à identifier rapidement les postMessage événements et les gestionnaires, en faisant la distinction entre les événements déclenchés par la postMessage méthode et les autres événements affichés dans l’outil Performance. Cette expérience vous permet d’examiner les problèmes de performances liés à la publication de messages sur différents threads d’une application, afin d’afficher les messages entre les fenêtres, les iframes et les workers dédiés.

Sans cette expérience, les événements déclenchés par la distribution et la gestion des messages entre les threads d’une application apparaissent comme des événements d’appel de fonction de script générique. Avec cette expérience activée :

• postMessage les événements dispatch s’affichent sous la forme Schedule postMessage.
• postMessage Les événements de gestionnaire s’affichent sous la forme On Message :

Cette expérience vous permet d’examiner quand un postMessage appel s’est produit et combien de temps le message a été mis en file d’attente avant le démarrage du postMessage gestionnaire. Les événements de distribution sont liés aux événements de gestionnaire par des flèches d’initiateur qui s’affichent lorsque vous cliquez sur l’un ou l’autre type d’événement :

Voir aussi :

• Affichez les messages entre les fenêtres, les iframes et les workers dédiés dans Informations de référence sur les fonctionnalités de performances.
• Informations de référence sur les événements d’enregistrement des performances
• démonstration des événements de trace postMessage (rendu)
• démonstration des événements de trace postMessage (code source)
• Les gestionnaires et événements postMessage se distinguent des autres événements dans Nouveautés de DevTools (Microsoft Edge 124).

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau performances : activer la page d’accueil des métriques en direct

nouveau à partir de Microsoft Edge 127

Dans l’outil Performances , ajoute une page d’accueil qui s’affiche lorsqu’aucune trace de performances n’a encore été enregistrée. La page d’accueil affiche des métriques de performances sur la page rendue qui sont mises à jour en direct, telles que :

• La plus grande peinture contentfulante (LCP)
• Décalage de disposition cumulé (CLS)
• Interaction avec la peinture suivante (INP)

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau performances : activer le minutage du serveur dans le chronologie

nouveau à partir de Microsoft Edge Stable 129

Affiche un suivi Minutage du serveur dans la section Main de l’outil Performances pour afficher les événements de minutage du serveur envoyés par votre serveur HTTP. Pour plus d’informations, consultez Minutage du serveur dans MDN Web Docs.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Journaliser les exceptions non interceptée devTools dans la console

Détermine s’il faut journaliser les exceptions non interceptée DevTools dans l’outil Console .

Voir aussi :

• Présentation de la console

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Enable webhint

webhint est un outil open source qui fournit des commentaires en temps réel pour les sites web et les pages web locales. Le type de commentaires fourni par webhint inclut :

• Accessibilité
• Compatibilité entre navigateurs
• Sécurité
• Niveau de performance
• Web Apps progressif (PWA)
• Autres problèmes courants liés au développement web

L’expérience webhint affiche des commentaires webhint dans l’outil Problèmes. Sélectionnez un problème pour afficher la documentation sur la solution et une liste des ressources affectées sur votre site web. Sélectionnez un lien de ressource pour ouvrir l’outil approprié, tel que Réseau, Sources ou Éléments :

Voir aussi :

• Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Afficher les problèmes dans les éléments

Affiche les erreurs de syntaxe sous forme de soulignements ondulés sous les nœuds DOM dans l’outil Éléments .

Voir aussi :

• Les soulignements ondulés mettent en évidence les problèmes de code et les améliorations apportées à l’outil Élémentsdans Nouveautés de DevTools (Microsoft Edge 91).

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Fichiers open source dans Visual Studio Code

L’expérience Fichiers open source dans Visual Studio Code remplace l’éditeur de code de l’outil Sources par Visual Studio Code, pour la modification des fichiers locaux. Lorsque vous activez cette expérience, les Outils de développement détectent quand vous modifiez un fichier local et vous invitent à sélectionner un dossier à utiliser comme espace de travail.

Lorsque vous sélectionnez un dossier à utiliser comme espace de travail, la sélection d’un lien vers un fichier dans DevTools ouvre le fichier dans Visual Studio Code. Dans les versions précédentes de Microsoft Edge, cette action a ouvert le fichier dans l’éditeur de code de l’outil Sources dans DevTools.

Toutes les modifications que vous apportez dans DevTools modifient désormais le fichier sur le disque dur et synchronisent en direct avec Visual Studio Code.

Voir aussi :

• Ouverture de fichiers sources dans Visual Studio Code - Configuration de votre espace de travail.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer la limitation adaptative du processeur

nouveau à partir de Microsoft Edge 114

Active la limitation adaptative du processeur.

Voir aussi :

• Limitez le processeur lors de l’enregistrement dans référence des fonctionnalités de performances.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Activer CSS Copilot

Permet d’utiliser Copilot dans la barre latérale de Microsoft Edge pour expliquer les éléments HTML et les styles CSS afin de mieux comprendre un élément ou une règle de style particulier affiché dans l’outil Éléments . Pour poser des questions à Copilot sur un élément ou une règle de style, cliquez sur le bouton Copilot en regard de celui-ci, puis posez des questions de suivi.

Cette expérience n’est pas disponible lorsque la barre latérale est désactivée.

Voir aussi :

• Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Profil de tas en direct

Contrôle s’il faut mettre à jour le profil de tas en direct.

Voir aussi :

• Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « Tas instantané »)

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Chronologie du profileur de tas d’échantillonnage

Détermine s’il faut afficher le profileur de tas d’échantillonnage chronologie dans l’outil Performance.

Voir aussi :

• Présentation de l’outil Performance
• Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « Tas instantané »)

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau performances : suivi de l’invalidation

Ajoute une section Invalidations pour les événements Recalculer le style sous l’onglet Résumé de l’outil Performances . La section Invalidations fournit des informations sur la cause racine d’un événement Recalculate Style , qui peut être utile lors de l’examen des événements recalculer le style de longue durée qui provoquent des problèmes de performances.

La section Invalidations répertorie les nœuds DOM qui ont été invalidés à la suite d’une modification sur la page web, telle qu’une mutation DOM, et que le moteur du navigateur a dû relooker pendant l’événement Recalculate Style .

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau de performances : afficher tous les événements

Contrôle s’il faut afficher tous les événements dans l’outil Performance .

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau de performances : statistiques des appels au runtime V8

Détermine s’il faut afficher les statistiques d’appel du runtime V8 dans l’outil Performances . V8 est le moteur JavaScript utilisé par Microsoft Edge.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau de performances : Activer la collecte des traces améliorées

nouveau à partir de Microsoft Edge 128

Cette expérience permet à l’outil Performance de capturer les traces nouvellement ajoutées, pour prendre en charge les traces améliorées v2. Cette fonctionnalité est implémentée dans le projet amont Chromium. Cette expérience n’affecte pas les fonctionnalités de Microsoft Edge pour capturer des traces améliorées et n’a pas d’impact sur l’expérience utilisateur DevTools.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Voir aussi :

• Partager des performances améliorées et des traces de mémoire
• Référence des fonctionnalités de performances
• Informations de référence sur les événements d’enregistrement des performances

Panneau performances : Activer la collecte du texte source pour le script compilé

nouveau à partir de Microsoft Edge 128

Dans l’outil Performance , lors de l’exportation du fichier de trace, stocke le code source des scripts compilés dans le fichier de trace.

Cette expérience permet à l’outil Performance d’enregistrer le texte source du script dans des traces. Cette fonctionnalité est implémentée dans le projet amont Chromium.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Voir aussi :

• Partager des performances améliorées et des traces de mémoire
• Référence des fonctionnalités de performances
• Informations de référence sur les événements d’enregistrement des performances

Panneau de performances : Activer le mode débogage (détails de l’événement de trace, etc.)

nouveau à partir de Microsoft Edge 128

Ajoute une section Événement de trace à l’onglet Résumé de l’outil Performances . La section Événement de trace s’affiche lorsque vous sélectionnez un événement dans une trace de performances enregistrée. La section Événement de trace affiche des informations de débogage sur l’événement de trace sélectionné, telles que son nom et sa durée.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Voir aussi :

• Partager des performances améliorées et des traces de mémoire
• Référence des fonctionnalités de performances
• Informations de référence sur les événements d’enregistrement des performances

Activer les points d’arrêt d’instrumentation

Indique s’il faut s’arrêter aux points d’arrêt de test. Cette expérience rend les points d’arrêt plus fiables.

Voir aussi :

• Activer la synchronisation sur les points d’arrêt d’instrumentation
• La première fois que les fichiers sources sont chargés, les points d’arrêt peuvent ne pas se déclencher

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Utiliser les informations d’étendue des mappages sources

nouveau à partir de Microsoft Edge 118

Indique s’il faut utiliser les informations d’étendue des mappages sources.

Voir aussi :

• Mettez en correspondance le code traité avec votre code source original, pour le débogage.
• Mappage du code minifié à votre code source pour afficher le code lisible dans Vue d’ensemble de l’outil Sources.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau Activer les chargements spéculatifs dans le panneau Application

nouveau à partir de Microsoft Edge 121

Ajoute une page Chargements spéculatifs dans la section Services d’arrière-plan de l’outil Application , y compris une page Règles et une page Spéculations :

L’API Règles de spéculation peut être utilisée pour indiquer par programmation à Microsoft Edge de pré-afficher certaines pages. Cela est utile, car les pages pré-rendues sont presque instantanées. Le navigateur pré-affiche, de manière masquée, les pages suivantes auxquelles un utilisateur est susceptible d’accéder, tandis que l’utilisateur est toujours sur la page active.

La page Chargements spéculatifs répertorie les règles de spéculation que l’auteur web a définies dans la page web. La page fournit des informations de débogage qui indiquent si une règle a été réellement utilisée, montrant si une page particulière a été pré-restituée.

La page Règles comporte des colonnes :

• Ensemble de règles
• Statut

La page Spéculations contient des colonnes :

• URL
• Action
• Ensemble de règles
• Statut

Voir aussi :

• Outil d’application, pour gérer le stockage

État :

• Cette case à cocher n’est pas présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau performances : activer les annotations

nouveauté à partir de Microsoft Edge Canary 129

Active les annotations dans l’outil Performance.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau Performances : activer les insights sur les performances

nouveau à partir de Microsoft Edge Stable 129

Dans l’outil Performances , ajoute l’onglet De la barre latérale Insights lors de l’affichage d’un profil de performances enregistré. L’onglet De la barre latérale Insights fournit des informations utiles sur le profil, telles que les différentes phases de la plus grande peinture contentful et la liste des demandes de blocage de rendu.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher est présente dans Microsoft Edge Stable 129.

Panneau de performances : activer la nouvelle vue des détails résumés pour les événements de décalage de disposition

nouveauté à partir de Microsoft Edge Canary 131

Affiche une piste de décalage de disposition dans la section Main de l’outil Performances , lors de l’affichage d’un profil enregistré. Le suivi Des décalages de disposition affiche des informations sur le moment où les changements de disposition se produisent et sur les éléments qui sont décalés. Les changements de disposition inattendus peuvent avoir un impact négatif sur l’expérience utilisateur sur une page web.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 131.
• Cette case à cocher n’est pas présente dans Microsoft Edge Stable 129.