Partager via


Nouveautés de DevTools (Microsoft Edge 90)

Pour case activée les dernières fonctionnalités de Microsoft Edge DevTools et de 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 .

Regrouper les outils en mode Focus

Le mode Focus est une interface expérimentale qui vous permet de regrouper différents outils en fonction de vos propres scénarios de débogage. La nouvelle barre d’activité affichée à gauche inclut des groupes d’outils prédéfinis tels que Disposition et Débogage. Pour personnaliser chaque groupe d’outils, fermez les outils avec l’icône Fermer (X) ou ajoutez de nouveaux outils avec l’icône Plus d’outils (+).

Pour activer l’expérience, consultez Activation ou désactivation d’une expérience et cochez les cases en regard de Mode Focus et Info-bulles DevTools et Des onglets bouton Activer + pour ouvrir d’autres outils. Pour plus d’informations sur cette fonctionnalité ou pour commenter des questions et des idées, consultez DevTools : Focus Mode UI.

Afficher la barre d’activité.

En savoir plus sur DevTools avec des info-bulles informatives

La fonctionnalité d’info-bulles DevTools vous permet d’en savoir plus sur tous les différents outils et volets. Pointez sur chaque région décrite de DevTools pour en savoir plus sur l’utilisation de l’outil. Pour activer les info-bulles, effectuez l’une des opérations suivantes :

  • Sélectionnez Personnaliser et contrôler DevTools (...) >Aide>Basculez les info-bulles DevTools.
  • Appuyez sur Ctrl+Maj+H (Windows, Linux) ou Cmd+Maj+H (macOS).
  • Ouvrez le menu Commandes , puis tapez info-bulles.

Ensuite, pointez sur chaque région décrite de DevTools :

Mode Info-bulles DevTools

Pour désactiver les info-bulles, appuyez sur Échap.

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

Remarque : Depuis mai 2022, les info-bulles ne sont pas prises en charge à partir de la barre d’activité.

Personnaliser les raccourcis clavier dans Paramètres

Vous pouvez désormais personnaliser le raccourci clavier pour n’importe quelle action dans devTools.

Pour modifier un raccourci clavier :

  1. Ouvrez DevTools, puis sélectionnez Paramètres>Raccourcis.

  2. Sélectionnez l’action que vous souhaitez personnaliser.

  3. Cliquez sur l’icône Modifier (icône Modifier).

  4. Appuyez sur les touches que vous souhaitez lier à l’action.

  5. Cliquez sur l’icône en forme de coche (icône coche).

Pour plus d’informations sur la personnalisation et la modification des raccourcis, consultez Personnaliser les raccourcis clavier dans DevTools. Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 174309.

Personnaliser les raccourcis clavier dans les paramètres DevTools sur Raccourcis avec un raccourci en mode édition

Mise à jour 1.1.4 de l’extension Microsoft Edge DevTools pour Visual Studio Code

L’extension Outils de développement Microsoft Edge pour Visual Studio Code version 1.1.4 pour Microsoft Visual Studio Code affiche désormais un favicon en regard de chacune des instances DevTools. Les messages de console de Microsoft Edge s’affichent désormais dans la console DevTools sous Sortie de Microsoft Visual Studio Code. Microsoft Visual Studio Code met automatiquement à jour les extensions. Pour effectuer une mise à jour manuelle vers la version 1.1.4, consultez Mettre à jour manuellement une extension. Vous pouvez enregistrer les problèmes et contribuer à l’extension sur le dépôt GitHub vscode-edge-devtools .

La figure suivante affiche les messages d’un exemple de page web enregistrée dans l’outil Console dans Microsoft Edge :

Affichage d’un message dans la console dans Microsoft Edge DevTools

La figure suivante affiche les mêmes messages de l’exemple de page web journalisée dans la console DevTools sous Sortie de Microsoft Visual Studio Code :

Affichage du même message dans la console DevTools sous Sortie de Microsoft Visual Studio Code

Voir aussi :

Amélioration de l’édition flexbox CSS avec l’éditeur flexbox visuel et plusieurs superpositions

DevTools dispose désormais d’outils de débogage CSS flexbox dédiés. Si le display: flex style CSS ou display: inline-flex est appliqué à un élément HTML, une icône flex apparaît en regard de cet élément dans l’outil Éléments . Pour afficher (ou masquer) une superposition flexible sur la page web, cliquez sur l’icône flex .

Pour ouvrir l’éditeur Flexbox , dans l’outil Éléments , accédez à l’onglet Styles , puis cliquez sur la nouvelle icône en regard du display: flex style ou display: inline-flex . L’éditeur Flexbox permet de modifier rapidement les propriétés de flexbox :

Outils de débogage flexbox CSS

En outre, la section Flexbox du volet Disposition affiche tous les éléments flexbox sur la page web. Vous pouvez basculer la superposition de chaque élément :

Section Flexbox dans le volet Disposition

Pour obtenir l’historique de cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 1166710 et 1175699.

Voir aussi :

Améliorations de la navigation au clavier pour les demandes réseau

Auparavant, vous n’étiez pas en mesure de développer ou de réduire la chaîne de requêtes à l’aide des touches de direction du clavier dans le volet Initiateur , contrairement au DOM dans l’outil Éléments . Lorsqu’une demande réseau est sélectionnée dans l’outil Réseau , le volet Initiateur affiche la chaîne de demandes qui a initié la requête actuellement sélectionnée.

Dans Microsoft Edge version 90, vous pouvez développer ou réduire la chaîne de demandes à l’aide des touches de direction du clavier dans le volet Initiateur . La requête réseau ciblée dans la chaîne est également mise en surbrillance.

Cliquez sur une demande réseau, puis sur le volet Initiateur :

Cliquez sur une demande réseau, puis sur le volet Initiateur

Développez ou réduisez la chaîne d’initiateur de requête et suivez la ligne mise en surbrillance :

Développer ou réduire la chaîne de l’initiateur de requête et suivre la ligne mise en surbrillance

Pour en savoir plus sur les initiateurs dans l’outil Réseau , consultez Afficher les initiateurs et les dépendances.

Pour obtenir l’historique de cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 1158276 et 1160637.

Le filtrage dans la console est plus cohérent

Lorsque vous filtrez avec la barre latérale de la console, les filtres de la liste déroulante Niveaux de journalisation ne sont pas disponibles. Auparavant, la liste déroulante Niveaux de journalisation était mise en surbrillance lorsque vous pointiez dessus, même lorsqu’un filtre de la barre latérale de la console était sélectionné. Dans Microsoft Edge version 90, la liste déroulante Niveaux de journalisation n’est plus mise en surbrillance lorsque vous pointez dessus alors qu’un filtre de la barre latérale de la console est sélectionné.

Pour en savoir plus sur le filtrage dans la console, consultez Informations de référence sur le filtrage des messages dans la console.

Auparavant, si vous ouvrez la barre latérale de la console et pointez sur Niveaux par défaut, elle était mise en surbrillance :

Auparavant, si vous ouvrez la barre latérale de la console et pointez sur Niveaux par défaut, elle était mise en surbrillance

À partir de Microsoft Edge 90, si vous cliquez sur la barre latérale de la console et pointez sur Niveaux par défaut, elle ne met pas en surbrillance :

À partir de Microsoft Edge 90, si vous cliquez sur la barre latérale de la console et pointez sur Niveaux par défaut, elle ne se met pas en surbrillance.

Annonces du projet Chromium

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

La console échappe désormais les caractères entre guillemets doubles

Auparavant, la console ne génère pas de caractères de guillemets doubles (") valides dans les chaînes JavaScript. À compter de Microsoft Edge version 90, la console génère des chaînes JavaScript à l’aide de caractères guillemets doubles (") d’échappement :

La console génère des chaînes JavaScript à l’aide de caractères guillemets doubles () placés dans une séquence d’échappement

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

Voir aussi :

Émuler la fonctionnalité multimédia de la gamme de couleurs CSS

La requête de média de la gamme de couleurs émule la plage approximative de couleurs qui sont prises en charge par le navigateur et l’appareil que vous testez. La liste déroulante sous Émuler la gamme de couleurs des fonctionnalités multimédias CSS contient des espaces de couleur que DevTools peut émuler. Par exemple, pour déclencher une color-gamut: p3 requête de média, sélectionnez color-gamut : p3 dans la liste déroulante.

Pour émuler la fonctionnalité multimédia de la gamme de couleurs CSS :

  1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
  2. Dans DevTools, dans la barre d’outils main, sélectionnez l’onglet Rendu. Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’onglets (icône Autres onglets) ou sur le bouton Plus d’outils (icône Autres outils). L’outil Rendu s’ouvre.
  3. Dans la liste déroulante Émuler la fonctionnalité multimédia CSS , sélectionnez une option de gamme de couleurs :

Émuler la fonctionnalité multimédia de la gamme de couleurs CSS

Pour en savoir plus sur la color-gamut fonctionnalité, consultez Qualité de l’affichage des couleurs : fonctionnalité « color-gamut ».

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

Voir aussi :

Outils améliorés pour la Web Apps progressive

Avertissement d’installation PWA dans la console

La console affiche désormais un message d’avertissement d’installation plus détaillé pour les Web Apps progressives (PWA), avec un lien vers Amélioration de la détection de la prise en charge hors connexion des applications web progressives.

Avertissement d’installation PWA dans l’outil Console

Voir aussi :

Avertissement de longueur de description PWA dans le volet Manifeste

Dans l’outil Application , le volet Manifeste affiche désormais un message d’avertissement si la description du manifeste dépasse 324 caractères :

Avertissement de troncation de description PWA

Pour obtenir l’historique de cette fonctionnalité dans le projet open source Chromium, consultez Problèmes 965802, 1146450 et 1169689.

Voir aussi :

Nouvelle colonne Espace d’adressage distant dans l’outil Réseau

Dans l’outil Réseau , la nouvelle colonne Espace d’adressage distant affiche l’espace d’adressage IP réseau de chaque ressource réseau. Pour afficher la nouvelle colonne Espace d’adressage distant :

  1. Dans DevTools, ouvrez l’outil Réseau .

  2. Dans la table Demandes (main, partie inférieure de l’outil Réseau), cliquez avec le bouton droit sur la ligne d’en-tête, puis sélectionnez Espace d’adressage distant :

    Dans le menu contextuel, sélectionnez Espace d’adressage distant

    La table Demandes affiche désormais la colonne Espace d’adressage distant :

    La table Demandes affiche désormais la colonne Espace d’adressage distant

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

Voir aussi :

Afficher les fonctionnalités autorisées et non autorisées dans la vue Détails de l’image

Dans l’outil Application , le nœud Frames en bas à gauche ouvre la vue Détails du cadre. La vue Détails de l’image inclut désormais une section Stratégie d’autorisations , qui affiche une liste des fonctionnalités de navigateur autorisées et non autorisées :

Fonctionnalités autorisées et non autorisées en fonction de la stratégie d’autorisation

Cette liste est contrôlée par l’API de plateforme web stratégie d’autorisations, qui permet à une page web d’utiliser, ou empêche une page web d’utiliser, les fonctionnalités de navigateur spécifiées dans un cadre individuel ou dans des iframes incorporés par le frame.

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

Voir aussi :

Nouvelle colonne SameParty dans le volet Cookies

Le volet Cookies de l’outil Application affiche désormais l’attribut SameParty pour chaque cookie :

Colonne SameParty dans le volet Cookies

L’attribut SameParty est un nouvel attribut booléen permettant d’indiquer si un cookie est inclus dans les demandes adressées aux origines des mêmes jeux internes.

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

Voir aussi :

La propriété fn.displayName de l’outil Console est désormais déconseillée

Auparavant, la fn.displayName propriété vous permettait de contrôler les noms de débogage des fonctions à afficher dans error.stack et dans les traces de pile DevTools. À compter de Microsoft Edge version 90, la fn.displayName propriété est désormais déconseillée et remplacée par la fn.name propriété :

Exemple de propriété fn.name pour contrôler les noms de débogage des fonctions

Utilisez la méthode standard Object.defineProperty pour définir la fn.name propriété . Pour en savoir plus sur fn.name, consultez Function.name.

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

Voir aussi :

Arborescence d’accessibilité complète dans l’outil Éléments

Fonctionnalité expérimentale

Cette expérience fournit une arborescence d’accessibilité complète dans l’outil Éléments . L’onglet Accessibilité (regroupé avec l’onglet Styles) fournit une arborescence d’accessibilité partielle qui affiche la chaîne ancêtre directe du nœud racine au nœud inspecté. Après avoir activé cette expérience et rechargé DevTools, cliquez sur la zone de bouton en haut du panneau Éléments pour basculer l’affichage dans l’outil Éléments pour tous les éléments de la page web.

Pour afficher l’arborescence DOM, cliquez sur la zone de bouton Basculer vers l’arborescence DOM en haut :

Affichage de l’arborescence DOM

Pour afficher l’arborescence d’accessibilité complète, cliquez sur la zone de bouton Basculer vers l’arborescence d’accessibilité en haut :

Affichage de l’arborescence d’accessibilité complète

Pour activer l’expérience, consultez Activation ou désactivation d’une expérience et cochez la case en regard de Activer l’arborescence d’accessibilité complète dans le panneau Éléments.

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

Voir aussi :

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine se trouve ici et est créée par Jecelyn Yeen (Developer Advocate, Chrome DevTools).

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.