Nouveautés des outils de développement (Chrome 91)

Jecelyn Yeen

Pop-up d'informations sur les Web Vitals dans le panneau "Performances"

Pointez sur un repère Signaux Web dans le panneau Performances pour comprendre ce que signifie l'indicateur (bonnes, moyennes ou mauvaises performances).

Pop-up d'informations sur les métriques Web Vitals

Problème Chromium : 1147872

Visualiser le CSS scroll-snap

Vous pouvez désormais activer ou désactiver le badge scroll-snap dans le panneau Éléments pour inspecter l'alignement CSS scroll-snap.

CSS scroll-snap

Lorsqu'un élément HTML de votre page (par exemple, cette page de démonstration) est associé à scroll-snap-type, un badge scroll-snap s'affiche à côté dans le panneau Éléments. Cliquez sur le badge pour activer ou désactiver l'affichage d'une superposition de scroll-snap sur la page.

Dans l'exemple ci-dessus, vous pouvez voir des points sur les bords d'accrochage. Le port de défilement est entouré d'un trait continu, tandis que les éléments d'accrochage sont entourés d'un trait en pointillés. La marge intérieure de défilement est remplie en vert, tandis que la marge extérieure de défilement est remplie en orange.

Problème Chromium : 862450

Nouvel outil d'inspection de mémoire

Utilisez le nouvel inspecteur de mémoire pour inspecter un ArrayBuffer en JavaScript, ainsi que la mémoire Wasm.

Ouvrez cette page de démonstration. Dans le panneau Sources, ouvrez le fichier demo-js.js et définissez un point d'arrêt à la ligne 18.

Actualisez la page. Développez la section Portée dans le volet Débogueur de droite. Notez la nouvelle icône à côté de la valeur buffer. Cliquez dessus pour afficher l'inspecteur de mémoire.

Consultez la documentation pour en savoir plus sur l'inspection de JavaScript ArrayBuffer et WebAssembly.Memory avec ce nouvel outil d'inspection de la mémoire.

Outil d'inspection de mémoire

Problème Chromium : 1166577

Nouveau volet de paramètres des badges dans le panneau "Éléments"

Vous pouvez désormais activer ou désactiver sélectivement les badges dans les paramètres des badges du panneau Éléments. Utilisez cette fonctionnalité pour personnaliser les badges importants et vous concentrer dessus lorsque vous inspectez des pages Web.

Volet des paramètres des badges dans le panneau "Éléments"

Dans le panneau Éléments, effectuez un clic droit sur un élément. Sélectionnez Paramètres des badges dans le menu contextuel. Le panneau des paramètres des badges s'affiche en haut de l'écran. Cochez ou décochez les cases pour afficher ou masquer les badges.

Problème Chromium : 1066772

Aperçu amélioré des images avec des informations sur le format

Les aperçus d'images dans le panneau Éléments affichent désormais plus d'informations sur l'image : taille affichée, format affiché, taille intrinsèque, format intrinsèque et taille du fichier.

Ces informations vous aident à mieux comprendre vos images et à les optimiser si nécessaire.

Aperçu de l'image avec des informations sur le format

Les informations sur le format de l'image sont également disponibles dans le panneau Réseau lorsque vous cliquez pour prévisualiser l'image.

Informations sur le format de l'image dans le panneau "Réseau"

Problèmes Chromium : 1149832, 1170656

Nouveau bouton "Conditions réseau" avec des options permettant de configurer les Content-Encoding

Un nouveau bouton "Conditions du réseau" a été ajouté au panneau Réseau. Cliquez dessus pour ouvrir l'onglet Conditions du réseau.

Une nouvelle option Accepted Content-Encodings est ajoutée à l'onglet Conditions du réseau. Configurez-le pour tester si les réponses du serveur sont correctement encodées dans les navigateurs qui ne sont pas compatibles avec gzip, brotli ou d'autres Content-Encoding à venir.

Nouveau bouton "Conditions réseau" avec des options permettant de configurer Content-Encoding

Problème Chromium : 1162042

Améliorations apportées au volet "Styles"

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

Vous pouvez désormais effectuer un clic droit sur une propriété CSS dans le volet Styles et sélectionner Afficher la valeur calculée pour afficher la valeur CSS calculée.

Nouveau raccourci pour afficher la valeur calculée

Problème Chromium : 1076198

Compatibilité avec le mot clé accent-color

L'UI d'autocomplétion du volet "Styles" détecte désormais le mot clé CSS accent-color, qui permet aux développeurs Web de spécifier la couleur d'accentuation des commandes d'UI (par exemple, case à cocher, bouton radio) générées par l'élément.

La propriété CSS accent-color est actuellement expérimentale. Veuillez activer chrome://flags/#enable-experimental-web-platform-features pour le tester.

accent-color

Problème Chromium : 1092093

Catégoriser les types de problèmes avec des couleurs et des icônes

L'onglet Problèmes classe désormais les problèmes en erreurs de page, modifications destructives à venir et améliorations possibles pour mieux indiquer leur gravité. Pour ouvrir l'onglet Problèmes, cliquez sur le bouton Nombre de problèmes dans la console.

  • Erreurs de page (rouge) : Problèmes ayant un impact immédiat sur le fonctionnement de la page, comme la non-définition d'en-têtes CORS corrects, etc.
  • Modifications destructives à venir (en jaune) Problèmes informant d'une modification incompatible à venir de la plate-forme Web, qui peut entraîner une perte de fonctionnalité de la page (par exemple, avertissement concernant les modifications CORS RFC 1918 à venir).
  • Améliorations possibles (en bleu) : Améliorations potentielles de la page, mais qui n'entravent pas actuellement les fonctionnalités de base de la page (par exemple, problèmes d'accessibilité)

Catégoriser les types de problèmes avec des couleurs et des icônes

Problème Chromium : 1183241

Supprimer les jetons de confiance

Vous pouvez désormais supprimer des jetons de confiance à l'aide du nouveau bouton de suppression dans le volet Jetons de confiance, sous le volet Application.

Trust Token est une nouvelle API qui permet de lutter contre la fraude et de distinguer les robots des humains, sans suivi passif. Découvrez comment faire vos premiers pas avec les jetons de confiance.

Supprimer les jetons de confiance

Problème Chromium : 1126824

Afficher les détails sur les fonctionnalités bloquées dans la vue "Détails du frame"

Vous pouvez désormais afficher des informations sur les fonctionnalités bloquées dans la section Règles d'autorisation de la vue détaillée du frame.

Ouvrez cette page de démonstration. Accédez au panneau Application et sélectionnez un frame. Dans la section Règles relatives aux autorisations, faites défiler la page jusqu'à la propriété Fonctionnalités désactivées. Cliquez sur Afficher les détails pour savoir pourquoi la fonctionnalité est bloquée. Cliquez sur l'icône à côté de chaque règle pour accéder à l'iframe ou à la requête réseau qui a bloqué la fonctionnalité.

La politique d'autorisations est une API de plate-forme Web qui permet à un site Web d'autoriser ou de bloquer l'utilisation des fonctionnalités du navigateur dans sa propre frame ou dans les iFrames qu'il intègre.

Fonctionnalités bloquées dans la vue "Détails du frame"

Problème Chromium : 1158827

Filtrer les tests dans le paramètre "Tests"

Retrouvez plus rapidement les tests grâce au nouveau filtre. Par exemple, accédez à Paramètres > Tests, puis saisissez "contraste" dans la zone de texte Filtrer pour filtrer tous les tests contenant le mot "contraste".

Filtrer les tests dans le paramètre "Tests"

Nouvelle colonne Vary Header dans le volet "Stockage du cache"

Utilisez la nouvelle colonne Vary Header dans le volet Cache Storage pour afficher l'en-tête de réponse HTTP Vary.

Colonne "En-tête Vary"

Problème Chromium : 1186049

Améliorations apportées au panneau "Sources"

Compatibilité avec de nouvelles fonctionnalités JavaScript

Les outils de développement sont désormais compatibles avec la nouvelle fonctionnalité de langage JavaScript vérification de la marque privée, également appelée #foo in obj.

Cette fonctionnalité de vérification des marques privées étend l'opérateur in pour prendre en charge le test des champs de classe privée sur n'importe quel objet.

Essayez-le dans les panneaux Console et Sources. Vous pouvez également inspecter les champs privés dans la section Scope (Étendue) du volet debugger (Débogueur).

Vérifications de marques privées JavaScript

Problème Chromium : 11374

Amélioration de la compatibilité avec le débogage des points d'arrêt

Les outils de développement définissent désormais correctement les points d'arrêt dans plusieurs scripts. Les bundlers JavaScript modernes (par exemple, Webpack, Rollup) sont compatibles avec la fonctionnalité de fractionnement du code. Il existe des scénarios dans lesquels un composant partagé peut être inclus dans plusieurs routes (fractionnement du code).

Auparavant, les outils de développement ne pouvaient définir des points d'arrêt que sur un seul emplacement brut. Grâce à cette dernière amélioration, les outils de développement peuvent définir correctement des points d'arrêt dans tous les emplacements concernés.

Problèmes Chromium : 1142705, 979000, 1180794

Prise en charge de l'aperçu au survol avec la notation []

Les outils de développement sont désormais compatibles avec l'aperçu au survol des expressions de membre JavaScript qui utilisent la notation [] dans le panneau Sources.

Prise en charge de l'aperçu au survol avec la notation "[]"

Problème Chromium : 1178305

Amélioration du plan des fichiers HTML

Les outils de développement offrent désormais une meilleure prise en charge des plans pour les fichiers HTML. Dans le panneau Sources, ouvrez un fichier HTML. Vous pouvez activer ou désactiver le plan du code à l'aide du raccourci clavier Cmd+Maj+O sur Mac ou Ctrl+Maj+O sur Windows.

Dans l'exemple ci-dessous, les outils de développement listent désormais correctement toutes les fonctions dans le plan. Auparavant, les outils de développement n'affichaient que certaines fonctions.

Amélioration du plan des fichiers HTML

Problèmes Chromium : 761019, 1191465

Traces de pile d'erreur appropriées pour le débogage Wasm

Les outils de développement résolvent désormais les appels de fonction intégrés et affichent des traces de pile d'erreur appropriées pour le débogage Wasm.

Auparavant, les outils de développement n'affichaient que des références Wasm génériques dans les traces de pile d'erreur.

Traces de pile d'erreur appropriées pour le débogage Wasm

L'ancienne version de Chrome à gauche n'affiche pas l'emplacement de la source (par exemple, dsquare) dans les traces de la pile d'erreurs, contrairement à la nouvelle version à droite.

Problème Chromium : 1189161

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.