Nouveautés de DevTools (Microsoft Edge 88)

Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.

Microsoft Edge et Microsoft Edge WebDriver désormais disponibles sur Linux

Microsoft Edge Dev est désormais pris en charge sur les distributions Ubuntu, Debian, Fedora et openSUSE. Téléchargez et installez le Microsoft Edge Dev .deb ou .rpm le package directement à partir du site Microsoft Edge Insider ou utilisez les outils de gestion des packages standard de votre distribution Linux.

Si vous utilisez un environnement Linux dans vos solutions d’intégration et de distribution continue (CI/CD), Microsoft Edge WebDriver est également disponible sur Linux. Pour commencer à automatiser Microsoft Edge avec Microsoft Edge WebDriver, consultez la section Versions récentes sur Microsoft Edge WebDriver. Pour obtenir de l’aide sur l’automatisation de Microsoft Edge avec Microsoft Edge WebDriver, consultez Utiliser WebDriver pour l’automatisation des tests.

DevTools dans Microsoft Edge sur Linux

Voir aussi :

Amélioration des conseils de webhint et de plateforme dans l’outil des problèmes

Mise à jour de juillet 2026 : webhint a été supprimé de Microsoft Edge 151.

Webhint est un outil open source qui fournit des commentaires en temps réel pour les sites web et les pages web locales. À partir de la version 85 de Microsoft Edge, consultez les commentaires webhint dans l’outil problèmes . Les problèmes qui apparaissent dans l’outil Problèmes sont désormais plus faciles à voir avec l’ajout des catégories suivantes.

Vous pouvez désormais filtrer les problèmes tiers à l’aide d’une nouvelle case à cocher. La fonctionnalité de filtre vous aide à masquer les problèmes liés au code de bibliothèques tierces ou d’autres sources.

Pour vous aider à voir les problèmes détectés par webhint, l’outil Problèmes affiche désormais les informations suivantes :

  • Meilleurs extraits de code.
  • Liens vers d’autres panneaux pertinents.
  • Liens vers la documentation pour vous aider à résoudre les problèmes rencontrés sur votre site Web.

Outil des problèmes

Voir aussi :

Les couches composites sont désormais en affichage 3D

Vous avez désormais la possibilité de visualiser le contenu des calques avec les valeurs d’index z et le modèle d’objet du document (DOM). Cette fonctionnalité vous permet de déboguer sans basculer entre l’outil d’affichage 3D et les outils de calques aussi souvent.

Volet Couches composites

Mise à jour : cette fonctionnalité a été publiée et n’est plus expérimentale. L’outil Layers (Couches ) a été remplacé par l’outil d’affichage 3D .

Voir aussi :

Définitions des variables CSS dans le volet styles

Dans le volet Styles de l’outil Éléments , les variables CSS sont désormais liées directement à chaque définition. Cliquez sur la variable pour afficher ou modifier facilement la définition de variable CSS. Dans l’exemple, DevTools affiche les attributs CSS pour l’élément body .

Par exemple, pour afficher la définition de variable pour la --theme-body-background variable CSS :

  1. Dans le volet Styles de l’outil Elements , placez le curseur sur le style --theme-body-background de la variable var(--theme-body-background)CSS . L’info-bulle s’affiche, Aller à la définition :

Variable CSS liée au style

  1. Cliquez sur le style --theme-body-background. Le volet Styles affiche la définition du style :

Affichage de la définition d’un style CSS utilisé par une variable CSS

Voir aussi :

Améliorations du débogage du worker du service

Les nouvelles fonctionnalités suivantes de l’outil Réseau , de l’outil Application et de l’outil Sources vous aident à créer votre application Web progressive (PWA). Si vous éprouvez des difficultés à déboguer votre worker du service, utilisez ces fonctionnalités.

Le routage d’une demande affiche les startup événements et fetch basés sur les requêtes réseau exécutées par le biais des travailleurs du service. Les chronologies sont accessibles à partir de l’outil Application ou Réseau . Les chronologies sont utiles lorsque vous rencontrez des problèmes avec les workers du service et que vous souhaitez voir s’il y a un problème avec l’événement startup ou fetch .

Voir aussi :

Outil de l’application

Dans l’outil Application , affichez toutes les informations de routage des demandes des workers du service à l’aide du nouveau lien Demandes de réseau .

Pour afficher un contexte supplémentaire lors du débogage d’un worker du service :

  1. Dans l’outil Application , à gauche, sélectionnez Workers du service.

  2. Cliquez sur le lien Demandes de réseau :

    Ouverture de l’outil Réseau à partir du volet Collaborateurs du service

    L’outil Réseau s’ouvre dans le volet Aperçu rapide au bas de DevTools et affiche toutes les demandes réseau associées au worker du service. Les requêtes réseau sont filtrées à l’aide de is:service-worker-intercepted:

    Outil Réseau en mode Aperçu rapide

  3. Pour déplacer l’outil Réseau vers le panneau supérieur, fermez le panneau Affichage rapide :

    Fermez l’Affichage rapide pour déplacer l’outil Réseau vers la barre d’outils principale

Voir aussi :

Outil réseau

Dans l’outil Réseau , vous pouvez déboguer les demandes réseau exécutées par les travailleurs du service. (Vous pouvez également ouvrir des demandes réseau à partir de l’outil Application , au lieu de l’outil Réseau .) Dans le volet Minutage de l’outil Réseau , DevTools affiche pour chaque demande les informations suivantes :

  • Le début d’une demande et la durée du démarrage.
  • Modifications apportées à l’inscription du worker du service.
  • Exécution d’un fetch gestionnaire d’événements.
  • Exécution de tous les fetch événements de chargement d’un client.

Volet Minutage de l’outil Réseau

Voir aussi :

Outil sources

Dans les versions précédentes de Microsoft Edge, le niveau de profondeur de la pile d’appels était limité au code JavaScript de votre worker du service. Dans Microsoft Edge 88, la pile d’appels affiche désormais l’initiateur de demandes qui s’exécutent par le biais de votre worker du service.

Pour localiser l’initiateur de la requête, utilisez la pile d’appels de votre code JavaScript dans le worker du service. La pile des appels dans la figure suivante commence par le code JavaScript dans votre worker du service (service-worker.js) et affiche une référence à la demande de page Web d’origine sous la forme (index):157. Le service-worker.js fichier s’affiche et la pile des appels met en évidence l’initiateur de la demande, (index):157:

Le fichier service-worker.js et la pile d’appels mettant en surbrillance l’auteur de la demande

Dans la figure suivante, la référence est sélectionnée et a ouvert l’initiateur qui a effectué la demande. La (index) page web est l’initiateur de la requête :

La page web (index) est l’initiateur de la requête

Voir aussi :

Copier la valeur de la propriété d’une demande réseau

Dans l’outil Réseau , copiez la valeur de la propriété d’une demande réseau à l’aide de la nouvelle option Copier la valeur . La valeur de la propriété est copiée en tant que valeur JSON décodée. Dans les versions précédentes de Microsoft Edge, vous deviez copier une valeur à l’aide de l’une des actions suivantes :

  • Mettez en surbrillance l’intégralité du texte et copiez-le.
  • Stockez la valeur en tant que variable globale, le cas échéant, et copiez-la à partir de la console DevTools.

Pour copier la valeur de propriété dans le presse-papiers, voir Copier la réponse mise en forme JSON dans le presse-papiers dans laréférence des fonctionnalités réseau.

Copie d’une valeur de propriété dans DevTools :

Copie d’une valeur de propriété dans DevTools

Coller la valeur d’une propriété dans Microsoft Visual Studio Code :

Coller la valeur d’une propriété dans Microsoft Visual Studio Code

Voir aussi :

Pour plus d’informations, dans le Chromium projet open source, voir Problème 1132084.

Personnaliser les raccourcis clavier multi-presses

Depuis la version 87 de Microsoft Edge, vous pouvez personnaliser les raccourcis clavier pour n’importe quelle action dans DevTools. Dans Microsoft Edge version 88, vous pouvez désormais créer des raccourcis clavier multi-pression.

Par exemple, la mise en surbrillance rouge ci-dessous montre un raccourci clavier multi-appui personnalisé pour l’action Démarrer l’enregistrement des événements :

Raccourcis clavier des cordes

Mise à jour : cette fonctionnalité a été publiée et n’est plus expérimentale.

Voir aussi :

Pour plus d’informations, dans le Chromium projet open source, consultez Problème #174309.

L’interface utilisateur de DevTools correspond désormais à la langue du navigateur

Dans Microsoft Edge version 87, si vous activiez le paramètre Faire correspondre la langue du navigateur dans les paramètres DevTools, la langue de l’interface utilisateur de DevTools ne correspondait pas à la langue de l’interface utilisateur du navigateur. Dans Microsoft Edge version 88, DevTools correspond désormais à la langue du navigateur si vous activez le paramètre Faire correspondre la langue du navigateur . Consultez Modifier les paramètres de langue de DevTools.

Faire correspondre le paramètre DevTools de langue du navigateur au japonais

Annonces du projet Chromium

Les sections suivantes annoncent des fonctionnalités supplémentaires disponibles dans Microsoft Edge qui ont été apportées au projet open source Chromium.

Nouveaux outils de visualisation d’angle CSS

DevTools offre désormais une meilleure prise en charge du débogage d’angle CSS. Lorsqu’un élément HTML de votre page est doté d’un angle CSS appliqué, une icône d’horloge s’affiche à côté de l’angle dans l’outil Styles . Pour activer ou désactiver la superposition de l’horloge, cliquez sur l’icône d’horloge. Pour modifier l’angle, cliquez n’importe où dans l’horloge, faites glisser la aiguille ou utilisez des raccourcis souris et clavier.

L’angle CSS suivant est utilisé pour l’exemple :

background: linear-gradient(100deg, lightblue, pink);

Angle CSS

Pour plus d’informations, voir Modifier la valeur d’angle à l’aide de l’horloge d’angle dans laréférence des fonctionnalités CSS.

Pour obtenir des mises à jour sur cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 1126178 et 1138633.

Simuler une taille de quota de stockage dans le volet stockage

Vous pouvez désormais remplacer la taille du quota de stockage dans le volet Stockage . Cette fonctionnalité permet de simuler différents appareils et de tester le comportement de votre site web ou de votre application dans des scénarios de disponibilité du disque faible. Pour simuler le quota de stockage :

  1. Accédez àStockaged’application>.
  2. Activez la case à cocher Simuler le quota de stockage personnalisé .
  3. Entrez un numéro valide.

Simuler la taille du quota de stockage

Pour plus d’informations, consultez Émuler des appareils mobiles (émulation d’appareil). Pour voir les mises à jour de cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 945786 et 1146985.

Signaler les erreurs CORS dans l’outil Réseau

L’outil Réseau affiche désormais un status spécifique pour les erreurs CORS. Par exemple :

  1. Accédez à la démonstration d’erreur CORS (https://cors-errors.glitch.me) (404 ). (Glitch.me’hébergement du projet s’est terminé le 8 juillet 2025. Ce site de test peut être déplacé vers https://github.com/MicrosoftEdge/Demos, y compris l’hébergement à github.io.)

  2. Ouvrez l’outil Réseau , actualisez la page et observez la requête de réseau CORS ayant échoué.

    La colonne status affiche l’erreur CORS.

  3. Pointez sur l’erreur.

    L’info-bulle affiche désormais le code d’erreur :

    Erreurs CORS

    Dans la version 87 et les versions antérieures de Microsoft Edge, DevTools affichait uniquement le status générique (échec) pour les erreurs CORS.

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 1141824.

Voir aussi :

Mises à jour de l’affichage des détails du cadre

Dans l’outil Application , il existe une section Cadres qui fournit une vue détaillée pour chaque image.

Voir aussi :

Informations d’isolation de l’origine croisée dans l’affichage des détails du cadre

Dans l’outil Application , il existe une section Cadres qui fournit une vue détaillée pour chaque image. Lorsque vous sélectionnez un cadre, la page de détails du cadre s’affiche, y compris la section Sécurité & isolation .

Le status isolé d’origine croisée s’affiche désormais sous la section Sécurité & isolation. La nouvelle section de disponibilité de l’API affiche la disponibilité de SharedArrayBuffers (SAB) et indique si les mémoires tampons peuvent être partagées à l’aide postMessage()de . Un avertissement de dépréciation s’affiche si le SAB et postMessage() est actuellement disponible, mais le contexte n’est pas isolé inter-origines.

Informations sur l’origine croisée

Pour plus d’informations sur l’isolation cross-origin et la raison pour laquelle elle est requise pour des fonctionnalités telles que SharedArrayBuffers, consultez WindowOrWorkerGlobalScope.crossOriginIsolated.

Pour obtenir des mises à jour en temps réel de cette fonctionnalité dans le projet open source Chromium, consultez Problème 1139899.

Voir aussi :

Nouvelles informations des travailleurs web dans l’affichage des détails du cadre

DevTools organise désormais les travailleurs web sous le cadre du parent approprié. Par exemple, si le someName cadre crée worker.js, puis worker.js apparaît sous someName dans la liste Cadres . Pour afficher les détails du travail web :

  1. Ouvrez l’outil Application .
  2. Dans la liste de gauche, dans la section Cadres , développez un cadre qui contient des travailleurs web.
  3. Développer l’arborescence des travailleurs .
  4. Cliquez sur un collaborateur.

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 1122507 et 1051466.

Informations sur les travailleurs web

Voir aussi :

Afficher les détails d’un cadre ouvrant pour les fenêtres ouvertes

DevTools organise désormais les fenêtres ouvertes sous le cadre parent approprié. Par exemple, si le top cadre ouvre un Window à https://learn.microsoft.com/microsoft-edge/devtools, alors le apparaît sous top dans Window la liste Cadres.

Pour afficher le frame responsable de l’ouverture d’une autre fenêtre et voir ce frame dans l’outil Éléments :

  1. Ouvrez l’outil Application .
  2. Sur la gauche, dans la section Cadres en bas, développez un cadre.
  3. Développez Fenêtres ouvertes et cliquez sur le Window cadre parent que vous souhaitez connaître.
  4. Cliquez sur le lien Cadre d’ouverture .

Les détails sont affichés sur le cadre à l’origine de l’ouverture d’un autre Window. Pour révéler l’ouvreur dans l’outil Éléments :

  1. Ouvrez l’outil Application .
  2. Sur la gauche, dans la section Cadres en bas, développez un cadre.
  3. Cliquez sur une fenêtre ouverte pour ouvrir les Window détails.
  4. Cliquez sur le lien Cadre d’ouverture .

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

Détails du cadre ouvert

Voir aussi :

Copier le StackTrace pour l’initiateur réseau

Dans l’outil Réseau, pour copier le stacktrace dans le presse-papiers, cliquez avec le bouton droit sur le stacktrace, puis sélectionnez Copier Copier> lestacktrace :

Copier le StackTrace

Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1139615.

Voir aussi :

Afficher un aperçu de la valeur de la variable WASM sur mouseover

Dans l’outil Sources , utilisez cette fonctionnalité pour afficher la valeur d’une variable WebAssembly (Wasm) lorsque votre code est suspendu. Pour afficher la valeur actuelle d’une variable, pointez sur une variable :

Afficher un aperçu de la variable WASM sur mouseover

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 1058836 et 1071432.

Voir aussi :

Unités de mesure cohérentes pour la taille des fichiers et de la mémoire

DevTools les utilise kB désormais systématiquement pour afficher des tailles de fichiers et de mémoire. Auparavant, DevTools combinait kB et KiB.

  • kB ou kilo-octet (10^3 ou 1000 octets)
  • KiB ou kibioctet (2^10 ou 1024 octets)

Par exemple, l’outil Réseau précédemment utilisé kB dans les étiquettes, mais utilisé KiB dans les calculs. Votre commentaire a démontré que cette incohérence a causé une confusion.

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

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Jecelyn Yeen.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

Voir aussi

  • Dernière mise à jour :