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

Les informations sur les signaux Web s'affichent dans le panneau "Performances"

Pointez sur un repère Web Vitals dans le panneau Performances pour comprendre de quoi il s'agit, à savoir s'il s'agit de bonnes performances, d'améliorations requises ou de mauvaises performances.

Problème Chromium: 1147872

Visualiser l'élément de défilement CSS

Vous pouvez désormais activer/désactiver le badge scroll-snap dans le panneau Elements (Éléments) pour inspecter l'alignement de l'ancrage CSS.

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

Dans l'exemple ci-dessus, vous pouvez voir des points sur les bords des ancrages. Le port de défilement a un contour plein, tandis que les éléments d'ancrage ont des contours en pointillés. La marge intérieure de défilement est remplie en vert, tandis que la marge 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 Champ d'application dans le volet Débogueur de droite. Notez la nouvelle icône à côté de la valeur du tampon. Cliquez dessus pour afficher Memory Inspector (Outil d'inspection de mémoire).

Consultez la documentation pour savoir comment inspecter JavaScript ArrayBuffer et WebAssembly.Memory avec ce nouvel outil d'inspection de mémoire.

Problème Chromium: 1166577

Volet des paramètres du nouveau badge dans le panneau "Éléments"

Vous pouvez désormais activer ou désactiver de façon sélective les badges via les paramètres du badge du panneau Éléments. Utilisez cette fonctionnalité pour personnaliser et rester concentré sur les badges importants lors de l'inspection des pages Web.

Dans le panneau Éléments, effectuez un clic droit sur n'importe quel élément. Sélectionnez Paramètres du badge dans le menu contextuel. Le volet des paramètres du badge s'affiche en haut. Activez ou désactivez les cases à cocher pour afficher ou masquer les badges.

Problème Chromium: 1066772

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

Les aperçus d'image dans le 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 du fichier.

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

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

Problèmes Chromium: 1149832, 1170656

Bouton "Nouvelles conditions du réseau" avec des options pour configurer les Content-Encoding

Un bouton pour les conditions du réseau est ajouté au panneau Network (Réseau). Cliquez dessus pour ouvrir l'onglet Conditions du réseau.

Une nouvelle option Accept Content-Encodings (Encodages de contenu acceptés) est ajoutée à l'onglet Network conditions (Conditions du réseau). Configurez-le pour vérifier 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 futurs.

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

Problème Chromium: 1076198

Compatibilité avec le mot clé accent-color

L'interface utilisateur 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 (case à cocher ou case d'option, par exemple) 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.

Problème Chromium: 1092093

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

L'onglet Problèmes classe désormais les problèmes en différentes catégories : erreurs sur la page, modifications destructives à venir et améliorations possibles pour mieux indiquer le niveau de gravité. Vous pouvez ouvrir l'onglet Issues (Problèmes) en cliquant sur le bouton Issue count (Nombre de problèmes) dans la Console.

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

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 situé dans le volet Jetons de confiance, sous le panneau Application.

Le jeton de confiance 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.

Problème Chromium: 1126824

Afficher les détails sur les fonctionnalités bloquées dans la vue "Détails de l'image"

Vous pouvez désormais afficher les détails des fonctionnalités bloquées dans la section Règle sur les autorisations de la vue "Détails de l'image".

Ouvrez cette demo. Accédez au panneau Application et sélectionnez un cadre. Dans la section Règles d'autorisation, 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é.

Une règle d'autorisation est une API de plate-forme Web qui permet à un site Web d'autoriser ou de bloquer l'utilisation de fonctionnalités du navigateur dans son propre cadre ou dans les cadres iFrame qu'il intègre.

Problème Chromium: 1158827

Filtrer les tests dans le paramètre "Tests"

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

Nouvelle colonne Vary Header dans le volet de stockage du cache

Utilisez la nouvelle colonne Vary Header dans le volet Stockage en cache pour afficher l'en-tête de réponse HTTP 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é JavaScript de vérification de la marque privée (également appelée #foo in obj).

Cette fonctionnalité de vérification privée de la marque étend l'opérateur "in" afin d'accepter les tests 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 Champ d'application du volet Débogueur.

Problème Chromium: 11374

Meilleure 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 bundles JavaScript modernes (par exemple, Webpack ou Rollup) sont compatibles avec la fonctionnalité de fractionnement du code. Dans certains cas, un composant partagé peut être inclus dans plusieurs routes (divisions de 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 pertinents.

Problèmes Chromium: 1142705, 979000, 1180794

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

Les outils de développement permettent désormais de prévisualiser les expressions de membre JavaScript qui utilisent la notation [] dans le panneau Sources.

Problème Chromium: 1178305

Amélioration de la présentation des fichiers HTML

Les outils de développement prennent désormais mieux en charge les fichiers HTML. Dans le panneau Sources, ouvrez un fichier HTML. Vous pouvez modifier le contour du code avec le clavier Cmd+Maj+O sous Mac ou Ctrl+Maj+O sous Windows.

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

Problème Chromium: 761019, 1191465

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

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

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

L'emplacement source (par exemple, dsquare) n'apparaît pas dans les traces de la pile "Error" dans l'ancienne version de Chrome, contrairement à la nouvelle version à droite.

Problème Chromium: 1189161

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

• Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement