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.

Affichez la barre d’activité.

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) ou Cmd+Shift+H (macOS).
  • Ouvrez le menu Commande puis tapez tooltips.

Ensuite, placer le curseur sur chaque région de DevTools décrite :

Mode Info-bulles DevTools.

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:

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:

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

  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 la coche (Icône de 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.

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

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.

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

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.

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

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 :

Outils de débogage CSS 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 :

Section Flexbox dans le volet Disposition.

Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problèmes 1166710 et 1175699.

Voir aussi:

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 :

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.

Développez ou réduisez la chaîne de l’initiateur de requête 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.

Auparavant, si vous ouvriez la barre latérale de la console et que vous passiez sur les niveaux par défaut, il était mis en surbrillance.

À 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 :

À partir de Microsoft Edge 90, si vous choisissez la barre latérale Console et que vous 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 (") :

La console produit des chaînes JavaScript en utilisant des caractères de guillemets doubles échappés (&#0022 ;).

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 :

  1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Ou appuyez sur Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools s’ouvre.
  2. 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 (Icône plus d’onglets.), ou bien le bouton Plus d’outils ( Icône plus d’outils.). L’outil Rendu s’ouvre.
  3. Dans la liste déroulante **Émuler la gamme de couleurs de la fonctionnalité multimédia CSS **, sélectionnez une option gamme de couleurs :

Émulez la fonctionnalité de support de la gamme de couleurs CSS.

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.

Avertissement d’installabilité PWA dans l’outil Console.

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 :

Avertissement de troncation de la description PWA.

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:

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

  2. 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** :

    Dans le menu avec le bouton droit, sélectionnez Espace d’adressage distant.

    Le tableau des 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, voir Problème 1128885.

Voir aussi:

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 :

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 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 :

Colonne SameParty dans le volet Cookies.

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é :

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

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:

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

Fonctionnalité expérimentale.

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 :

Affichage de l’arborescence DOM.

Pour afficher l’arborescence d’accessibilité complète, cliquez sur le bouton Passer à l’arborescence d’accessibilité dans la zone du haut :

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

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:

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).

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