Quoi de neuf dans DevTools (Microsoft Edge 90)

• 05/04/2021
• 10 minutes de lecture
• • M

Les sections suivantes listent les annonces de l’équipe Microsoft Edge DevTools. Pour essayer les nouvelles fonctionnalités des DevTools, des extensions de Microsoft Visual Studio Code, et plus encore, consultez les annonces. Pour rester à jour avec les fonctionnalités les plus récentes et les plus importantes de vos outils de développement, téléchargez les canaux d’aperçu Microsoft Edge et suivez l’équipe Microsoft Edge DevToolssur Twitter.

Regrouper les outils en mode Focus

Focus Mode 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és affichée à gauche comprend des groupes d'outils prédéfinis tels que la disposition et le débogage. Pour personnaliser chaque groupe d'outils, fermez les outils à l'aide de l'icône Fermer ((X\ )) ou ajoutez de nouveaux outils à l'aide de l'icône Autres outils (+\ ).

Pour activer l'expérience, naviguez jusqu'à Activer les fonctions expérimentales et cochez les cases situées à côté de Focus Mode et DevTools Tooltips et **Activez les menus de l'onglet du bouton + pour ouvrir plus d'outils **. Pour plus d'informations sur cette fonctionnalité ou pour commenter avec des questions et des idées, naviguez vers DevTools : Focus Mode UI.

En savoir plus sur DevTools grâce à des infobulles informatives

La fonctionnalité DevTools Tooltips vous aide à connaître les différents outils et volets. Cliquez sur l'icône Aide (?) en bas de la barre d'activités pour activer les infobulles dans les outils de développement. Lorsque les infobulles sont activées, passez la souris sur chaque région délimitée de DevTools pour en savoir plus sur l'utilisation de l'outil. Pour activer l'expérience, naviguez jusqu'à Activer les fonctions expérimentales et cochez les cases situées à côté de Focus Mode et DevTools Tooltips et **Activez les menus de l'onglet du bouton + pour ouvrir plus d'outils **. Pour plus d'informations sur cette fonctionnalité ou pour commenter avec des questions et des idées, naviguez vers DevTools : Focus Mode UI.

Personnaliser les raccourcis clavier dans les paramètres

Vous pouvez désormais personnaliser le raccourci clavier pour toute action dans les DevTools. Pour modifier un raccourci clavier, effectuez les actions suivantes.

1. Ouvrez le DevTools, puis choisissez** Paramètres** > ** Raccourcis **.
2. Choisissez l'action que vous voulez personnaliser.
3. Choisissez l'option Modifier (\icône.
4. Sélectionnez les touches que vous voulez lier à l'action.
5. Choisissez la coche (\icône.

Pour plus d'informations sur la personnalisation et la modification des raccourcis, consultez la section Personnaliser les raccourcis clavier dans les DevTools de Microsoft Edge . Pour consulter les mises à jour en temps réel de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 174309.

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

Les outils de développement Microsoft Edge pour Visual Studio Code, version 1.1.4 de l'extension Microsoft Visual Studio Code, affichent désormais un favicon à côté de chacune des instances DevTools. Les messages de console de Microsoft Edge s'affichent désormais dans la console DevTools sous la rubrique Sortie du code Microsoft Visual Studio. Microsoft Visual Studio Code met automatiquement à jour les extensions. Pour mettre à jour manuellement la version 1.1.4, naviguez jusqu'à Mettre à jour une extension manuellement . Vous pouvez déposer des questions et contribuer à l'extension sur le repo GitHub de vscode-edge-devtools.

Amélioration de l'édition de CSS flexbox avec un éditeur visuel de flexbox et des superpositions multiples

DevTools dispose désormais d'outils de débogage CSS flexbox dédiés. Si le style display: flexoudisplay: inline-flex CSS est appliqué à un élément HTML, une flexicône s'affiche à côté de cet élément dans l'outil Éléments. Pour afficher (ou masquer) une superposition flexible sur la page Web, cliquez sur flexl'icône. Pour connaître l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez les numéros1166710 et 1175699.

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

Auparavant, vous ne pouviez pas développer ou réduire la chaîne de demandes à l'aide des touches fléchées du clavier dans le volet Initiateur, contrairement au DOM dans l'outil** Éléments**. Lorsqu'une demande de réseau est sélectionnée dans l'outil Réseau, le volet Initiateur affiche la chaîne des demandes qui ont initié la demande 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 fléchées du clavier dans le volet Initiateur. La demande de réseau ciblée dans la chaîne est également mise en évidence. Pour en savoir plus sur les initiateurs dans l'outil Réseau, naviguez jusqu'à Afficher les initiateurs et les dépendances. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez les numéros 1158276 et 1160637.

Le filtrage dans la console est plus cohérent

Lorsque vous filtrez dans la barre latérale de la console, les filtres de la liste déroulante des niveaux de journal ne sont pas disponibles. Auparavant, la liste déroulante des niveaux de journal s'affichait en surbrillance lorsque vous la survoliez, même si un filtre de la barre latérale de la console était sélectionné. Dans la version 90 de Microsoft Edge, la liste déroulante des niveaux de journal ne s'affiche plus lorsque vous la survolez 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, allez à Filtrer les messages.

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.

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

Auparavant, la console n'affichait pas les (")caractères guillemets doubles valides dans les chaînes JavaScript. À partir de la version 90 de Microsoft Edge, la console produit des chaînes JavaScript en utilisant des (")caractères guillemets doubles échappés. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1178530.

Emuler la fonction CSS color-gamut media

La requête média color-gamut émule la gamme approximative de couleurs prises en charge par le navigateur et le périphérique que vous testez. La liste déroulante située sous** la fonction de média CSS Emulate color-gamut** contient les espaces de couleur que DevTools peut émuler. Par exemple, pour déclencher une color-gamut: p3requête média, choisissez color-gamut : p3 dans la liste déroulante.

Pour émuler la fonction de média CSS color-gamut, effectuez les actions suivantes.

1. Ouvrez le menu Commande.
2. Tapez Rendering.
3. Exécutez la commande Afficher le rendu.
4. Naviguez jusqu'à la fonction de média CSS Emulate color-gamut et choisissez une option.

Pour en savoir plus sur cette color-gamutfonction, consultez la rubrique Qualité de l'affichage des couleurs : la fonction «color-gamut» . Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1073887 .

Amélioration de l'outil Progressive Web Apps

Avertissement sur l'installabilité de PWA dans la Console

La console affiche désormais un message d'avertissement plus détaillé sur l' installabilité des Progressive Web Apps (PWA) avec un lien vers l'amélioration de la détection du support hors ligne des Progressive Web Apps.

Avertissement sur la longueur de la description du PWA dans le volet du manifeste

Le volet Manifest affiche désormais un message d'avertissement si la description du manifeste dépasse 324 caractères.

Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez les numéros 965802 , 1146450 , et 1169689 .

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

La nouvelle colonne Espace d'adressage distant affiche l'espace d'adressage IP de chaque ressource réseau. Pour afficher la nouvelle colonne Espace d'adressage distant, effectuez les actions suivantes.

1. Naviguez vers l'outil Réseau.
2. Dans le tableau des demandes, survolez la ligne d'en-tête et ouvrez le menu contextuel (clic droit). Pour savoir comment ajouter ou supprimer des colonnes dans le tableau des demandes, consultez la rubrique Ajouter ou supprimer des colonnes.
3. Choisissez Espace d'adressage distant .

Le tableau des demandes affiche maintenant une nouvelle colonne dont l'en-tête est Espace d'adressage distant. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1128885.

Afficher les fonctionnalités autorisées et non autorisées dans la vue détaillée du cadre.

La vue détaillée du cadre affiche désormais une liste des fonctionnalités de navigateur autorisées et interdites, contrôlées par la stratégie de permissions. La stratégie de permissions est une API de plate-forme Web qui permet de bloquer l'utilisation des fonctionnalités du navigateur dans un cadre individuel ou dans les iframes qu'il intègre à une page Web. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1158827.

Nouvelle colonne SameParty dans le volet Cookies

Le volet Cookies de l'outil Application affiche désormais SamePartyl'attribut de chaque cookie. Cet SamePartyattribut est un nouvel attribut booléen permettant d'indiquer si un cookie est inclus dans les demandes adressées aux origines des mêmes ensembles de première partie. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1161427.

La propriété fn.displayName de l'outil Console est désormais obsolète.

Auparavant, cette fn.displayNamepropriété vous permettait de contrôler les noms de débogage des fonctions à afficher dans error.stacket dans les traces de pile de DevTools. À partir de la version 90 de Microsoft Edge, cettefn.displayName propriété est désormais dépréciée et remplacée par lafn.name propriété . Utilisez laObject.defineProperty méthode standard pour définir lafn.name propriété. Pour en savoir plusfn.name, consultez le site Function.name. Pour revoir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 1177685.

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

Cette expérience **permet d'obtenir une arborescence d'accessibilité complète **dans l'outil Éléments. Le volet Accessibilité propose une arborescence d'accessibilité partielle, qui affiche la chaîne d'ancêtres directs du nœud racine au nœud inspecté.
Après avoir activé cette expérience et rechargé les DevTools, choisissez l'un des boutons suivants pour changer l'affichage dans l'outil Éléments pour tous les éléments de la page Web.

• Pour afficher l'arborescence d'accessibilité complète, cliquez sur le bouton Passer à l'arborescence d'accessibilité.
• Pour afficher l'arborescence DOM, choisissez l'option Passer à l'arborescence DOM.

Pour activer l'expérience, accédez à la section Activer les fonctions expérimentales et cochez la case située à côté de Activer l'arborescence d'accessibilité complète dans le volet Éléments. Pour voir l'historique de cette fonctionnalité dans le projet open-source Chromium, consultez le numéro 887173.

Téléchargez les canaux de l'aperçu de Microsoft Edge

Si vous êtes sous Windows, Linux ou macOS, envisagez d'utiliser les canaux d'aperçu de Microsoft Edge comme navigateur de développement par défaut. Les canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools.

Entrer en contact avec l'équipe DevTools Microsoft Edge

Utilisez ces options pour discuter des nouvelles fonctionnalités et modifications de publication, ou tout autre sujet lié à DevTools.

• Envoyez vos commentaires à l’aide de l’icône Envoyer des commentaires dans DevTools.
• Tweet sur @EdgeDevTools.
• Envoyez une suggestion au Site web de votre choix.
• Pour classer les bogues sur cet article, utilisez cette section de Commentaires.

Ce travail est concédé sous une Licence internationale Creative Commons Attribution 4.0.