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.
Vidéo : Nouveautés de DevTools 106
Présentation de la Palette de commandes
L’expérience de Palette de commandes a été supprimée dans Microsoft Edge 123.
Dans Microsoft Edge 106, vous pouvez désormais activer et utiliser l’expérience de palette de commandes. La palette de commandes permet d’accéder aux commandes de gestion du navigateur et des outils de développement avec un seul raccourci clavier : Ctrl+Maj+Espace.
Pour activer l’expérience de la palette de commandes :
Accédez à
edge://flags. Ensuite, dans le champ de texte Indicateurs de recherche , commencez à taper Palette de commandes.Dans le menu déroulant Palette de commandes , sélectionnez Activé :
Notez le raccourci clavier, qui est affiché dans la section Palette de commandes de la
edge://flagspage.Cliquez sur le bouton Redémarrer qui s’affiche dans l’angle inférieur droit lorsque vous sélectionnez Activé.
Pour accéder rapidement aux commandes de gestion du navigateur et aux commandes DevTools disponibles, après avoir activé l’expérience :
Dans Microsoft Edge (avec ou sans DevTools ouvert), appuyez sur Ctrl+Maj+Espace.
Commencez à taper le texte. Les commandes sont filtrées en fonction de vos caractères d’entrée et sont regroupées dans des catégories telles que Suggestions, Historique et DevTools :
Pour limiter le filtrage à la liste des commandes DevTools uniquement, tapez le caractère supérieur à (>) :
Faites-nous savoir quelles commandes vous aimeriez voir dans les futures versions de Microsoft Edge, en publiant un commentaire dans le numéro 73 : [feedback] Expérience de palette de commandes dans le référentiel MicrosoftEdge/DevTools !
Filtrer et résoudre automatiquement les problèmes de code dans DevTools pour Visual Studio Code
L’extension Microsoft Edge DevTools pour Visual Studio Code fournit désormais des options de correction rapide, ce qui vous permet de résoudre automatiquement les problèmes.
Pour accéder aux options de correctif rapide :
Pointez sur un problème signalé par l’extension DevTools, indiqué par un soulignement ondulé dans votre code. Une icône d’ampoule apparaît à côté du problème.
Cliquez sur l’icône de l’ampoule (
). Le menu Correction rapide s’affiche :
Sélectionnez le correctif rapide que vous souhaitez utiliser pour résoudre le problème ou pour cesser de le signaler comme tel. Sélectionner pour ignorer le problème crée automatiquement un
.hintrcfichier qui indique à l’extension d’ignorer ce type de problème et de ne plus le signaler.
Voir aussi :
- Correctifs rapides automatisés et filtrage des problèmes dans l’analyse des problèmes en ligne et en direct
DevTools utilise désormais moins d’espace disque lors de la mise en cache de sourcemaps
À partir de Microsoft Edge 101, DevTools a commencé à mettre en cache les cartes sources dans IndexedDB afin de réduire la quantité de requêtes réseau récupérant vos cartes source. Toutefois, cette modification pourrait potentiellement occuper beaucoup d’espace disque si ces mappages sources ne sont jamais supprimés.
Dans Microsoft Edge 106, ce problème a été résolu en supprimant du stockage IndexedDB les cartes sources qui n’ont pas été consultées dans les 30 jours. En outre, les cartes sources servies à partir de localhost ne sont plus mises en cache. Merci de nous avoir envoyé vos commentaires sur ce problème !
Pour comprendre comment DevTools récupère et met en cache vos sourcemaps, regardez la colonne Load status dans l’outil Source Maps Monitor. Lorsque vous chargez la page Web pour la première fois, l’outil Moniteur de cartes sources indique que les cartes sources ne sont pas encore mises en cache :
Lorsque vous actualisez la page web, l’outil Moniteur de cartes sources indique que les cartes sources mises en cache sont utilisées :
Pour vider le cache IndexedDB et forcer DevTools à recharger les cartes source, exécutez la commande Clear source maps cache (Effacer le cache des cartes source ) dans le menu Commande. Voir Exécuter des commandes dans le menu Commande.
Pour l’histoire, voir le numéro 89.
Voir aussi :
- Les mappages de sources sont désormais mis en cache avec IndexedDB dans Nouveautés de DevTools (Microsoft Edge 101)
Les thèmes de couleur Chromium ont été déconseillés
Pour améliorer la fiabilité, les thèmes Chromium Light et Chromium Dark ont été déconseillés. Les utilisateurs qui avaient précédemment sélectionné ces thèmes seront automatiquement migrés vers le thème Light+ ou Dark+ , respectivement :
DevTools dans le thème Light+ :
DevTools dans le thème Dark+ :
Vous avez le choix entre de nombreux thèmes de couleurs DevTools, tels que Monokai et Solarized. Pour modifier le thème de couleur dans DevTools, cliquez sur le bouton Paramètres (
), puis dans la page Préférences , dans le menu déroulant Thème , sélectionnez un thème :
Améliorations de l’accessibilité en mode Focus et en mode contraste élevé
Les boutons d’emplacement du Dock et d’emplacement de la barre d’activités en mode Focus fonctionnent désormais mieux avec les lecteurs d’écran
Dans Microsoft Edge 105, le mode Focus a reçu plusieurs améliorations, notamment de nouveaux boutons d’emplacement du Dock et d’emplacement de la barre d’activité . Dans Microsoft Edge 106, ces nouveaux boutons fonctionnent désormais mieux avec les technologies d’assistance, telles que les lecteurs d’écran.
Les lecteurs d’écran annoncent maintenant quel bouton Emplacement du Dock ou Bouton Emplacement de la barre d’activité est actuellement sélectionné, ainsi que le nombre de boutons, représentant les options d’emplacement disponibles :
Voir aussi :
- Naviguer dans DevTools avec les technologies d’assistance
- Mode focus : commandes d’emplacement améliorées pour DevTools, la barre d’activité et l’affichage rapide dans Nouveautés de DevTools (Microsoft Edge 105).
Les styles calculés sont plus faciles à voir en mode contraste élevé
En mode contraste élevé, dans les versions précédentes de Microsoft Edge, les boutons de développement et de réduction des styles calculés ne s’affichaient pas correctement dans l’onglet Calculé de l’outil Éléments . Dans Microsoft Edge 106, ce problème a été résolu. Les boutons Développer et Réduire sont désormais visibles en mode contraste élevé :
Voir aussi :
Annonces du projet Chromium
Microsoft Edge 106 inclut également les mises à jour suivantes du projet Chromium :
- Regrouper les fichiers par auteur/déployé dans le panneau Sources
- Amélioration des traces de pile
- Amélioration de la pile des appels pendant le débogage
- Masquage des sources répertoriées ignorées dans le panneau Sources
- Masquage des fichiers répertoriés comme ignorés dans le menu de commande
- Nouvelle piste Interactions dans le panneau Performances