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

Jecelyn Yeen

Nouveaux outils de débogage des champs flexibles CSS

Les outils de développement disposent désormais d'outils de débogage CSS flexbox dédiés.

Outils de débogage des champs flexibles CSS

Lorsque display: flex ou display: inline-flex est appliqué à un élément HTML de votre page, un badge flex s'affiche à côté de celui-ci dans le panneau "Éléments". Cliquez sur le badge pour activer/désactiver l'affichage d'une superposition flex sur la page.

Dans le volet Styles, vous pouvez cliquer sur la nouvelle icône à côté de display: flex ou display: inline-flex pour ouvrir l'éditeur Flexbox. L'éditeur Flexbox permet de modifier rapidement les propriétés Flexbox. Essayez par vous-même !

De plus, le volet Mise en page comporte une section Flexbox qui affiche tous les éléments Flexbox de la page. Vous pouvez activer ou désactiver la superposition de chaque élément.

Section "Flexbox" du volet "Mise en page"

Problèmes Chromium: 1166710, 1175699

Nouvelle superposition Core Web Vitals

Visualisez et mesurez mieux les performances de vos pages grâce à la nouvelle superposition Core Web Vitals.

Core Web Vitals est une initiative de Google visant à fournir des conseils unifiés concernant des signaux de qualité, essentiels pour proposer une expérience utilisateur optimale sur le Web.

Ouvrez le menu Command (Commande), exécutez la commande Show Rendering (Afficher le rendu), puis cochez la case Core Web Vitals (Core Web Vitals).

La superposition affiche actuellement:

  • LCP (Largest Contentful Paint): mesure les performances de chargement. Pour offrir une bonne expérience utilisateur, le LCP doit se produire dans les 2,5 secondes à compter du début du chargement de la page.
  • First Input Delay (FID): mesure l'interactivité. Pour offrir une expérience utilisateur de qualité, le FID des pages doit être inférieur à 100 millisecondes.
  • Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une expérience utilisateur de qualité, les pages doivent maintenir un CLS inférieur à 0,1.

Superposition Core Web Vitals

Problème Chromium: 1152089

Mise à jour des onglets des problèmes

Déplacement du nombre de problèmes dans la barre d'état de la console

Un nouveau bouton de nombre de problèmes a été ajouté dans la barre d'état de la console pour améliorer la visibilité des avertissements liés aux problèmes. Le message d'erreur sera remplacé dans la console.

Nombre de problèmes dans la barre d'état de la console

Problème Chromium: 1140516

Signaler des problèmes liés à l'activité Web fiable

L'onglet Problèmes indique désormais les problèmes liés aux activités Web fiables. L'objectif est d'aider les développeurs à comprendre et à résoudre les problèmes liés à l'activité Web sécurisée de leurs sites, ce qui améliore la qualité de leurs applications.

Ouvrez une activité Web fiable. Ouvrez ensuite les onglets Problèmes en cliquant sur le bouton Nombre de problèmes dans la barre d'état de la console pour afficher les problèmes. Regardez cette conférence d'Andre pour découvrir comment créer et déployer des activités Web fiables.

Problèmes liés à l'activité Web fiable dans l'onglet "Problèmes"

Problème Chromium: 1147479

Mettre en forme les chaînes en tant que littéraux de chaîne JavaScript (valides) dans la console

Désormais, la console formate les chaînes en tant que littéraux de chaîne JavaScript valides. Auparavant, la console n'échappait pas les doubles guillemets lors de l'impression de chaînes.

Mettre en forme des chaînes en tant que littéraux de chaîne JavaScript (valides)

Problème Chromium: 1178530

Nouveau panneau "Trust Tokens" (Jetons de confiance) dans le panneau "Application"

DevTools affiche désormais tous les jetons de confiance disponibles dans le contexte de navigation actuel dans le nouveau 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.

Volet "New Trust Tokens" (Nouveaux jetons de confiance)

Problème Chromium: 1126824

Émuler la caractéristique média CSS "color-gamut"

Émuler la caractéristique média CSS "color-gamut"

La requête multimédia color-gamut vous permet de tester la plage approximative de couleurs compatibles avec le navigateur et l'appareil de sortie. Par exemple, si la requête multimédia color-gamut: p3 correspond, cela signifie que l'appareil de l'utilisateur est compatible avec l'espace colorimétrique Display-P3.

Ouvrez le menu Command (Commande), exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate CSS media feature color-gamut (Émuler la caractéristique média CSS "color-gamut").

Problème Chromium: 1073887

Amélioration des outils pour les Progressive Web Apps

Les outils de développement affichent désormais un message d'avertissement plus détaillé sur l'installabilité des progressive web apps (PWA) dans la console, avec un lien vers la documentation.

Avertissement concernant l'installabilité des PWA

Le volet Fichier manifeste affiche désormais un message d'avertissement si la description du fichier manifeste dépasse 324 caractères.

Avertissement de troncation de la description de la PWA

En outre, le volet Fichier manifeste affiche désormais un message d'avertissement si la capture d'écran de la PWA ne correspond pas aux exigences. Pour en savoir plus sur la propriété screenshots des applications Web progressives et ses exigences, consultez cette page.

Avertissement concernant les captures d'écran de PWA

Problème Chromium: 1146450, 1169689, 965802

Nouvelle colonne Remote Address Space dans le panneau "Network"

Utilisez la nouvelle colonne Remote Address Space du panneau "Network" (Réseau) pour afficher l'espace d'adresses IP du réseau de chaque ressource réseau.

Nouvelle colonne "Espace d'adressage à distance"

Problème Chromium: 1128885

Amélioration des performances

Les performances de chargement des pages lorsque les outils pour les développeurs sont ouverts sont désormais améliorées. Dans certains cas extrêmes, nous avons constaté une amélioration de 10 fois des performances.

DevTools collecte les traces de pile et les associe aux messages de console ou aux tâches asynchrones pour que le développeur puisse les utiliser ultérieurement en cas de problème. Étant donné que cette collecte doit se produire de manière synchrone dans le moteur de navigateur, une collecte lente de la trace de la pile peut ralentir considérablement la page lorsque les outils de développement sont ouverts. Nous avons réussi à réduire considérablement les frais généraux de la collecte de la trace de la pile.

Nous vous communiquerons prochainement un article de blog plus détaillé sur l'implémentation.

Problèmes Chromium: 1069425, 1077657

Afficher les fonctionnalités autorisées/non autorisées dans la vue "Détails du frame"

La vue "Détails du frame" affiche désormais une liste des fonctionnalités du navigateur autorisées et non autorisées, contrôlées par la règle d'autorisation.

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 autorisées/non autorisées en fonction de la règle d'autorisation

Problème Chromium: 1158827

Nouvelle colonne SameParty dans le volet "Cookies"

Le volet "Cookies" du panneau "Application" affiche désormais l'attribut SameParty des cookies. L'attribut SameParty est un nouvel attribut booléen qui indique si un cookie doit être inclus dans les requêtes aux origines des mêmes ensembles propriétaires.

Colonne "SameParty"

Problème Chromium: 1161427

Prise en charge obsolète de fn.displayName non standard

La prise en charge de la fn.displayName non standard est obsolète. Utilisez fn.name à la place.

Exemple d'utilisation de displayName

Chrome a traditionnellement accepté la propriété fn.displayName non standard pour permettre aux développeurs de contrôler les noms de débogage des fonctions qui s'affichent dans error.stack et dans les traces de pile DevTools. Dans l'exemple ci-dessus, la pile d'appel affichait auparavant noLongerSupport.

Remplacez fn.displayName par fn.name standard, qui a été rendu configurable (via Object.defineProperty) dans ECMAScript 2015 pour remplacer la propriété fn.displayName non standard.

La prise en charge de fn.displayName n'a pas été fiable et n'a pas été cohérente entre les moteurs de navigateur. Cela ralentit la collecte de la trace de la pile, un coût que les développeurs paient toujours, qu'ils utilisent réellement fn.displayName ou non.

Exemple d'utilisation du nom

Problème Chromium: 1177685

Abandon de Don't show Chrome Data Saver warning dans le menu "Paramètres"

Le paramètre Don't show Chrome Data Saver warning est supprimé, car l'économiseur de données Chrome est obsolète.

Paramètres obsolètes "Ne pas afficher l'avertissement de l'Économiseur de données Chrome"

Problème Chromium: 1056922

Fonctionnalités expérimentales

Signalement automatique des problèmes de faible contraste dans l'onglet "Problèmes"

DevTools a ajouté une fonctionnalité expérimentale permettant de signaler automatiquement les problèmes de contraste dans l'onglet "Problèmes".

Le texte à faible contraste est le problème d'accessibilité le plus courant détectable automatiquement sur le Web. L'affichage de ces problèmes dans l'onglet "Problèmes" permet aux développeurs de les identifier plus facilement.

Ouvrez une page présentant des problèmes de faible contraste (par exemple, cette démonstration). Ouvrez ensuite les onglets Problèmes en cliquant sur le bouton Nombre de problèmes dans la barre d'état de la console pour afficher les problèmes.

Signalement automatique des problèmes de faible contraste

Problème Chromium: 1155460

Vue complète de l'arborescence d'accessibilité dans le panneau "Éléments"

Vous pouvez désormais activer la nouvelle arborescence d'accessibilité complète améliorée d'une page.

Le volet d'accessibilité actuel affiche ses nœuds de manière limitée, en n'affichant que la chaîne d'ancêtres directs du nœud racine au nœud inspecté. La nouvelle vue de l'arborescence d'accessibilité vise à améliorer ce point et rend l'arborescence d'accessibilité plus explorable, utile et facile à utiliser pour les développeurs.

Une fois le test activé, un nouveau bouton s'affiche dans le panneau Éléments. Cliquez dessus pour basculer entre l'arborescence DOM existante et l'arborescence d'accessibilité complète.

Veuillez noter qu'il s'agit d'une fonctionnalité expérimentale en phase de développement. Nous prévoyons de l'améliorer et de l'étendre au fil du temps.

Arborescence d'accessibilité complète

Problème Chromium: 887173

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.