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.

Outils de débogage CSS Flexbox

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 afficher ou masquer une superposition flexible 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 du Flexbox. Essayez par vous-même !

De plus, le volet Layout (Mise en page) comporte une section Flexbox, qui affiche tous les éléments Flexbox sur la page. 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 à unifier les signaux de qualité essentiels pour offrir une expérience utilisateur de qualité sur le Web.

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

La superposition affiche actuellement les éléments suivants:

  • 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 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 doivent avoir un FID de moins de 100 millisecondes.
  • Cumulative Layout Shift (CLS): mesure la stabilité visuelle. Pour offrir une expérience utilisateur de qualité, les pages doivent conserver 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é des avertissements concernant les problèmes. Cette action 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 à résoudre les problèmes liés à l'activité Web fiable de leurs sites, afin d'améliorer la qualité de leurs applications.

Ouvrez une activité Web fiable. Ensuite, ouvrez les onglets Issues (Problèmes) en cliquant sur le bouton 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 sur la création et le déploiement d'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

La console formate maintenant les chaînes en tant que littéraux de chaîne JavaScript valides. Auparavant, la console n'échappait 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 le nouveau volet Trust Tokens (Jetons de confiance), sous le panneau Application (Application).

Le jeton de confiance est une nouvelle API qui permet de lutter contre la fraude et de distinguer les bots des humains, sans suivi passif. 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

É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 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 la liste déroulante Emulate CSS media feature color-gamut.

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 Manifest affiche désormais un message d'avertissement si la capture d'écran de la PWA ne répond pas aux exigences. Pour en savoir plus sur la propriété des captures d'écran des PWA et sur ses exigences, cliquez 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 dans le panneau "Network" (Réseau) pour afficher l'espace d'adresses IP réseau de chaque ressource réseau.

Nouvelle colonne "Espace d'adressage distant"

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é une amélioration des performances 10 fois supérieure.

Les outils de développement collectent les traces de la pile et les associent aux messages de la 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 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 lorsque les outils de développement sont ouverts. 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 la règle "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 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. L'attribut SameParty est un nouvel attribut booléen qui indique si un cookie doit être inclus dans les requêtes adressées 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 plutôt fn.name.

Exemple d'utilisation de displayName

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

Remplacez fn.displayName par la propriété fn.name standard, qui a été configurée (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. Elle ralentit la collecte des traces de pile, un coût que les développeurs paient toujours, qu'ils utilisent 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 "Ne pas afficher l'avertissement de l'économiseur de données Chrome" obsolètes

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 Issues (Problèmes) en cliquant sur le bouton Issues count (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 la chaîne d'ancêtre directe du nœud racine au nœud inspecté. La nouvelle arborescence d'accessibilité vise à améliorer cela et à la rendre plus explorable, utile et plus facile à utiliser pour les développeurs.

Après avoir activé le test, un nouveau bouton s'affiche dans le panneau Éléments. Cliquez pour basculer 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 une suggestion ou un commentaire via crbug.com.
  • Signalez un problème dans les outils de développement en sélectionnant Autres options   More   > Aide > Signaler un problème dans les outils de développement 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 a été annulé.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59