Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Fenêtres Web Vitals affichées dans le panneau "Performances"

Pointez sur un repère de signaux Web dans le panneau Performances pour comprendre de quoi il s'agit : si les performances sont bonnes, doivent être améliorées ou médiocres.

Fenêtre pop-up d'informations sur les signaux Web

Problème Chromium: 1147872

Visualiser l'élément CSS Scroll-Snap

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

Défilement CSS

Lorsqu'un élément HTML de votre page (comme cette page de démonstration) utilise scroll-snap-type, 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 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 encadré par un contour plein, tandis que les éléments d'ancrage ont un contour en pointillés. La marge intérieure du défilement est verte, tandis que la marge de défilement est 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, 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 mémoire.

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

Outil d'inspection de mémoire

Problème Chromium: 1166577

Nouveau volet des paramètres du badge dans le panneau "Elements"

Vous pouvez désormais activer ou désactiver les badges de manière sélective dans les Paramètres du badge du panneau Éléments. Utilisez cette fonctionnalité pour personnaliser et rester concentré sur les badges importants pendant que vous inspectez 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 amélioré de l'image 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, y compris la taille de rendu, le format de rendu, la taille intrinsèque, le format intrinsèque et la taille du fichier.

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

Aperçu de l'image avec 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 d'image dans le panneau "Network" (Réseau)

Problèmes Chromium: 1149832, 1170656

Bouton "Nouvelles conditions du réseau" avec des options de configuration des `Content-Encoding`

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

Une nouvelle option Accepted Content-Encodings (Encodages de contenu acceptés) est ajoutée à l'onglet Network conditions (Conditions du réseau). Configurez-la pour vérifier si les réponses du serveur sont encodées correctement dans les navigateurs non compatibles avec gzip, brotli ou d'autres Content-Encoding à venir.

Nouveau bouton "Conditions du réseau" avec des options pour configurer l'encodage de contenu

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

Prise en charge du mot clé `accent-color`.

L'interface utilisateur avec 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, une case à cocher ou une case d'option) 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 la tester.

couleur-accentuée

Problème Chromium: 1092093

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

L'onglet Problèmes classe désormais les problèmes par erreurs de page, modifications destructives à venir et améliorations possibles pour améliorer l'indicateur 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 de page (rouge). Problèmes ayant un impact immédiat sur le fonctionnement de la page, tels que la mauvaise définition des en-têtes CORS appropriés, etc.
Modifications destructives à venir (jaune). Problèmes signalant une modification incompatible à venir de la plate-forme Web susceptible d'entraîner une perte de fonctionnalité sur la page (par exemple, avertissement concernant des modifications à venir liées à la RFC 1918).
Améliorations possibles (bleu). Améliorations potentielles de la page, mais qui n'entravent pas pour le moment ses fonctionnalités de base (problèmes d'accessibilité, par exemple)

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 "Supprimer" du volet Jetons de confiance, sous le panneau Application.

Trust Token est une nouvelle API qui contribue à lutter contre la fraude et à distinguer les robots des vrais 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 les détails des fonctionnalités bloquées dans la section Règles relatives aux autorisations de la vue Détails de l'image.

Ouvrez cette page de démonstration. Accédez au panneau Application et sélectionnez un cadre. 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 connaître les raisons pour lesquelles 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é.

Les règles d'autorisation sont 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étaillée du cadre

Problème Chromium: 1158827

Filtrer les tests dans le paramètre "Tests"

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

Filtrer les tests dans le paramètre "Tests"

Nouvelle colonne `Vary Header` dans le volet de stockage du cache

Utilisez la nouvelle colonne Vary Header du volet Cache Storage (Stockage du cache) pour afficher l'en-tête de réponse HTTP Vary.

Varier la colonne d'en-tête

Problème Chromium: 1186049

Améliorations apportées au panneau "Sources"

Prise en charge des 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, appelée #foo in obj.

Cette fonctionnalité de vérifications privées de la marque étend l'utilisation de l'opérateur in afin d'accepter les tests de champs de classe privés sur n'importe quel objet donné.

Essayez-le dans le panneau Console et Sources. Vous pouvez également inspecter les champs privés dans la section Scope (Champ d'application) sous le volet Debugger (Débogueur).

Problème Chromium: 11374

Amélioration de la prise en charge du débogage des points d'arrêt

Désormais, les outils de développement définissent correctement les points d'arrêt dans plusieurs scripts. Les bundles JavaScript modernes (par exemple, Webpack et Rollup) sont compatibles avec la fonctionnalité de division 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 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 liés à Chromium: 1142705, 979000, 1180794

Prise en charge de l'aperçu lorsque l'utilisateur passe la souris dessus avec la notation `[]`.

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

Autoriser l'aperçu de survol avec la notation "[]"

Problème Chromium: 1178305

Amélioration du contour des fichiers HTML

Les outils de développement sont désormais compatibles avec davantage de contours pour les fichiers HTML. Dans le panneau Sources, ouvrez un fichier HTML. Vous pouvez activer ou désactiver 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 répertorient désormais correctement toutes les fonctions du plan. Auparavant, les outils de développement n'affichaient que certaines fonctions.

Amélioration du contour des fichiers HTML

Problème Chromium: 761019, 1191465

Traces de pile d'erreurs 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 les traces de pile d'erreurs appropriées 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'erreurs.

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

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

Problème Chromium: 1189161

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.