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
Fonctionnalités de débogage de grille CSS
L’équipe DevTools de Microsoft Edge collabore avec l’équipe Chrome DevTools et Chromium communauté pour ajouter de nouvelles fonctionnalités de débogage de grille CSS à DevTools. Vous pouvez désormais afficher les numéros de ligne de grille, les espaces de grille et les lignes de grille étendues sous forme de superposition sur la page. En outre, d’autres améliorations des outils de grille seront bientôt disponibles.
Mise à jour : cette fonctionnalité a été publiée et n’est plus expérimentale.
Pour tester l’expérience avec un exemple, consultez l’exemple de planificateur de grille CSS.
Chromium problème #1047356
Voir aussi :
Modifier et relire des demandes avec la console réseau
Vous pouvez désormais utiliser Modifier et Relire les demandes dans le journal réseau à l’aide de la console réseau. Ouvrez le journal réseau, cliquez avec le bouton droit, puis sélectionnez Modifier et relire :
Le nouvel outil Console réseau s’ouvre dans le volet Affichage rapide en bas de DevTools et se remplit automatiquement avec les informations relatives à la requête HTTP. Pour afficher la réponse renvoyée par le serveur, modifiez la demande (si nécessaire), puis sélectionnez Envoyer.
Vous pouvez également utiliser la console réseau pour créer et envoyer des requêtes HTTP directement à partir des DevTools.
Conseil : Pour afficher la console réseau dans le panneau principal (supérieur) au lieu du panneau Affichage rapide , voir Déplacer des outils entre les panneaux, ci-dessous.
Mise à jour : cette fonctionnalité a été publiée et n’est plus expérimentale.
Chromium problème #1093687
Événements respondWith du Worker du service dans l’onglet Minutage
L’onglet Minutage de l’outil Réseau inclut respondWith désormais les événements du worker du service. L’événement respondWith de worker du service indique la durée entre le moment où le gestionnaire d’événements du worker du service fetch commence à s’exécuter et le moment où la respondWith promesse du gestionnaire est fetch réglée.
Développez Réponse reçue pour afficher des informations supplémentaires de la fetch réponse, telles que CacheStorageCacheName, serviceWorkerResponseSourceet ResponseTime.
Chromium problème #1066579
Voir aussi :
- Affichez la relation temporelle des demandes dans la référence desfonctionnalités réseau.
- Afficher la répartition du minutage d’une demande dans la référence desfonctionnalités réseau.
commentaires sur le webhint dans le panneau 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 sur l’accessibilité, la compatibilité multi-navigateurs, la sécurité, les performances, les PWA et d’autres problèmes courants de développement Web des sites Web. Vous pouvez afficher les commentaires webhint dans le panneau Problèmes .
Pour activer l’expérience, consultez Activer ou désactiver une expérience et cochez la case en regard de Activer webhint. Ouvrez le panneau Problèmes pour afficher les commentaires de webhint.
Chromium problème #1070378
Voir aussi :
Déplacer des outils entre des panneaux
Auparavant, les outils tels que Elements et Network ne pouvaient être ouverts que dans le panneau principal (supérieur) de DevTools. De même, les outils tels que l’affichage 3D et les problèmes ne pouvaient être ouverts que dans le tiroir (désormais le panneau Affichage rapide ) en bas de DevTools. Vous pouvez désormais personnaliser la disposition de vos DevTools en déplaçant les outils entre les panneaux supérieur et inférieur.
Mise à jour : cette fonctionnalité a été publiée et n’est plus expérimentale.
Chromium problème #897944
Voir aussi :
- À propos des outils Barre d’activité et Affichage rapide dans Vue d’ensemble de DevTools.
Amélioration de l’info-bulle Initiateur dans le panneau Réseau
Dans Microsoft Edge 83 et 84, les info-bulles de la colonne Initiateur, qui affiche la cause de la demande de ressource, dans le journal réseau s’affichent avec une barre de défilement horizontale. Vous n’avez pu afficher la pile des appels à l’origine de la demande qu’en faisant défiler horizontalement l’info-bulle.
À partir de Microsoft Edge 85, vous pouvez maintenant afficher la pile des appels de l’initiateur dans l’info-bulle sans faire défiler horizontalement.
Chromium problème #1069404
Annonces du projet Chromium
Les sections suivantes annoncent des fonctionnalités supplémentaires disponibles dans Microsoft Edge 85 qui ont été apportées au projet open source Chromium.
Modification du style pour les infrastructure CSS-in-JS
Le volet Styles prend désormais mieux en charge la modification des styles créés avec les API CSS Object Model (CSSOM). De nombreux frameworks et bibliothèques CSS-in-JS utilisent les API CSSOM sous le capot pour construire des styles.
Vous pouvez désormais modifier les styles qui ont été ajoutés dans JavaScript à l’aide de l’interface CSSStyleSheet , qui est une nouvelle façon de créer et de distribuer des styles réutilisables lors de l’utilisation de Shadow DOM. Voir L’interface dans le CSSStyleSheetmodèle objet CSS (CSSOM).
Par exemple, les styles ajoutés avec CSSStyleSheet (API CSSOM) n’étaient h1 pas modifiables auparavant. Les styles peuvent désormais être modifiés dans le panneau Styles .
Testez cette fonctionnalité avec un exemple qui utilise CSS-in-JS. Voir Modification du style pour les infrastructure CSS-in-JS.
Chromium problème #946975
Phare 6 dans le panneau Phare
Le panneau Lighthouse exécute maintenant Lighthouse 6. Pour obtenir la liste complète de toutes les modifications, consultez les notes de publication de la version 6.0.0.
Lighthouse 6.0 introduit trois nouvelles mesures dans le rapport : Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et Total Blocking Time (TBT).
La formule du score de performances a également été repondérée pour mieux refléter l’expérience de chargement de l’utilisateur.
Chromium problème #772558
Voir aussi :
Première dépréciation significative de Paint
La première peinture significative (FMP) est déconseillée dans Lighthouse 6.0. FMP a également été retiré de l’outil Performance . Largest Contentful Paint est le remplacement recommandé pour FMP.
Chromium problème #1096008
Voir aussi :
- First Meaningful Paint (FMP) dans Glossary à MDN.
- La plus grande peinture de contenu (LCP) dans le glossaire de MDN.
- LargestContentfulPaint sur MDN.
- Outil Phare
Prise en charge des nouvelles fonctionnalités JavaScript
DevTools dispose désormais d’une meilleure prise en charge de certaines des dernières fonctionnalités du langage JavaScript :
Saisie semi-automatique facultative de la syntaxe de chaînage. La saisie semi-automatique de propriété dans la console prend désormais en charge la syntaxe de chaînage facultative, par exemple,
name?.fonctionne désormais en plus dename.etname[.Mise en surbrillance de la syntaxe pour les champs privés. Les champs de classe privée sont désormais correctement mis en surbrillance et joliment imprimés dans le panneau Sources .
Mise en surbrillance de la syntaxe pour l’opérateur de fusion nullish. DevTools imprime désormais correctement l’opérateur de fusion nullish dans le panneau Sources .
Chromium problèmes #1073903, #1083214, #1083797
Voir aussi :
Avertissements de nouveau raccourci d’application dans le volet Manifeste
Dans l’outil Application , les raccourcis d’application aident les utilisateurs à démarrer rapidement des tâches courantes ou recommandées au sein d’une application web.
Dans l’outil Application , le volet Manifeste affiche désormais des avertissements pour les conditions suivantes :
- Lorsque les icônes de raccourci de l’application sont inférieures à 96 x 96 pixels.
- Lorsque les icônes de raccourci de l’application et les icônes de manifeste ne sont pas carrées (puisque les icônes sont ignorées).
Chromium problème #955497
Voir aussi :
Affichage cohérent du volet Calculé
Le volet Calculé de l’outil Éléments s’affiche désormais de manière cohérente sous la forme d’un volet quelle que soit la taille de la fenêtre d’affichage. Auparavant, le volet Calculé fusionnait à l’intérieur du volet Styles lorsque DevTools était étroit.
Chromium problème #1073899
Voir aussi :
- Afficher uniquement le CSS réellement appliqué à un élément dans la référence des fonctionnalités CSS
Décalages de bytecode pour les fichiers WebAssembly
DevTools utilise désormais des décalages bytecode pour afficher les numéros de ligne du désassemblage Wasm. Les numéros de ligne permettent de savoir plus clairement que vous regardez des données binaires et correspondent mieux à la façon dont le runtime Wasm référence les emplacements.Chromium problème #1071432
Voir aussi :
Copier et couper en ligne dans le panneau Sources
Lorsque vous effectuez une copie ou une coupe sans sélection dans l’éditeur du panneau Sources, DevTools copie ou coupe la ligne de contenu actuelle.
Chromium problème #800028
Mises à jour des paramètres de la console
Dissocier les messages de la même console
Le bouton bascule Regrouper les similaires dans les paramètres de la console s’applique désormais aux messages en double. Auparavant, il s’appliquait simplement à des messages similaires.
Par exemple, auparavant, DevTools n’a pas dissocié les messages, même si l’option helloGrouper les similaires n’est pas cochée. À présent, les hello messages ne sont plus groupés.
Testez cette fonctionnalité avec un exemple qui envoie des messages en double à la console.
Chromium problème #1082963
Voir aussi :
- Désactiver le regroupement des messages dans la Référence des fonctionnalités de la console
Persistance des paramètres de contexte sélectionnés uniquement
Les paramètres de contexte sélectionné uniquement dans les paramètres de la console sont désormais conservés. Auparavant, les paramètres étaient réinitialisés chaque fois que vous fermiez et rouvrez DevTools. Cette modification uniformise le comportement du paramètre avec les autres options des paramètres de la console.
Chromium problème #1055875
Voir aussi :
- Filtrer les messages de différents contextes JavaScript - dans la référence des fonctionnalités de la console
Mises à jour du volet des performances
Informations sur le cache de compilation JavaScript dans l’outil Performances
Les informations relatives au cache de compilation JavaScript sont désormais toujours affichées dans le panneau Résumé de l’outil Performances. Auparavant, DevTools n’affichait aucun élément lié à la mise en cache du code si la mise en cache du code ne se produisait pas.
Chromium problème #912581
Voir aussi :
Alignement de la synchronisation de navigation dans le panneau Performance
Auparavant, l’outil Performance affichait les heures dans les règles en fonction du moment où l’enregistrement commençait. Le minutage a désormais changé pour les enregistrements dans lesquels l’utilisateur navigue. DevTools affiche désormais les temps de règle relatifs à la navigation, au lieu du début de l’enregistrement.
Les heures des DOMContentLoadedévénements , First Paint, First Contentful Paint et Largest Contentful Paint sont mises à jour pour être relatives au début de la navigation, ce qui signifie que le minutage correspond au minutage signalé par PerformanceObserver.
Problème de chromium #974550
Voir aussi :
Nouvelles icônes pour les points d’arrêt, les points d’arrêt conditionnels et les points de journal
Mise à jour : depuis 2022, les points d’arrêt sont désormais indiqués par un rectangle bleu, au lieu d’un cercle rouge.
Le panneau Sources a de nouvelles conceptions pour les points d’arrêt, les points d’arrêt conditionnels et les points de log. Les points d’arrêt sont représentés par un cercle rouge, tout comme Visual Studio Code et Visual Studio. Des icônes sont ajoutées pour différencier les points d’arrêt conditionnels des points de journalisation.
Chromium problème #1041830
Voir aussi :
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.
Ce travail est sous licence Creative Commons Attribution 4.0 International.