Partager via


Nouveautés de DevTools (Microsoft Edge 99)

Pour case activée 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

Image miniature de la 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é :

  1. Publiez vos mappages sources sur le serveur de symboles Azure Artifacts.
  2. Ouvrez leserveur de symbolesde paramètres> DevTools > et connectez DevTools au serveur de symboles Azure Artifacts, en entrant votre organization Azure DevOps et votre jeton d’accès personnel.

Page « Serveur de symboles » dans les paramètres DevTools, où vous entrez votre jeton d’accès personnel Azure DevOps

Voir aussi :

Extension Microsoft Edge DevTools pour Visual Studio

Suite au succès de l’intégration 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é :

  1. Vérifiez que Visual Studio 2022 et la charge de travail ASP.NET sont installés.
  2. Configurez Web Live Preview comme Web Forms Designer par défaut, comme décrit dans Outils de développement Microsoft Edge pour Visual Studio.
  3. Dans un projet ASP.NET, ouvrez une page web du projet dans la fenêtre Création .
  4. Dans le coin supérieur gauche de la fenêtre Création , cliquez sur le bouton Ouvrir DevTools Edge (icône Ouvrir DevTools Edge) :

Un projet ASP.NET, ouvrant DevTools Edge

Edge DevTools pour Visual Studio s’ouvre avec l’outil Éléments sélectionné :

Outils de développement Microsoft Edge pour Visual Studio : Outil Éléments de DevTools

L’outil Réseau est également disponible par défaut :

Outils de développement Microsoft Edge pour Visual Studio : Outil réseau de DevTools

L’outil Inspecter (icône d’outil Inspecter) et la capture d’écran bascule (icône Activer la capture d’écran) sont disponibles, et le menu Autres outils (icône Autres outils) propose les outils Problèmes, Conditions réseau et Blocage des requêtes réseau.

Voir aussi :

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é.

L’outil Calques est désormais lié à l’outil Vue 3D

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 :

  1. Enregistrez un profil dans l’outil Performances .
  2. Cliquez sur le nouveau bouton Unminify (l’icône Unminify) pour créer et télécharger le profil de performance non déminifié.
  3. Chargez (importer) (icône Charger le profil) 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 :

Noms de fonctions minifiés dans le graphique de flammes de l’outil Performance

Après avoir cliqué sur Unminifier (icône Unminify), puis Charger le profil (icône 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 :

Noms de fonctions nonminifiés dans le graphique de flammes de l’outil Performance

Voir aussi :

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 ».

L’outil Console réseau

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é ».

L’outil Vue 3D

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.

Contour du dossier Nettoyer dans l’onglet Page de l’outil Sources

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

Voir aussi :

Annonces du projet Chromium

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

Remarque

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 est créée par Jecelyn Yeen.

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.