Quoi de neuf dans DevTools (Microsoft Edge 90)
Pour découvrir les dernières fonctionnalités de Microsoft Edge DevTools et 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 d’aperçu) comme navigateur de développement par défaut. Les versions bêta, de développement 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 Microsoft Edge canaux 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 référentiel MicrosoftEdge/DevTools .
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 avec l’icône Fermer (X) ou ajoutez de nouveaux outils avec l’icône Plus d’outils (+).
Pour activer l’expérience, voir Activer ou désactiver une expérience et cochez les cases en regard des info-bulles du mode focus et des outils de développement et des menus de l’onglet Activer + bouton pour ouvrir plus d’outils. Pour plus d’informations sur cette fonctionnalité ou pour commenter avec des questions et des idées, voir DevTools: Focus Mode UI.
Voir Simplifier DevTools à l’aide du mode Focus.
En savoir plus sur DevTools grâce à des infobulles informatives
La fonctionnalité DevTools Tooltips vous aide à connaître les différents outils et volets. Placer le curseur sur chaque région décrite passez la souris sur chaque région délimitée de DevTools pour plus d’informations 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 > Activer/désactiver les info-bulles DevTools. - Ou appuyez sur
Ctrl+Shift+H(Windows, Linux) ouCmd+Shift+H(macOS). - Ouvrez le menu Commande puis tapez
tooltips.
Ensuite, placer le curseur sur chaque région de DevTools décrite :
Pour désactiver les info-bulles, appuyez sur Esc.
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és; autrement dit, en Mode concentration.
Voir aussi:
- Afficher les info-bulles DevTools dans Vue d’ensemble de DevTools.
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:
Ouvrez DevTools, puis sélectionnez Paramètres > Shortcuts.
Sélectionnez l’action que vous souhaitez personnaliser.
Cliquez sur l’icône Modifier (
).Appuyez sur les touches que vous souhaitez lier à l’action.
Cliquez sur la coche (
).
Pour plus d’informations sur la personnalisation et la modification des raccourcis, voir Personnaliser les raccourcis clavier dans DevTools. Pour les mises à jour en temps réel de cette fonctionnalité dans le projet open source Chromium, voir Problème 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, voir Mettre à jour une extension manuellement. Vous pouvez générer des problèmes et contribuer à l’extension sur le référentiel GitHub vscode-edge-devtools.
La figure suivante affiche les messages d'un exemple de page Web enregistrée dans l'outil Console de Microsoft Edge.
La figure suivante affiche les mêmes messages de la page Web d'exemple enregistrés dans la DevTools Console sous Sortie du code Microsoft Visual Studio.
Voir aussi:
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 CSS display: flex ou display: inline-flex est appliqué à un élément HTML, une icône flex apparaît à côté de cet élément dans l’outil Elements. 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 style display: flex ou display: inline-flex. L'éditeur Flexbox offre un moyen rapide de modifier les propriétés de flexbox :
De plus, la section Flexbox du volet Mise en page affiche tous les éléments Flexbox de la page Web. Vous pouvez basculer la superposition de chaque élément :
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problèmes 1166710 et 1175699.
Voir aussi:
- Modifier les styles et paramètres de police CSS dans le volet Styles
- Synchronisation des modifications dynamiques à partir de l’outil Styles à l’aide de la modification du miroir CSS dans Extension de MicrosoftEdge DevTools pour VisualStudioCode.
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.
Cliquez sur une demande réseau, puis sur le volet Initiateur :
Développez ou réduisez la chaîne des initiateurs de demande et suivez la ligne en surbrillance.
Pour en savoir plus sur les initiateurs dans l’outil Réseau, voir Afficher les initiateurs et les dépendances.
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problèmes 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 en surbrillance lorsque vous la survolez si un filtre de la Barre latérale de la console est sélectionné.
Pour en savoir plus sur le filtrage dans la Console, consultez Filtrer les messages dans Référence des fonctionnalités de la console.
Auparavant, si vous ouvrez la barre latérale de la console et que vous survolez les niveaux par défaut, ils étaient mis en évidence.
À partir de Microsoft Edge 90, si vous choisissez la barre latérale Console et survolez les niveaux par défaut, ils ne sont pas mis en évidence :
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 ne générait pas de caractères guillemets doubles valides (") dans les chaînes JavaScript. À partir de Microsoft Edge version90, la Console produit des chaînes JavaScript à l’aide de caractères guillemets doubles échappés (") :
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1178530.
Voir aussi:
Emuler la fonction CSS color-gamut media
La requête multimédia de gamme de couleurs émule la plage approximative de couleurs qui sont pris en charge par le navigateur et l’appareil que vous testez. La liste déroulante située sous Émuler la fonction multimédia CSS de gamme de couleurs contient les espaces de couleur que DevTools peut émuler. Par exemple, pour déclencher une requête multimédia color-gamut: p3, sélectionnez gamme de couleurs: p3 dans la liste déroulante.
Pour émuler la fonctionnalité multimédia de palette de couleurs CSS :
- Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Ou appuyez sur
Ctrl+Shift+I(Windows, Linux) ouCommand+Option+I(macOS). DevTools s’ouvre. - Dans DevTools, dans la barre d’outils principale, sélectionnez l’onglet Rendu. Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’onglets (
), ou bien le bouton Plus d’outils (
). L’outil Rendu s’ouvre. - Dans la liste déroulante **Émuler la gamme de couleurs de la fonctionnalité multimédia CSS **, sélectionnez une option gamme de couleurs :
Pour en savoir plus sur la fonctionnalité color-gamut, voir Qualité de l’affichage des couleurs : la fonctionnalité « color-gamut ».
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1073887.
Voir aussi:
Outils améliorés pour les Web Apps progressives
Avertissement sur l'installabilité de PWA dans la Console
La console affiche désormais un message d'avertissement plus détaillé sur l' instabilité des Progressive Web Apps (PWA) avec un lien vers l'amélioration de la détection du support hors ligne des Progressive Web Apps.
Voir aussi:
Avertissement sur la longueur de la description du PWA dans le volet du manifeste
Dans l’outilApplication, le volet Manifeste affiche désormais un message d'avertissement si la description du manifeste dépasse 324 caractères :
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problèmes 965802, 1146450 et 1169689.
Voir aussi:
Nouvelle colonne Espace d'adressage distant dans l'outil Réseau
L’outil Réseau, dans la nouvelle colonneEspace d'adressage distant, affiche l'espace d'adressage IP de chaque ressource réseau. Pour afficher la nouvelle colonne Espace d’adressage distant:
Dans DevTools, ouvrez l’outil Réseau.
Dans la table Requêtes (la partie principale, 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** :
Le tableau des demandes affiche désormais la colonne Espace d'adressage distant.
Pour afficher l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1128885.
Voir aussi:
- Ajouter ou supprimer des colonnes, dans Référence ses fonctionnalités de réseau.
Afficher les fonctionnalités autorisées et non autorisées dans la vue détaillée du cadre.
Dans l’outil Application, le nœud Frames en bas à gauche ouvre l’affichage de détails du cadre. L’affichage des détails du frame inclut désormais une section Stratégie d’autorisations, qui affiche la liste des fonctionnalités de navigateur autorisées et non autorisées :
Cette liste est contrôlée par l’API de plateforme web de stratégie d’autorisations, qui permet à une page web d’utiliser ou empêche une page web d’utiliser des fonctionnalités de navigateur spécifiées dans un cadre individuel ou dans des iframes incorporés par le cadre.
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1158827.
Voir aussi:
Nouvelle colonne SameParty dans le volet Cookies
Le voletCookies de l'outil Application affiche désormais l’SamePartyattribut 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 passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1161427.
Voir aussi:
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, la fn.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 plus sur fn.name, voir Function.name.
Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1177685.
Voir aussi:
- Référence des fonctionnalités de la console
- Fonctions et sélecteurs d’utilitaires de l’outil console
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 voletAccessibilité (regroupé avec les Styles) 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é DevTools, cliquez sur la zone de bouton en haut du panneau Éléments pour changer l’affichage dans l’outil Éléments pour tous les éléments de la page Web.
Pour afficher l’arborescence DOM, cliquez sur le bouton Basculer en mode arborescence DOM dans la zone du haut :
Pour afficher l’arborescence d’accessibilité complète, cliquez sur le bouton Passer à l’arborescence d’accessibilité dans la zone du haut :
Pour activer l'expérience, accédez à Activer ou désactiver une expérience et cochez la case en regard de Activer l'arborescence d'accessibilité complète dans le volet Éléments.
Pour obtenir l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 887173.
Voir aussi:
- Tester l’accessibilité à l’aide de l’onglet Accessibilité
- Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements
Notes
Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et a été rédigée par Jecelyn Yeen (Conseillers pour les développeurs, Chrome DevTools).
Ce travail est concédé sous une Licence internationale Creative Commons Attribution 4.0.