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 flexbox CSS dédiés.

Lorsqu'un élément display: flex ou display: inline-flex est appliqué à un élément HTML de votre page, vous un badge flex s'affiche à côté dans le panneau "Éléments". Cliquez sur le badge pour afficher ou masquer la superposition flexible sur la page.

Dans le volet Styles, vous pouvez cliquer sur la nouvelle icône à côté de l'icône 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 Layout (Mise en page) comporte une section Flexbox. Affichez tous les éléments Flexbox sur la . 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 efficacement les performances de vos pages grâce à la nouvelle superposition Core Web Vitals.

Core Web Vitals est une initiative de Google visant à unifier les signaux de qualité sont essentiels pour offrir une expérience utilisateur de qualité sur le Web.

Ouvrez le menu "Command" (Commandes), exécutez la commande Show Rendering (Afficher le rendu), puis activez Core Web Statistiques principales.

La superposition affiche actuellement les éléments suivants:

• Largest Contentful Paint (LCP): mesure les performances de chargement. Pour fournir un bon utilisateur doit s'afficher dans les 2, 5 secondes suivant le début du chargement de la page.
• First Input Delay (FID): mesure l'interactivité. Afin d'offrir une bonne expérience utilisateur, les pages doit avoir un FID de moins de 100 millisecondes.
• Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour fournir un bon utilisateur expérience utilisateur, les pages doivent maintenir un CLS inférieur à 0,1.

Problème Chromium: 1152089

Mises à jour de l'onglet "Problèmes"

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

Un nouveau bouton indiquant le nombre de problèmes est désormais ajouté à la barre d'état de la console pour améliorer la visibilité génère des avertissements. Ce message remplacera le message qui s'affichera dans la console concernant le problème.

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 à l'activité Web fiable. L'objectif est d'aider les développeurs comprendre et corriger les problèmes liés à l'activité Web fiable de leurs sites, afin d'améliorer la qualité applications.

Ouvrez une activité Web fiable. Ensuite, ouvrez les onglets Issues (Problèmes) en cliquant sur Issues (Nombre de problèmes). dans la barre d'état de la console pour afficher les problèmes. Regardez cette conférence d'Andre pour en savoir plus 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

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

Problème Chromium: 1178530

Volet "Nouveaux jetons de confiance" 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 la nouvelle interface Trust Jetons, sous le panneau Application.

Le jeton de confiance est une nouvelle API qui permet de lutter contre la fraude et de distinguer les bots des humains, sans passer par le suivi. Découvrez comment faire vos premiers pas avec les jetons de confiance.

Problème Chromium: 1126824

Émuler la fonctionnalité multimédia color-gamut CSS

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

Ouvrez le menu de commandes, exécutez la commande Show Rendering (Afficher le rendu), puis définissez le paramètre Emulate CSS (Émuler le CSS) menu déroulant de palette de couleurs de l'élément multimédia.

Problème Chromium: 1073887

Amélioration des outils des 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 Manifest (Manifeste) affiche désormais un message d'avertissement si la description du fichier manifeste dépasse 324 caractères.

De plus, le volet Manifeste affiche désormais un message d'avertissement si la capture d'écran de la PWA n'est pas affichée correspondent aux exigences. En savoir plus sur la propriété Captures d'écran des PWA et ses exigences ici.

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'adressage IP du 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 sont maintenant améliorées. Dans certains cas extrêmes, nous avons constaté 10 fois d'amélioration des performances.

Les outils de développement collectent les traces de la pile et les associent aux messages de la console ou à des tâches asynchrones pour plus tard par le développeur en cas de problème. Comme cette collecte doit s'effectuer de manière synchrone, dans le moteur du navigateur, une collecte lente de la trace de la pile peut ralentir considérablement la page Les outils de développement s'ouvrent. Nous avons réussi à réduire considérablement les frais généraux liés à la collecte des traces de piles.

Un article de blog sur l'ingénierie vous expliquera plus en détail l'implémentation. Nous vous communiquerons prochainement plus d'informations à ce sujet.

Problèmes Chromium: 1069425, 1077657

Afficher les fonctionnalités autorisées/non autorisées dans la vue "Détails de l'image"

La vue "Détails du frame" affiche désormais une liste des fonctionnalités de navigateur autorisées et non autorisées contrôlées par Règles relatives aux autorisations.

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 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. La L'attribut SameParty est un nouvel attribut booléen pour indiquer si un cookie doit être inclus dans aux origines des mêmes ensembles internes.

Problème Chromium: 1161427

Abandon de la compatibilité fn.displayName non standard

L'fn.displayName non standard n'est plus pris en charge. Utilisez fn.name à la place.

Traditionnellement, Chrome prend en charge la propriété non standard fn.displayName pour permettre Les développeurs peuvent contrôler les noms de débogage pour les fonctions qui s'affichent dans error.stack et dans la pile des outils de développement. et des traces, etc. Dans l'exemple ci-dessus, la pile d'appel affichait auparavant noLongerSupport.

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

La compatibilité avec fn.displayName s'est avérée peu fiable et incohérente entre les différents moteurs de navigation. Ralentit la collecte des traces de la pile, un coût que les développeurs paient toujours, qu'ils utilisent ou non fn.displayName ou non.

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 obsolète.

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é la 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, qui peut être détecté automatiquement sur le Web. L'affichage de ces problèmes dans l'onglet "Problèmes" aide les développeurs à 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 en cliquant sur le bouton Nombre de problèmes dans la barre d'état de la console pour afficher les problèmes.

Problème Chromium: 1155460

Arborescence d'accessibilité complète dans le panneau "Éléments"

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

Le volet d'accessibilité actuel fournit un affichage limité de ses nœuds, n'affichant que le d'une chaîne d'ancêtre directe du nœud racine vers le nœud inspecté. La nouvelle arborescence d'accessibilité pour améliorer cela et rendre l'arborescence d'accessibilité plus explorable, utile et plus facile pour les développeurs. utiliser.

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

Veuillez noter que cette expérience en est encore à ses débuts. 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

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