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

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

Jecelyn Yeen

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.

Outils de débogage CSS Flexbox

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.

Section Flexbox dans le volet de mise en page

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 à fournir des conseils unifiés pour 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.

Superposition Core Web Vitals

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.

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 à 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, et améliorer ainsi 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è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

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.

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

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 conçue pour aider à lutter contre la fraude et à distinguer les bots des humains, sans passer par le suivi. Découvrez comment faire vos premiers pas avec les jetons de confiance.

Volet "New Trust Tokens" (Nouveau jeton 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.

Avertissement concernant l'installation des PWA

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

Avertissement concernant la troncation de la description de la PWA

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.

Avertissement concernant la capture d'écran de la 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'adressage IP du réseau de chaque ressource réseau.

Nouvel "Espace d'adressage distant" colonne

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.

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 des fonctionnalités du navigateur dans son propre cadre ou dans les cadres iFrame qu'il intègre.

Fonctionnalités autorisées/non autorisées en fonction des règles 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. 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.

Colonne "SameParty"

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.

Exemple d'utilisation de displayName

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.

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

"Ne pas afficher l'avertissement de l'économiseur de données Chrome" obsolète paramètres

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, demo). 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.

Signalement automatique des problèmes de faible contraste

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 ce test en est encore à ses débuts. Nous prévoyons d'améliorer et d'étendre cette fonctionnalité au fil du temps.

Arborescence d'accessibilité complète

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.