Partager via


Nouveautés de DevTools (Microsoft Edge 111)

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 : Nouveautés de DevTools 111

Image miniature de la vidéo « Nouveautés de DevTools 111 »

Débogage à distance des contrôles Microsoft Edge, PWA et WebView2 sur les appareils HoloLens 2

L’application Outils à distance pour Microsoft Edge est désormais disponible sur les appareils HoloLens 2. L’application Outils à distance pour Microsoft Edge est un plug-in pour le portail d’appareil Windows pour bureau qui permet le débogage à distance pour les onglets des contrôles Microsoft Edge, Progressive Web Apps (PWA) et WebView2. En utilisant le débogage à distance, vous pouvez exécuter du contenu web sur un appareil distant et le déboguer directement à partir de votre ordinateur de développement.

L’application Outils à distance pour Microsoft Edge dans le Microsoft Store

Avec le débogage à distance activé, vous n’avez plus besoin d’ouvrir DevTools sur les appareils HoloLens 2. Au lieu de cela, vous pouvez vous connecter à l’appareil HoloLens 2 distant à l’aide du portail de l’appareil, ouvrir la edge://inspect page, puis sélectionner la cible (contrôle Onglet, PWA ou WebView2) que vous souhaitez utiliser avec DevTools.

Pour nous faire part de vos commentaires sur le flux de débogage à distance pour Microsoft Edge, laissez un commentaire dans Problème 136 : Le débogage à distance des appareils HoloLens 2 est désormais disponible avec la dernière version de l’application Outils à distance pour Microsoft Edge.

Voir aussi :

La barre d’outils mode appareil comporte des contrôles d’émulation pour les thèmes et les déficiences visuelles

Dans les versions précédentes de Microsoft Edge, pour émuler différents thèmes ou déficiences visuelles, vous utilisiez l’outil Rendu pour, par exemple, émuler Achromatopsia, c’est-à-dire lorsque l’utilisateur n’est pas en mesure de percevoir une couleur.

Dans Microsoft Edge 111, vous pouvez désormais accéder à ces contrôles d’émulation de thème et de déficience visuelle directement à partir de la barre d’outils Mode appareil , en plus d’utiliser l’outil Rendu .

Par exemple, pour émuler le mode de contraste élevé et tester la réponse de votre contenu web :

  1. Dans la barre d’outils Mode appareil , à droite de la liste déroulante Limitation , cliquez sur Émuler les fonctionnalités multimédias (l’icône pipette, l’icône Pipette).
  2. Sélectionnez les couleurs forcées : active :

Émulation du mode de contraste élevé directement à partir de la barre d’outils Mode appareil

Vous pouvez également émuler les déficiences visuelles en cliquant sur l’icône Œil en regard de l’icône Pipette. Par exemple, pour émuler une vision floue :

  1. Cliquez sur Émuler la déficience visuelle (icône d’œil, icône d’œil).
  2. Sélectionnez Vision floue :

Émulation de la vision floue directement à partir de la barre d’outils mode appareil

Voir aussi :

L’outil de performances unminifie les noms de fichiers et de fonctions lors du profilage du code de production

Microsoft Edge 99 a ajouté une nouvelle fonctionnalité à l’outil Performance appelée Unminify. Cette fonctionnalité Unminify a appliqué des mappages de source à un profil qui a été enregistré avec l’outil Performance , puis téléchargé le profil non déminifié sur votre ordinateur. La fonctionnalité Unminify est décrite dans Utiliser vos mappages sources pour afficher les noms de fonction d’origine dans les profils de performances dans Nouveautés de DevTools (Microsoft Edge 99).

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 mappages sources sont chargés. Les mappages sources peuvent être chargés de manière fiable et sécurisée en les hébergeant sur le serveur de symboles Azure Artifacts.

Dans l’image suivante, vous voyez des noms de fonction minifiés dans le graphique de flammes lors du profilage du code de production :

Noms de fonctions minifiés dans le graphique de flammes

Désormais, dans Microsoft Edge 111, l’outil Performance unminifie automatiquement les noms des fonctions dans le graphique de flammes lors du profilage du code de production :

Noms de fonctions nonminifiés dans le graphique de flammes

Voir aussi :

Le volet Styles est plus facile à utiliser en mode Focus

Dans les versions précédentes de Microsoft Edge, en mode Focus, l’outil Éléments ne fournissait pas un moyen simple d’accéder à tous les onglets du volet Styles . Dans Microsoft Edge 111, ce problème a été résolu. Lorsque le volet Styles a une fenêtre d’affichage étroite et ne peut pas afficher tous les autres onglets disponibles, cliquez sur l’icône de expandeur Autres onglets (icône de expandeur Autres onglets) :

Jeu d’onglets réduit dans le volet Styles en mode Focus

Pour afficher seulement quelques-uns des onglets dans le volet Styles , cliquez sur l’icône Plus d’onglets de réduction (icône d’réduction d’onglets plus) :

Jeu d’onglets développé dans le volet Styles en mode Focus

Voir aussi :

Copier le tableau Statistiques du sélecteur de l’outil Performance vers Excel

Microsoft Edge 109 a introduit la fonctionnalité Statistiques du sélecteur dans l’outil Performances . Avec le paramètre Activer l’instrumentation avancée de rendu (lente) activé dans l’outil Performances , la sélection d’un événement Recalculer les styles dans le graphique à flammes ajoute un onglet Statistiques du sélecteur dans le volet inférieur. Consultez Déboguer des événements recalculer le style à long terme avec de nouvelles statistiques de sélecteur dans Nouveautés de DevTools (Microsoft Edge 109).

Dans Microsoft Edge 111, vous pouvez désormais exporter le tableau Selector Stats pour chaque événement Recalculate Styles vers un classeur Microsoft Excel. Vous pouvez ensuite utiliser Excel pour effectuer une analyse agrégée des performances du sélecteur et identifier les sélecteurs les plus coûteux sur la durée de vie du profil.

Pour exporter la table Selector Stats :

  1. Cliquez sur la cellule supérieure gauche avec la souris, puis faites glisser pour sélectionner vers la cellule inférieure droite.
  2. Cliquez avec le bouton droit sur la table, puis sélectionnez Copier. Vous pouvez également appuyer sur Ctrl+C (Windows, Linux) ou Cmd+C (macOS).
  3. Collez le tableau dans Excel.

Sélection de l’intégralité de la table Selector Stats pour copier-coller

Voir aussi :

En mode Focus, la technologie d’assistance annonce quand vous déplacez un outil vers l’affichage rapide

Dans les versions précédentes de Microsoft Edge, les technologies d’assistance, telles que les lecteurs d’écran, n’annonçait pas de confirmation lors du déplacement d’un outil de la barre d’activité vers la barre d’outils Affichage rapide . Dans Microsoft Edge 111, ce problème a été résolu. Les lecteurs d’écran annoncent désormais « Ajout réussi du réseau à l’affichage rapide » lorsque vous déplacez l’outil Réseau de la barre d’activité vers la barre d’outils Affichage rapide :

Déplacement de l’outil Réseau de la barre d’activité vers la barre d’outils Affichage rapide

Voir aussi :

Annonces du projet Chromium

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