Nouveautés de DevTools (Microsoft Edge 91)

Il s’agit des dernières fonctionnalités DevTools de la version stable de Microsoft Edge.

Soulignements ondulés mettant en évidence les problèmes de code et les améliorations dans l’outil Éléments

Dans la plupart des IDE modernes, un soulignement ondulé sous le texte indique des erreurs de syntaxe. Dans Microsoft Edge version 91 ou ultérieure, les soulignements ondulés s’affichent sous HTML dans la vue DOM de l’outil Elements . Le soulignement ondulé indique les problèmes de code et les suggestions liés à l’accessibilité, à la compatibilité, aux performances, etc.

Pour ouvrir l’outil Problèmes et en savoir plus sur le problème et sur la façon de le résoudre :

  • Appuyez de façon prolongée sur la touche Maj, puis cliquez sur un soulignement ondulé.

  • Ou cliquez avec le bouton droit sur un soulignement ondulé, puis sélectionnez Afficher dans les problèmes.

Sélection de l’erreur soulignée dans l’outil Éléments :

Sélection de l’erreur soulignée dans l’outil Éléments

Affichage des détails de l’erreur dans l’outil Problèmes :

Affichage des détails de l’erreur dans l’outil Problèmes

Voir aussi :

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é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>à basculer les info-bulles DevTools.
  • Appuyez sur Ctrl+Maj+H (Windows, Linux) ou Commande+Maj+H (macOS).
  • Ouvrez le menu de commande , puis tapez info-bulles.

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

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és.

Chronologie de mise à jour du Worker du service

Dans Microsoft Edge version 91 ou ultérieure, si vous êtes un développeur d’application web progressive ou de service worker, affichez le cycle de vie de mise à jour de vos workers du service sous forme de chronologie dans l’outil Application. Cette fonctionnalité vous permet de comprendre le temps que votre worker du service passe dans chacune des étapes suivantes :

  • Installer
  • Wait
  • Activate

Afficher la chronologie du cycle de mise à jour pour votre worker du service

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 1066604.

Voir aussi :

Les Progressive Web Apps n’affichent plus d’avertissements pour les icônes non carrées

Dans Microsoft Edge version 90 ou antérieure, si le manifeste d’application web de votre PWA incluait une icône non carrée, un avertissement s’affichait dans la section Erreurs et avertissements pour chaque icône non carrée. Dans Microsoft Edge version 91 ou ultérieure, la section Manifeste de l’outil Application n’affiche aucun avertissement si vous fournissez au moins une icône carrée. Si vous n’indiquez aucune icône carrée, le message d’avertissement suivant s’affiche :

Most operating systems require square icons.  Please include at least one square icon in the array.

Dans Microsoft Edge version 90 ou antérieure, une erreur s’affiche pour chaque icône qui n’est pas carrée :

Dans Microsoft Edge version 90 ou antérieure, une erreur s’affiche pour chaque icône qui n’est pas carrée

Dans Microsoft Edge version 91 ou ultérieure, aucune erreur ne s’affiche lorsque vous fournissez au moins une icône carrée :

Dans Microsoft Edge version 91 ou ultérieure, aucune erreur n’est affichée lorsque vous fournissez au moins une icône carrée

Pour afficher les erreurs et les avertissements dans votre manifeste d’application web, sélectionnez Outil >de l’applicationManifeste de la section >de l’application. Les erreurs et avertissements sont répertoriés sous le titre Erreurs et avertissements .

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 1185945.

Voir aussi :

DevTools localisés désormais pris en charge dans les navigateurs basés sur Chromium

À partir de la version 81 de Microsoft Edge, l’interface utilisateur de Microsoft Edge DevTools s’affiche dans votre propre langue. De nombreux développeurs utilisent des outils de développement tels que StackOverflow et Visual Studio Code dans leur langue maternelle. Pour offrir une flexibilité similaire du langage de l’interface utilisateur, l’équipe Microsoft Edge DevTools, l’équipe Chrome DevTools et l’équipe Google Lighthouse ont collaboré pour offrir la même expérience dans tous les navigateurs basés sur Chromium.

Navigateur Microsoft Edge et DevTools définis sur le japonais

Consultez Modifier les paramètres de langue de DevTools.

Pour plus d’informations sur la collaboration sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 1136655.

Utiliser le clavier pour accéder aux variables CSS

À partir de la version 88 de Microsoft Edge, le volet Styles affiche les variables CSS et fournit un lien direct vers la définition de chaque variable. Dans Microsoft Edge version 91 ou ultérieure, vous pouvez utiliser les touches de direction pour accéder facilement aux variables CSS. Pour ouvrir la définition dans le volet Styles , placez le curseur sur une variable, puis appuyez sur Entrée :

Variable CSS '--theme-body-background' mise en surbrillance dans le volet Styles

Pour obtenir des mises à jour en temps réel sur cette fonctionnalité dans le projet open source Chromium, consultez Problème 1187735.

Voir aussi :

Les problèmes sont automatiquement triés par gravité

L’outil Problèmes affiche des recommandations pour améliorer votre site web, notamment l’accessibilité, les performances, la sécurité, etc. En fonction des commentaires des utilisateurs, les problèmes sont désormais automatiquement triés par gravité. Dans chaque catégorie de commentaires, chaque problème marqué comme une erreur apparaît en premier, suivi de chaque problème marqué comme un avertissement, puis de chaque problème marqué comme un conseil :

L’outil Problèmes affiche les problèmes triés par gravité

Voir aussi :

Microsoft Edge Developer Tools pour Visual Studio Code version 1.1.7

La version 1.1.7 de l’extension Microsoft Edge Tools pour Visual Studio Code fournit les DevTools de la version 88 de Microsoft Edge. Cette extension prend désormais en charge les appareils ARM et ne dépend plus du débogueur pour l’extension Microsoft Edge.

La version 1.1.7 inclut les corrections de bogues et améliorations suivants :

  • Mise à jour de la fiabilité de la fermeture de cible.

  • Mise à jour du panneau latéral pour qu’il se rafraîchisse automatiquement lorsque vous déboguez des cibles créées ou détruites.

  • Ajout d’un nouveau menu contextuel qui vous permet d’accéder plus rapidement aux paramètres de l’extension et au dernier journal des modifications.

  • Mise à jour et simplification de la publication de la documentation d’extension, y compris les fonctionnalités les plus récentes.

Pour mettre à jour manuellement la version 1.1.7, 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.

Voir aussi :

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.

Visualiser CSS scroll-snap

Dans l’outil Elements , vous pouvez désormais basculer le scroll-snap badge pour inspecter l’alignement du défilement CSS. Lorsqu’un élément HTML de votre page Web s’est scroll-snap-type appliqué, un scroll-snap badge s’affiche à côté dans l’outil Elements . Cliquez sur le scroll-snap badge pour basculer l’affichage d’une superposition d’accrochage sur la page web.

Pour consulter un exemple de page Web, consultez Démonstration d’alignement de défilement. Dans l’exemple, des points apparaissent sur des bords alignés. Le port de défilement a un contour uni, tandis que les éléments d’ancrage ont des contours en pointillés. Le remplissage du défilement est rempli en vert, tandis que la marge de défilement est remplie en orange :

CSS scroll-snap

Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 862450.

Voir aussi :

Nouvel outil Inspecteur de mémoire

Utilisez le nouvel outil Inspecteur de mémoire pour inspecter une ArrayBuffer mémoire en JavaScript et Wasm :

Outil Inspecteur de mémoire

Voir :

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

Nouveau volet Paramètres de badge dans l’outil Éléments

À présent, utilisez les paramètres de badge dans l’outil Éléments pour activer (ou désactiver) des badges individuels. Utilisez cette fonctionnalité pour personnaliser les badges importants et rester concentré sur ceux-ci pendant que vous examinez les pages web.

  1. Cliquez avec le bouton droit sur un élément, puis cliquez sur Paramètres de badge. Le volet des paramètres de badge s’ouvre en haut de l’outil Éléments :

    Volet Paramètres de badge dans l’outil Éléments

  2. Pour afficher (ou masquer) les badges, cochez (ou décochez) la case en regard du nom du badge.

Voir aussi :

Aperçu amélioré de l’image avec des informations sur les proportions

Dans l’outil Éléments , les aperçus d’images ont été améliorés pour afficher plus d’informations, notamment les détails suivants :

  • Taille rendue
  • Proportions rendues
  • Taille intrinsèque
  • Proportions intrinsèques
  • La taille des fichiers

Aperçu de l’image avec les informations de proportions dans l’outil Élément

Ces informations vous aident à mieux comprendre vos images et à appliquer l’optimisation. Les informations sur les proportions de l’image sont également disponibles dans l’outil Réseau , lorsque vous cliquez sur une ressource de page qui est une image :

Informations sur les proportions de l’image dans l’outil Réseau

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

Voir aussi :

Nouvelles options de configuration des encodage de contenu dans l’outil Conditions du réseau

Dans l’outil Réseau , cliquez sur le nouveau bouton Plus de conditions de réseau... en regard du menu déroulant Limitation pour ouvrir l’outil Conditions de réseau . Pour tester si les réponses du serveur sont correctement encodées pour les navigateurs qui ne prennent pas en charge gzip, brotli ou un autre avenir Content-Encoding:

  1. Ouvrez l’outil Conditions du réseau .

  2. Accédez aux encodage de contenu acceptés.

  3. Désactivez la case à cocher en regard de que Content-Encoding vous souhaitez tester.

Le bouton « Autres conditions réseau » de l’outil Réseau permet d’ouvrir l’outil « Conditions réseau » pour configurer l’encodage du contenu

Voir aussi :

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

Améliorations du volet Styles

Nouveau raccourci pour afficher la valeur calculée dans le volet Styles

Maintenant, pour afficher la valeur CSS calculée dans l’onglet Styles de l’outil Éléments :

  1. Cliquez avec le bouton droit sur une propriété CSS, puis sélectionnez Afficher la valeur calculée :

    Nouveau raccourci pour afficher la valeur calculée

Voir aussi :

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

Prise en charge du mot clé de couleur d’accentuation

L’interface utilisateur de saisie semi-automatique du volet Styles détecte désormais le accent-color mot clé CSS, ce qui vous permet de spécifier la couleur d’accentuation des contrôles d’interface utilisateur générés par l’élément. Les cases à cocher ou les cases d’option sont des exemples de contrôles d’interface utilisateur générés par un élément.

Le mot clé CSS 'accent-color'

Pour plus d’informations sur le status de l’implémentation de Chromium, consultez Fonctionnalité : propriété CSS de couleur d’accent. Pour activer cette fonctionnalité, accédez à edge://flags#enable-experimental-web-platform-features et définissez la case à cocher sur Activé.

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

Voir aussi :

Afficher les détails des fonctionnalités bloquées dans la vue détaillée du cadre

La stratégie de permissions est une API de plateforme web qui donne à un site web la possibilité d’autoriser ou de bloquer l’utilisation des fonctionnalités du navigateur dans un cadre individuel ou dans un iframe cadre qu’il incorpore. Pour afficher les détails du blocage d’une fonctionnalité :

  1. Accédez à une page web qui incorpore des éléments cross-origin iframe .
  2. Ouvrez l’outil Application .
  3. Sous Cadres, sélectionnez l’origine iframecroisée.
  4. Pour passer en revue la liste des fonctionnalités désactivées pour celaiframe, faites défiler jusqu’à la sectionFonctionnalités désactivées de la stratégie >d’autorisations.
  5. Cliquez sur Afficher les détails.
  6. Cliquez sur l’icône en regard de chaque stratégie pour accéder à la demande réseau ou à celle iframe qui a bloqué la fonctionnalité.

Voir aussi :

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

Filtrer les expériences dans le cadre Expériences

Trouvez des expériences plus rapidement avec le nouveau filtre d’expérience. Par exemple, pour activer de nouvelles expériences pour des problèmes de code :

  1. Dans DevTools, sélectionnez Paramètres (icône Paramètres) >Expériences.

  2. Dans la zone de texte Filtre , commencez à taper des problèmes :

Filtrer les expériences dans le cadre Expériences

Voir aussi :

Nouvelle colonne d’en-tête Vary dans le volet Stockage du cache

Dans le volet Stockage de cache de l’outil Application, utilisez la nouvelle Vary Header colonne pour afficher les valeurs d’en-tête de Vary réponse HTTP :

Varier En-tête colonne

Pour consulter l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1186049.

Voir aussi :

Améliorations apportées à l’outil Sources

Prise en charge des nouvelles fonctionnalités JavaScript

DevTools prend désormais en charge les nouvelles vérifications de marque privée a.k.a. #foo in obj Fonctionnalité de langage JavaScript. La fonctionnalité de vérification de marque privée permet à l’opérateur de prendre en charge les in champs de classe privés (#) d’un objet spécifique. Essayez-le dans les outils Console et Sources .

Pour inspecter les champs privés :

  1. Dans l’outil Sources , accédez au volet débogueur .
  2. Développez la section Portée :

Vérifications JavaScript des marques privées

Voir aussi :

Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 11374.

Prise en charge améliorée du débogage des points d’arrêt

Dans Microsoft Edge version 90 ou antérieure, DevTools ne définit des points d’arrêt que dans un seul bundle. Dans Microsoft Edge version 91 ou ultérieure, lorsque vous déboguez un composant partagé, DevTools définit correctement les points d’arrêt dans plusieurs bundles.

Les offres groupées JavaScript modernes telles que Webpack et Rollup prennent en charge le fractionnement du code en offres groupées. Voir Fractionnement du code.

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

Voir aussi :

Prise en charge de l’aperçu de pointage avec notation entre crochets

L’outil Sources prend désormais en charge l’aperçu de pointage sur les expressions membres JavaScript qui utilisent la [] notation :

Prise en charge de l’aperçu de pointage avec notation []

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

Voir aussi :

Amélioration du contour des fichiers HTML

DevTools offre désormais une meilleure prise en charge des plans pour les .html fichiers. Dans l’outil Sources , ouvrez le .html fichier. Pour activer (ou désactiver) le plan du code, appuyez sur Ctrl+Maj+O sous Windows/Linux ou Commande+Maj+O sur macOS. Auparavant, DevTools n’affichait que certaines des fonctions. Dans la figure suivante, DevTools répertorie désormais correctement toutes les fonctions dans le plan :

Amélioration du contour des fichiers HTML

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

Voir aussi :

Traces de pile d’erreurs appropriées pour le débogage Wasm

Dans Microsoft Edge version 90 ou antérieure, DevTools affichait uniquement les références Wasm génériques dans les traces de pile d’erreurs. Dans Microsoft Edge version 91 ou ultérieure, DevTools résout les demandes de fonction en ligne et affiche l’emplacement source dans les traces de pile d’erreurs pour le débogage WASM. Pour en savoir plus sur les traces de pile d’erreurs dans la console, consultez la référence de l’API d’erreur dans l’objet console.

Dans Microsoft Edge version 91 ou ultérieure, DevTools résout les demandes de fonction en ligne et affiche les traces de pile d’erreurs appropriées pour le débogage Wasm.

Dans Microsoft Edge version 90 et antérieures, l’emplacement source n’est pas affiché dans les traces de la pile d’erreurs. Les emplacements sources sont .dsquare Précédentes traces de pile d’erreurs pour le débogage Wasm :

Précédentes traces de pile d’erreurs pour le débogage Wasm

Dans Microsoft Edge version 91 et ultérieures, l’emplacement source est affiché dans les traces de la pile d’erreurs. Traces de pile d’erreurs appropriées pour le débogage Wasm :

Traces de pile d’erreurs appropriées pour le débogage Wasm

Pour passer en revue l’historique de cette fonctionnalité dans le projet open source Chromium, voir Problème 1189161.

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Jecelyn Yeen.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

Voir aussi

  • Dernière mise à jour :