Nouveautés de DevTools (Microsoft Edge 99)
Pour découvrir les dernières fonctionnalités de Microsoft Edge DevTools et l’extension Microsoft Edge DevTools pour Microsoft Visual Studio Code et Visual Studio, lisez ces annonces.
Pour rester à jour et obtenir les dernières fonctionnalités de DevTools, téléchargez une préversion Insiders de Microsoft Edge. Que vous soyez sur Windows, Linux ou macOS, envisagez d’utiliser Canary (ou un autre canal en préversion) comme navigateur de développement par défaut. Les versions bêta, dev et canary de Microsoft Edge s’exécutent en tant qu’applications distinctes, côte à côte avec la version stable et publiée de Microsoft Edge. Consultez Canaux Microsoft Edge Insider.
Pour les dernières annonces, suivez l’équipe Microsoft Edge sur Twitter. Pour signaler un problème avec DevTools ou demander une nouvelle fonctionnalité, signalez un problème dans le dépôt MicrosoftEdge/DevTools .
Vidéo : Microsoft Edge | Nouveautés de DevTools 99
Déboguer en toute sécurité votre code de production avec des mappages sources à partir du serveur de symboles Azure Artifacts
Azure Artifacts Symbol Server prend désormais en charge le stockage des mappages sources que votre processus de génération produit lors de la compilation, de la minification et du regroupement de votre code. Au lieu d’héberger des mappages sources sur votre serveur public, vous pouvez désormais publier vos mappages sources sur le serveur de symboles Azure Artifacts sécurisé. Ensuite, connectez DevTools au serveur de symboles pour que DevTools récupère automatiquement vos mappages sources.
En utilisant des mappages de sources, vous pouvez voir et déboguer votre code source d’origine dans DevTools, plutôt que d’avoir à travailler avec le code de production compilé, minifié et groupé retourné par votre serveur. L’hébergement de vos mappages sources sur le serveur de symboles Azure Artifacts vous permet de voir et d’utiliser votre code source de manière sécurisée et privée, au lieu de placer vos cartes sources sur votre serveur et de révéler votre code d’origine publiquement.
Pour essayer cette fonctionnalité :
- Publiez vos mappages sources sur le serveur de symboles Azure Artifacts.
- Ouvrez devTools >Settings>Symbol Server et connectez DevTools au serveur de symboles Azure Artifacts, en entrant votre organisation Azure DevOps et votre jeton d’accès personnel.
Voir aussi :
- Mapper le code traité à votre code source d’origine, pour le débogage
- Déboguer en toute sécurité le code d’origine en publiant des mappages sources sur le serveur de symboles Azure Artifacts
- Déboguer en toute sécurité le code d’origine à l’aide de mappages sources de serveur de symboles Azure Artifacts
Extension Microsoft Edge DevTools pour Visual Studio
Suite au succès de l’intégration de Visual Studio Code, vous pouvez désormais également incorporer les outils de développement Microsoft Edge dans Microsoft Visual Studio pour déboguer vos projets ASP.NET en direct. Téléchargez les outils de développement Microsoft Edge pour Visual Studio et essayez-le.
Pour essayer cette fonctionnalité :
- Vérifiez que Visual Studio 2022 et la charge de travail ASP.NET sont installés.
- Configurez Web Live Preview en tant que concepteur Web Forms par défaut, comme décrit dans Outils de développement Microsoft Edge pour Visual Studio.
- Dans un projet ASP.NET, ouvrez une page web du projet dans la fenêtre Création .
- Dans le coin supérieur gauche de la fenêtre Création , cliquez sur le bouton Ouvrir DevTools Edge (
) :
Edge DevTools pour Visual Studio s’ouvre avec l’outil Éléments sélectionné :
L’outil Réseau est également disponible par défaut :
L’outil Inspecter (
) et la capture d’écran bascule (icône Activer 
) sont disponibles, et le menu Autres outils (
) propose les outils Problèmes, Conditions réseau et Blocage des requêtes réseau.
Voir aussi :
- Outils de développement Edge pour Visual Studio (préversion) sur Visual Studio DevBlogs.
- Extension Edge DevTools pour Visual Studio.
Calques en mode 3D
Depuis Microsoft Edge 88, l’outil Vue 3D a fourni une version améliorée de l’outil Calques . Maintenant, dans Microsoft Edge 99, les fonctionnalités de l’outil Calques ont été supprimées, et l’outil Calques contient à la place un lien qui vous redirige vers la vue Couches composites dans l’outil Vue 3D . Vous trouverez toutes les fonctionnalités qui se trouvaient précédemment dans l’outil Calques , et bien plus encore, dans l’outil Vue 3D .
Mise à jour : l’outil Calques a été supprimé.
Voir aussi :
Utiliser vos mappages sources pour afficher les noms de fonction d’origine dans les profils de performances
Mettre à jour: Dans Microsoft Edge 111, cette fonctionnalité a été supprimée, car l’outil Performance fournit désormais automatiquement les noms de fichiers et de fonctions d’origine lors du profilage du code de production, tant que les cartes sources sont hébergées sur le serveur de symboles Azure Artifacts. Consultez l’outil performance unminifie les noms de fichiers et de fonctions lors du profilage du code de production dans Nouveautés de DevTools (Microsoft Edge 111).
Entrée Nouveautés déconseillée
L’enregistrement d’un profil de performance dans l’outil Performance produit un graphique de flammes minifié. Dans les versions précédentes de Microsoft Edge, le graphique de flammes n’utilisant pas les mappages sources pour afficher les noms de vos fonctions d’origine, même si vous hébergeiez les mappages sources sur votre serveur.
À compter de Microsoft Edge version 99, vous pouvez afficher les noms de vos fonctions d’origine dans un profil de performances, comme suit :
- Enregistrez un profil dans l’outil Performances .
- Cliquez sur le nouveau bouton Unminify (
) pour créer et télécharger le profil de performance non déminifié. - Chargez (importer) (
) le profil de performances nonminifié dans l’outil Performance .
Le bouton Unminify utilise les mappages sources, à condition qu’ils soient hébergés côte à côte avec votre code de production, pour déminifier les noms des fonctions dans le graphique de flammes de l’outil Performance .
Le graphique à flammes de l’outil Performances affiche initialement les noms de fonction b, O, Xt et bn, provenant du code de production minifié retourné par le serveur web :
Après avoir cliqué sur Unminifier (), puis Charger le profil (), le graphique de flammes dans l’outil Performance affiche désormais les fonctions étiquetées avec des noms explicites : invokeFunc (b),executeAction (O),endBatch (Xt)et runReactions (bn), récupérées à partir de vos mappages sources :
Voir aussi :
- Unminification des noms de fonctions dans les profils de performances DevTools sur le blog Microsoft Edge.
- Afficher les noms des fonctions d’origine dans les profils de performances.
Amélioration de l’accessibilité pour la console réseau et la vue 3D
Dans les versions précédentes de Microsoft Edge, la technologie d’assistance a annoncé des informations incorrectes lors de la fourniture d’un jeton du porteur personnalisé dans l’outil console réseau. Dans Microsoft Edge version 99, ce problème a été résolu. Lorsque vous sélectionnez la zone de texte pour fournir un jeton du porteur personnalisé, la technologie d’assistance annonce désormais « Groupe d’affichage de demande de modification de texte de jeton ».
Dans les versions précédentes de Microsoft Edge, la technologie d’assistance annonçait uniquement le texte de la case d’option dans l’outil Vue 3D, sans annoncer le nom du groupe auquel appartient le bouton. Dans Microsoft Edge version 99, ce problème a été résolu. Par exemple, lorsque le focus est placé sur la case d’option Utiliser la texture de l’écran , la technologie d’assistance annonce désormais : « Groupe d’options de type de couleur, Utiliser la texture de l’écran, case d’option, sélectionné ».
Voir aussi :
Amélioration de l’arborescence des dossiers sources dans le panneau Sources
Dans l’onglet Page de l’outil Sources , l’arborescence des dossiers sources est maintenant améliorée, avec moins d’encombrement dans le nommage et la structure des dossiers. Les préfixes de chemin d’accès inutiles tels que ../ et ./ ont été supprimés. L’arborescence a été simplifiée en fusionnant des dossiers en double équivalents.
Pour obtenir l’historique de cette fonctionnalité dans le projet open source Chromium, consultez Problème 1284737.
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.
Annonces du projet Chromium
Microsoft Edge version 99 inclut également les mises à jour suivantes du projet Chromium :
- Limitation des requêtes WebSocket
- Volet Nouvelle API de création de rapports dans le panneau Application
- Amélioration du style, de la mise en forme et du filtrage de la console
- Améliorations apportées aux sourcesmaps
- Sélecteur de couleurs et volet fractionné compatibles avec l’interaction tactile
Notes
Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine des annonces du projet Chromium est What’s New in DevTools (Chrome 99) et a été créée par Jecelyn Yeen (Developer Advocate travaillant sur Chrome DevTools chez Google).
Cette œuvre est concédée sous licence creative commons attribution 4.0 international.