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

Nouveaux outils de débogage CSS flexbox

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

Lorsqu'un élément HTML de votre page est associé à display: flex ou display: inline-flex, un badge flex s'affiche à côté dans le panneau "Éléments". Cliquez sur le badge pour activer ou 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.

Problèmes Chromium : 1166710, 1175699

Nouvelle superposition Core Web Vitals

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

Les Core Web Vitals sont 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 (Signaux Web essentiels).

La superposition affiche actuellement les informations suivantes :

• Largest Contentful Paint (LCP) : mesure les performances de chargement. Pour offrir une expérience utilisateur de qualité, le LCP doit se produire dans les 2,5 premières secondes du chargement de la page.
• First Input Delay (FID) : mesure l'interactivité. Pour offrir une expérience utilisateur de qualité, les pages doivent avoir un FID 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 score CLS inférieur à 0,1.

Problème Chromium : 1152089

Modifications apportées à l'onglet "Problèmes"

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

Un nouveau bouton de décompte des problèmes a été ajouté à la barre d'état de la console pour améliorer la visibilité des avertissements de problèmes. Le message du problème dans la console sera remplacé.

Problème Chromium : 1140516

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

L'onglet "Problèmes" signale 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 aux activités Web de confiance de leurs sites, afin d'améliorer la qualité de leurs applications.

Ouvrez une activité Web fiable. Ensuite, ouvrez les onglets Problèmes en cliquant sur le bouton Nombre de problèmes dans la barre d'état Console pour afficher les problèmes. Regardez cette conférence d'Andre pour en savoir plus sur la création et le déploiement d'une activité Web fiable.

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 met en forme les chaînes en tant que littéraux de chaîne JavaScript valides dans la console. Auparavant, la console n'échappait pas les guillemets doubles lors de l'impression de chaînes.

Problème Chromium : 1178530

Nouveau volet "Trust Tokens" dans le panneau "Application"

Les outils de développement affichent désormais tous les jetons de confiance disponibles dans le contexte de navigation actuel dans le nouveau 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 Trust Tokens.

Problème Chromium : 1126824

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

La requête média color-gamut vous permet de tester la plage approximative de couleurs compatibles avec le navigateur et le périphérique de sortie. Par exemple, si la requête mé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é concernant l'installabilité des progressive web apps (PWA) dans la console, avec un lien vers la documentation.

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

De plus, le volet Manifest (Manifeste) affiche désormais un message d'avertissement si la capture d'écran de la PWA ne répond pas aux exigences. En savoir plus sur la propriété screenshots des PWA et sur ses exigences

Problèmes Chromium : 1146450, 1169689, 965802

Nouvelle colonne Remote Address Space dans le panneau "Réseau"

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

Problème Chromium : 1128885

Amélioration des performances

Les performances de chargement des pages lorsque les outils de développement sont ouverts ont été améliorées. Dans certains cas extrêmes, nous avons constaté des améliorations des performances multipliées par 10.

Les outils de développement collectent des traces de pile et les associent à des messages de console ou à des tâches asynchrones pour que le développeur puisse les consulter ultérieurement en cas de problème. Étant donné que cette collecte doit se faire de manière synchrone dans le moteur du navigateur, une collecte lente des traces de pile peut ralentir considérablement la page lorsque les outils de développement sont ouverts. Nous avons réussi à réduire considérablement la surcharge liée à la collecte des traces de pile.

Nous publierons bientôt 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étaillée du frame affiche désormais la liste des fonctionnalités du navigateur autorisées et interdites, contrôlées par la règle d'autorisation.

L'API Permissions Policy 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.

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 envoyées aux origines des mêmes ensembles de sites propriétaires.

Problème Chromium : 1161427

Compatibilité obsolète avec fn.displayName non standard

La prise en charge de l'attribut non standard fn.displayName a été abandonnée. Utilisez fn.name à la place.

Chrome a toujours accepté la propriété non standard fn.displayName 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 des outils pour les développeurs. Dans l'exemple ci-dessus, la pile d'appel affichait auparavant noLongerSupport.

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

La compatibilité avec fn.displayName n'a pas été fiable et n'a pas été cohérente entre les moteurs de navigateur. Cela ralentit la collecte des traces de pile, un coût que les développeurs paient toujours, qu'ils utilisent ou non fn.displayName.

Problème Chromium : 1177685

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

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

Problème Chromium : 1056922

Fonctionnalités expérimentales

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

Les outils de développement ont ajouté une compatibilité expérimentale pour 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). Ensuite, ouvrez les onglets Problèmes en cliquant sur le bouton Nombre de problèmes dans la barre d'état Console pour afficher les problèmes.

Problème Chromium : 1155460

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

Vous pouvez désormais activer l'affichage de l'arborescence d'accessibilité complète d'une page.

Le volet "Accessibilité" actuel affiche les nœuds de manière limitée, en ne montrant que la chaîne d'ancêtres directs du nœud racine au nœud inspecté. La nouvelle vue arborescente de l'accessibilité vise à améliorer cela et à rendre l'arborescence de l'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'un test en phase préliminaire. Nous prévoyons d'améliorer et d'étendre cette fonctionnalité au fil du temps.

Problème Chromium : 887173

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

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés des outils pour les développeurs.