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

Jecelyn Yeen

Les informations Web Vitals s'affichent dans le panneau "Performances".

Pointez sur un repère Web Vitals dans le panneau Performances pour comprendre ce que signifie l'indicateur : les performances sont-elles bonnes, doivent-elles être améliorées ou sont-elles médiocres ?

Fenêtre pop-up d'informations sur Web Vitals

Problème Chromium: 1147872

Visualiser le scroll-snap CSS

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

CSS scroll-snap

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

Dans l'exemple ci-dessus, vous pouvez voir des points sur les bords d'ancrage. Le port de défilement est entouré d'un trait plein, tandis que les éléments de recadrage 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 outil d'inspection de la mémoire pour inspecter une 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, puis définissez un point d'arrêt à la ligne 18.

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

Consultez la documentation pour en savoir plus sur l'inspection des ArrayBuffer et WebAssembly.Memory JavaScript 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 via les paramètres des badges dans le panneau Éléments. Utilisez cette fonctionnalité pour personnaliser et rester concentré sur les badges importants lorsque vous inspectez des pages Web.

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

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

Problème Chromium: 1066772

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

Les aperçus d'images du panneau Éléments affichent désormais plus d'informations sur l'image : taille de rendu, format de rendu, taille intrinsèque, format intrinsèque et taille de 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 "Network" (Réseau)

Problèmes Chromium: 1149832, 1170656

Bouton "Nouvelles conditions réseau" avec des options permettant de configurer des Content-Encoding

Un nouveau bouton "Conditions réseau" est ajouté dans le panneau Réseau. Cliquez dessus pour ouvrir l'onglet Conditions du réseau.

Une nouvelle option Encodage de contenu accepté est ajoutée à l'onglet Conditions 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.

Bouton "Nouvelles 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 cliquer avec le bouton droit sur une propriété CSS dans le volet Styles, puis 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 de saisie semi-automatique du volet "Styles" détecte désormais le mot clé CSS accent-color, ce qui permet aux développeurs Web de spécifier la couleur d'accentuation des commandes d'interface utilisateur (par exemple, case à cocher, bouton radio) générées par l'élément.

La propriété CSS accent-color est actuellement en phase 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 à l'aide de couleurs et d'icônes

L'onglet Problèmes permet désormais de classer les problèmes en erreurs sur les pages, modifications destructives à venir et améliorations possibles afin d'indiquer plus précisément 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, par exemple si les en-têtes CORS ne sont pas correctement définis, etc.
  • Modifications destructives à venir (jaune) Problèmes qui signalent un changement incompatible à venir de la plate-forme Web pouvant entraîner une perte de fonctionnalité de la page (par exemple, avertissement concernant les modifications de la RFC 1918 sur le CORS à venir).
  • Améliorations possibles (bleu) Améliorations potentielles sur la page, mais qui n'affectent pas actuellement les fonctionnalités de base de la page (par exemple, problèmes d'accessibilité)

Catégoriser les types de problèmes à l'aide de couleurs et d'icônes

Problème Chromium: 1183241

Supprimer les jetons de confiance

Vous pouvez désormais supprimer les jetons de confiance à l'aide du nouveau bouton de suppression dans le volet Jetons de confiance, sous le panneau 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 Trust Tokens.

Supprimer les jetons de confiance

Problème Chromium: 1126824

Afficher les détails sur les éléments bloqués dans la vue "Détails du frame"

Vous pouvez désormais consulter les détails des fonctionnalités bloquées dans la section Règles d'autorisation de la vue d'informations sur le frame.

Ouvrez cette page de démonstration. Accédez au panneau Application, puis sélectionnez un frame. Dans la section Permissions Policy (Règles d'autorisation), faites défiler la page jusqu'à la propriété Disabled Features (Fonctionnalités désactivées). Cliquez sur Afficher les détails pour connaître le motif du blocage de la fonctionnalité. 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 règle d'autorisation 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 son propre frame ou dans les iFrames qu'il intègre.

Fonctionnalités bloquées dans la vue d'informations du frame

Problème Chromium: 1158827

Filtrer les tests dans le paramètre "Tests"

Trouvez plus rapidement des tests grâce au nouveau filtre de test. Par exemple, accédez à Settings > Experiments (Paramètres > Tests), puis dans la zone de texte Filter (Filtrer), saisissez "contrast" (contraste) 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 (Stockage en cache) 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 les 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 de la marque privée étend l'opérateur in pour prendre en charge les tests des champs de classe privée sur n'importe quel objet donné.

Essayez-la dans la console et le panneau Sources. Vous pouvez également inspecter les champs privés dans la section Champ d'application du volet Débogueur.

Vérifications de la marque privée JavaScript

Problème Chromium: 11374

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

DevTools définit désormais correctement les points d'arrêt dans plusieurs scripts. Les bundlers JavaScript modernes (par exemple, Webpack, Rollup) prennent en charge la fonctionnalité de fractionnement du code. Dans certains cas, un composant partagé peut être inclus dans plusieurs routes (fractionnement du code).

Auparavant, DevTools ne pouvait définir des points d'arrêt que sur un seul emplacement brut. Grâce à cette dernière amélioration, DevTools peut définir correctement des points d'arrêt dans tous les emplacements pertinents.

Problèmes Chromium: 1142705, 979000 et 1180794

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

DevTools prend désormais en charge l'aperçu en survol des expressions de membres JavaScript qui utilisent la notation [] dans le panneau Sources.

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

Problème Chromium: 1178305

Amélioration de la structure des fichiers HTML

Les outils de développement offrent désormais une meilleure compatibilité avec les fichiers HTML. Dans le panneau Sources, ouvrez un fichier HTML. Vous pouvez activer ou désactiver le contour du code à l'aide des touches Cmd+Maj+O sur Mac ou Ctrl+Maj+O sous Windows.

Dans l'exemple ci-dessous, DevTools liste désormais correctement toutes les fonctions dans la structure. Auparavant, DevTools n'affichait que certaines des fonctions.

Amélioration de la structure des fichiers HTML

Problème Chromium: 761019, 1191465

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

DevTools résout désormais les appels de fonction intégrés et affiche les 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 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 Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

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 éléments abordés dans la série Nouveautés des outils pour les développeurs.