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

Jecelyn Yeen

Nouveaux outils de débogage de la grille CSS

Les outils de développement offrent désormais une meilleure aide pour déboguer la grille CSS.

Débogage de la grille CSS

Lorsque display: grid ou display: inline-grid est appliqué à un élément HTML de votre page, un badge grid 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 de grille sur la page.

Le nouveau volet Mise en page comporte une section Grille qui vous propose plusieurs options d'affichage des grilles.

Pour en savoir plus, consultez la documentation.

Problème Chromium: 1047356

Nouvel onglet WebAuthn

Vous pouvez désormais émuler des authentificateurs et déboguer l'API Web Authentication avec le nouvel onglet WebAuthn.

Sélectionnez Autres options > Plus d'outils > WebAuthn pour ouvrir l'onglet WebAuthn.

Onglet "WebAuthn"

Avant le nouvel onglet WebAuthn, le débogage WebAuthn n'était pas pris en charge en mode natif dans Chrome. Les développeurs avaient besoin d'authentificateurs physiques pour tester leur application Web avec l'API Web Authentication.

Avec le nouvel onglet WebAuthn, les développeurs Web peuvent désormais émuler ces authentificateurs, personnaliser leurs fonctionnalités et inspecter leurs états, sans avoir besoin d'authentificateurs physiques. Cela facilite grandement l'expérience de débogage.

Pour en savoir plus sur la fonctionnalité WebAuthn, consultez notre documentation.

Problème Chromium: 1034663

Déplacer des outils entre le panneau supérieur et le panneau inférieur

Les outils de développement peuvent désormais être déplacés entre le panneau supérieur et le panneau inférieur. Vous pouvez ainsi afficher deux outils à la fois.

Par exemple, si vous souhaitez afficher les panneaux Éléments et Sources en même temps, vous pouvez effectuer un clic droit sur le panneau Sources, puis sélectionner Déplacer vers le bas pour le placer en bas.

Placer en dernière position

De même, vous pouvez déplacer un onglet du bas vers le haut en effectuant un clic droit dessus, puis en sélectionnant Déplacer vers le haut.

Déplacer vers le haut

Problème Chromium: 1075732

Mises à jour du panneau "Elements"

Afficher le volet "Compilé" dans le volet "Styles"

Vous pouvez désormais activer ou désactiver le volet Barre latérale calculée dans le volet "Styles".

Le volet Barre latérale des styles calculés du volet Styles est réduit par défaut. Cliquez sur le bouton pour l'activer ou le désactiver.

Volet de la barre latérale des styles calculés

Problème Chromium: 1073899

Regrouper des propriétés CSS dans le panneau "Calculé"

Vous pouvez désormais regrouper les propriétés CSS par catégories dans le volet Calculé.

Grâce à cette nouvelle fonctionnalité de regroupement, vous pourrez naviguer plus facilement dans le volet Computed (moins de défilement) et vous concentrer de manière sélective sur un ensemble de propriétés associées pour l'inspection CSS.

Dans le panneau Elements (Éléments), sélectionnez un élément. Activez/Désactivez la case à cocher Grouper pour regrouper/désagréger les propriétés CSS.

Regrouper des propriétés CSS

Problèmes Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 6.4. Pour obtenir la liste complète des modifications, consultez les notes de version.

Phare

Nouveaux audits dans Lighthouse 6.4:

  • Préchargez les polices. Vérifie si toutes les polices qui utilisent font-display: optional ont été préchargées.
  • Cartes sources valides Vérifie si une page contient des mappages source valides pour des fichiers JavaScript propriétaires volumineux.
  • [Expérimental] Grande bibliothèque JavaScript Les bibliothèques JavaScript volumineuses peuvent être à l'origine de performances médiocres. Cet audit suggère des alternatives moins chères aux grandes bibliothèques JavaScript courantes telles que moment.js.

Problème Chromium: 772558

Événements performance.mark() dans la section "Timings"

La section Timings (Durée) d'un enregistrement de performances marque désormais les événements performance.mark().

Événements Performance.mark

Nouveaux filtres resource-type et url dans le panneau "Réseau"

Utilisez les nouveaux mots clés resource-type et url dans le panneau "Réseau" pour filtrer les requêtes réseau.

Par exemple, utilisez resource-type:image pour vous concentrer sur les requêtes réseau qui sont des images.

filtre de type de ressource

Consultez Filtrer les requêtes par propriétés pour découvrir d'autres mots clés spéciaux, comme resource-type et url.

Problèmes Chromium: 1121141, 1104188

Mises à jour de la vue des détails du frame

Afficher le point de terminaison reporting to COEP et COOP

Vous pouvez désormais afficher le point de terminaison reporting to de la règle COEP (Cross-Origin Embedder Policy) et de la règle COOP (Cross-Origin Opener Policy) sous la section Sécurité et isolation.

L'API Reporting définit un nouvel en-tête HTTP, Report-To, qui permet aux développeurs Web de spécifier des points de terminaison de serveur auxquels le navigateur peut envoyer des avertissements et des erreurs.

signale à

Lisez cet article pour découvrir comment activer COEP et COOP, et rendre votre site Web "isolé entre origines".

Problème Chromium: 1051466

Afficher le mode report-only COEP et COOP

DevTools affiche désormais le libellé report-only pour COEP et COOP définis sur le mode report-only.

libellé "Rapport uniquement"

Regardez cette vidéo pour découvrir comment éviter les fuites d'informations et activer COOP et COEP sur votre site Web.

Problème Chromium: 1051466

Abandon de Settings dans le menu "Autres outils"

L'Settings du menu "Plus d'outils" a été abandonné. Ouvrez plutôt les Paramètres dans le panneau principal.

Paramètres dans le panneau principal

Problème Chromium: 1121312

Fonctionnalités expérimentales

Afficher et résoudre les problèmes de contraste des couleurs dans le panneau "CSS Overview" (Aperçu CSS)

Le panneau CSS Overview (Aperçu CSS) affiche désormais une liste des textes à faible contraste de votre page.

Dans cet exemple, la page de démonstration présente un problème de faible contraste des couleurs. Cliquez sur le problème pour afficher la liste des éléments concernés.

Problèmes de contraste des couleurs trop faible

Cliquez sur un élément de la liste pour l'ouvrir dans le panneau Elements (Éléments). Les outils de développement suggèrent automatiquement des couleurs pour vous aider à corriger le texte à faible contraste.

Problème Chromium: 1120316

Personnaliser les raccourcis clavier dans les outils de développement

Vous pouvez désormais personnaliser les raccourcis clavier de vos commandes préférées dans les outils de développement.

Accédez à Paramètres > Raccourcis, pointez sur une commande, puis cliquez sur le bouton Modifier (icône en forme de crayon) pour personnaliser le raccourci clavier.

Personnaliser les raccourcis clavier

Pour réinitialiser tous les raccourcis, cliquez sur Restaurer les raccourcis par défaut.

Problème Chromium: 174309

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.