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 134 :

• Nouvelle conception de la barre de filtre dans le panneau Réseau
• Panneau de remplissage automatique
• Panneau de performances : activer un commutateur vers une autre option de navigation chronologie
• 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 132 :

• Nouvelle conception de la barre de filtre dans le panneau Réseau
• Panneau de remplissage automatique
• Panneau performances : activer les annotations
• Panneau Performances : activer les insights sur les performances
• 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

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.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 API WebView2.

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

Panneau performances : activer les annotations

nouveauté à partir de Microsoft Edge Canary 129

Les annotations de l’outil Performance vous permettent de double-cliquer sur n’importe quel événement affiché dans la zone main d’un enregistrement de performances, puis d’ajouter une étiquette personnalisée sur (ci-dessus) cet événement :

Voir aussi :

• Présentation de l’outil Performance

État :

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

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 n’est pas présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 n’est pas présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

Panneau performances : activer les insights expérimentaux sur les performances

nouveauté à partir de Microsoft Edge Canary 133

Active des insights supplémentaires dans le panneau latéral Insights .

Pour utiliser cette expérience, cochez d’abord la case Panneau Performances : activer les insights sur les performances, puis, si vous souhaitez afficher encore plus d’informations, cochez également la case Panneau Performances : activer les insights sur les performances expérimentales .

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

Panneau Performances : activer la gradation des événements non liés dans les insights sur les performances et les résultats de recherche

nouveauté à partir de Microsoft Edge Canary 133

Cette expérience change la couleur de certains événements dans la section main de l’outil Performance en gris. Cela se produit dans deux cas :

• Lorsque vous recherchez un événement à l’aide de Ctrl+F , puis tapez du texte, seules les correspondances de recherche conservent leur couleur ; les autres événements deviennent gris.

• Lorsque vous utilisez le panneau latéral Insights et que vous développez l’un des insights, seuls les événements liés à cette information conservent leur coloration ; les autres événements deviennent gris.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

Panneau de performances : activer un commutateur vers une autre option de navigation chronologie

nouveauté à partir de Microsoft Edge Canary 133

Ajoute un bouton Afficher les raccourcis () dans la barre d’outils de l’outil Performance qui vous permet de sélectionner la navigation au clavier classique ou moderne de l’chronologie.

1. Dans Microsoft Edge 133 ou version ultérieure, cochez cette case expérience, fermez Paramètres, puis cliquez sur le bouton Redémarrer DevTools .

2. Dans DevTools, dans l’outil Performance , enregistrez un profil.

   Le bouton Afficher les raccourcis () s’affiche dans le coin supérieur droit de l’outil Performance , sous le bouton Aide () pour DevTools.

3. Cliquez sur le bouton Afficher les raccourcis ().

   La boîte de dialogue contextuelle Raccourcis clavier s’ouvre.

   Avec l’option Classique sélectionnée :

   

   Avec l’option Moderne sélectionnée :

   

4. Sélectionnez le bouton d’option Classique ou Moderne .

   La liste des raccourcis clavier change pour renvoyer la navigation au clavier classique ou moderne du chronologie.

Voir aussi :

• Présentation de l’outil Performance

État :

• Cette case à cocher est présente dans Microsoft Edge Canary 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

Panneau de performances : activer les fonctionnalités de dépendance tierces

nouveau à partir de Microsoft Edge Canary 134

Inclut une case À cocher Dim 3rd Parties dans l’outil Performance pour « assombrir » les événements de performances provenant de dépendances tierces. Par exemple, si votre code utilise la bibliothèque React, la case À cocher Dim 3rd Parties est grisée et assombrit les événements React dans un profil.

Voir aussi :

• Présentation de l’outil Performance

État :

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

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.

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 134.
• Cette case à cocher est présente dans Microsoft Edge Stable 132.