Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.
Annonces de l’équipe Microsoft Edge DevTools
Utiliser les DevTools en mode contraste élevé Windows
Microsoft Edge DevTools s’affiche désormais en mode contraste élevé lorsque Windows est en mode contraste élevé.
Suivez les instructions pour activer le mode contraste élevé dans Windows. Pour ouvrir DevTools dans Microsoft Edge, sélectionnez F12 ou Ctrl+Maj+I. DevTools s’affiche en mode contraste élevé.
Remarque : DevTools prend actuellement en charge le mode contraste élevé sur Windows, mais pas sur macOS.
Chromium problème #1048378
Voir aussi :
Faire correspondre les raccourcis clavier de DevTools à Visual Studio Code
À partir de vos commentaires et du suivi des problèmes publics de Chromium, l’équipe Microsoft Edge DevTools a appris que vous souhaitiez pouvoir personnaliser les raccourcis clavier dans DevTools. Dans Microsoft Edge 84, vous pouvez désormais faire correspondre les raccourcis clavier de DevTools à Visual Studio Code, qui n’est qu’une des fonctionnalités sur lesquelles l’équipe travaille pour la personnalisation des raccourcis.
Pour essayer l’expérience :
Dans DevTools, ouvrez Paramètres en appuyant sur ? ou en cliquant sur l’icône Paramètres (
) dans DevTools.Dans la section Expériences, cochez la case Activer les raccourcis clavier personnalisés sous l’onglet paramètres (nécessite un rechargement).
Rechargez DevTools.
Ouvrez à nouveau Paramètres et sélectionnez la section Raccourcis .
Cliquez sur la liste déroulante des raccourcis de correspondance dans les paramètres prédéfinis, sélectionnez DevTools (par défaut), puis sélectionnez Visual Studio Code.
Les raccourcis clavier dans DevTools correspondent désormais aux raccourcis pour des actions équivalentes dans Visual Studio Code.
Par exemple, le raccourci clavier pour suspendre ou poursuivre l’exécution d’un script dans Visual Studio Code est F5. Avec la présélection DevTools (par défaut), ce même raccourci dans DevTools est F8, mais avec la présélection de Visual Studio Code, ce raccourci est désormais également F5.
La fonctionnalité étant actuellement disponible dans Microsoft Edge 84 en tant qu’expérience, veuillez donc partager vos commentaires avec l’équipe !
Chromium problème #174309
Voir aussi :
Débogage à distance d’émulateurs Surface Duo
Vous pouvez désormais déboguer à distance votre contenu web en cours d’exécution dans l’émulateur Surface Duo en utilisant toute la puissance de Microsoft Edge DevTools.
Avec l’émulateur Surface Duo, vous pouvez tester le rendu de votre contenu web sur une nouvelle classe d’appareils pliables et à double écran. L’émulateur exécute le système d’exploitation Android et fournit l’application Microsoft Edge Android. Chargez votre contenu web dans l’application Microsoft Edge et déboguez-le avec DevTools :
La edge://inspect page d’une instance de bureau de Microsoft Edge affiche SurfaceDuoEmulator avec une liste des onglets ouverts ou des PWA qui s’exécutent sur l’émulateur Surface Duo :
Cliquez sur Inspecter pour l’onglet ou le PWA que vous souhaitez déboguer, pour ouvrir DevTools. Suivez le guide pas à pas pour déboguer à distance votre contenu web sur l’émulateur Surface Duo : Déboguer à distance des émulateurs Surface Duo.
Redimensionner plus facilement le panneau d’affichage rapide DevTools
Dans Microsoft Edge 83 ou les versions antérieures, vous redimensionniez le tiroir (désormais le panneau Affichage rapide ) en pointant à l’intérieur de la barre d’outils du tiroir. Le tiroir s’est comporté différemment des autres commandes de redimensionnement des volets de DevTools, où vous placez le curseur sur la bordure du volet pour le redimensionner. L’image suivante montre comment le redimensionnement du tiroir fonctionnait dans Microsoft Edge version 83 ou antérieure :
À partir de Microsoft Edge 84, vous pouvez redimensionner le tiroir en pointant sur la bordure. Cette modification aligne le comportement de redimensionnement du tiroir avec d’autres volets dans DevTools. L’image suivante montre comment fonctionne le redimensionnement du tiroir dans Microsoft Edge 84 ou version ultérieure :
Chromium problème #1076112
Capture d’écran, boutons de navigation, afficher le focus
Lors du débogage à distance d’un appareil Android, d’un appareil Windows 10 ou version ultérieure, ou d’un émulateur Surface Duo, vous pouvez basculer la diffusion d’écran avec l’icône 
dans le coin supérieur gauche de DevTools. Lorsque la diffusion d’écran est activée, vous pouvez naviguer dans l’onglet Microsoft Edge sur l’appareil distant à partir de la fenêtre DevTools.
Dans Microsoft Edge 84, ces boutons de navigation sont désormais également accessibles au clavier. Par exemple, en appuyant sur Maj+Tab depuis la barre d’URL screencastée, le focus est mis sur le bouton Actualiser :
Chromium problème #1081486
Le volet d’informations du panneau réseau est désormais accessible
Dans Microsoft Edge 84, le volet Détails de l’outil Réseau prend désormais en charge le focus lorsque vous l’ouvrez pour une ressource dans le journal réseau. Cette modification permet aux lecteurs d’écran de lire à voix haute et d’interagir avec le contenu du volet d’informations .
Chromium problème #963183
Annonces du projet Chromium
Les sections suivantes annoncent des fonctionnalités supplémentaires disponibles dans Microsoft Edge 84 qui ont été apportées au projet open source Chromium.
Résoudre les problèmes de site avec le nouvel outil Problèmes dans le tiroir DevTools
Le nouvel outil Problèmes dans le Tiroir (désormais le panneau Affichage rapide ) en bas de DevTools réduit la fatigue et l’encombrement des notifications de la console. Actuellement, la console est l’emplacement central qui permet aux développeurs de sites web, aux bibliothèques, aux frameworks et à Microsoft Edge de consigner les messages, les avertissements et les erreurs. L’outil Problèmes regroupe les avertissements du navigateur de manière structurée, agrégée et exploitable. L’outil Problèmes contient un lien vers les ressources concernées dans DevTools et fournit des conseils sur la façon de résoudre les problèmes.
Au fil du temps, d’autres avertissements apparaîtront dans l’outil Problèmes plutôt que dans la console, afin de simplifier les messages de la console .
Pour commencer, voir Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes.
Chromium problème #1068116
Afficher les informations d’accessibilité dans l’info-bulle du mode Inspecter
L’info-bulle du mode Inspection indique désormais si l’élément a un nom et un rôle accessibles et s’il peut être activé au clavier.
Chromium problème #1040025
Voir aussi :
- Analyser les pages à l’aide de l’outil Inspecter
- Axe : Name Role Value - à propos du nom et du rôle accessibles, au webhint.io.
- Axe : Clavier - à propos de la possibilité de concentrer le clavier, au webhint.io.
Mises à jour du volet des performances
Voir aussi :
Afficher les informations sur le temps de blocage total dans le pied de page
Après avoir enregistré les performances de votre chargement, l’outil Performance affiche désormais les informations de temps de blocage total (TBT) dans le pied de page. TBT est une métrique de performances de charge qui permet de quantifier le temps nécessaire à une page pour devenir utilisable. L’OTC mesure essentiellement la durée pendant laquelle une page ne semble utilisable que (parce que le contenu est rendu à l’écran) ; mais la page n’est pas réellement utilisable, car JavaScript bloque le thread principal et donc la page ne répond pas aux entrées de l’utilisateur. TBT est la principale mesure d’approximation du premier délai d’entrée.
Pour obtenir des informations sur le temps de blocage total, n’utilisez pas le workflow Actualiser la page
pour enregistrer les performances de chargement de page.
Au lieu de cela, sélectionnez 
Enregistrer l’enregistrement, rechargez manuellement la page, attendez qu’elle se charge, puis arrêtez l’enregistrement.
Si Total Blocking Time: Unavailable cette option s’affiche, cela signifie que Microsoft Edge DevTools n’a pas obtenu les informations requises à partir des données de profilage internes de Microsoft Edge.
Chromium problème #1054381
Voir aussi :
Événements de changement de disposition dans la nouvelle section Expérience
La nouvelle section Expérience de l’outil Performance vous aide à détecter les changements de mise en page. Le changement de disposition cumulatif (CLS) est une métrique qui vous permet de quantifier l’instabilité visuelle indésirable.
Cliquez sur l’événement de changement de disposition pour afficher les détails du changement de disposition dans le volet Résumé . Pointez sur les champs Déplacé de et Déplacé vers pour visualiser où le changement de disposition s’est produit.
Voir aussi :
Terminologie des promesses plus précise dans la console
Lors de la journalisation d’un Promise, la console a fourni PromiseStatus une valeur définie de manière incorrecte sur resolved.
La console utilise désormais le terme fulfilled, qui est conforme à la Promise spécification. Pour plus d’informations sur la Promise spécification, consultez États et destins sur GitHub.
V8 problème #6751
Voir aussi :
Mises à jour du volet Styles
Mise à jour d’août 2026 : l’article « Modifier les styles et paramètres de police CSS dans le volet Styles » et sa case à cocher d’expérience ont été supprimés.
Prise en charge du mot clé de retour
L’interface utilisateur de saisie semi-automatique du volet Styles détecte désormais le mot clé CSS de retour, qui rétablit la valeur en cascade d’une propriété à la valeur précédente appliquée au style de l’élément.
Chromium problème #1075437
Aperçus de l’image
Placez le curseur sur une background-image valeur dans le volet Styles pour afficher un aperçu de l’image dans une info-bulle.
Chromium problème #1040019
Le sélecteur de couleurs utilise désormais la notation des couleurs fonctionnelle séparée par des espaces
Le module de couleur CSS niveau 4 spécifie que les fonctions de couleur, telles que rgb(), doivent prendre en charge les arguments séparés par des espaces. Dans l’exemple,rgb(0, 0, 0)équivaut àrbg(0 0 0).
Lorsque vous sélectionnez des couleurs à l’aide du sélecteur de couleurs ou lorsque vous alternez entre les représentations de couleur dans le volet Styles en maintenant la touche Maj enfoncée et en sélectionnant la valeur de couleur d’arrière-plan , la syntaxe d’argument séparée par des espaces s’affiche.
Vous devez également afficher la syntaxe dans le volet Calculé et l’info-bulle Mode inspecter .
Microsoft Edge DevTools utilise la nouvelle syntaxe, car les fonctionnalités CSS à venir telles que color() ne prennent pas en charge la syntaxe déconseillée des arguments séparés par des virgules.
La syntaxe des arguments séparés par des espaces est prise en charge dans la plupart des navigateurs depuis un certain temps. Voir Puis-je utiliser : Notations de couleur fonctionnelles séparées par des espaces ?
Chromium problème #1072952
Obsolescence du volet Propriétés dans le panneau Éléments
Le volet Propriétés de l’outil Éléments est obsolète. Exécutez console.dir($0) plutôt dans la console .
Référence
Prise en charge des raccourcis d’application dans le volet Manifest
Dans l’outil Application , la page Manifeste affiche désormais les raccourcis d’application. Les raccourcis d’application aident les utilisateurs à démarrer rapidement des tâches courantes ou recommandées dans une application web. Le menu des raccourcis d’application s’affiche uniquement pour les Progressive Web Apps installées sur le bureau ou l’appareil mobile de l’utilisateur.
Voir aussi :
- Vue d’ensemble des applications Web Apps progressives (PWA)
- Déboguer une application web progressive (PWA)
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 Kayce Basques.
Ce travail est sous licence Creative Commons Attribution 4.0 International.