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

Nouveaux outils de débogage de la grille CSS

Les outils de développement offrent désormais une meilleure prise en charge du débogage de la grille CSS.

Débogage de la grille CSS

Lorsqu'un élément display: grid ou display: inline-grid est appliqué à un élément HTML de votre page, vous un badge grid s'affiche à côté 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 offre plusieurs options pour afficher les 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 la nouvelle version de WebAuthn .

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

Onglet WebAuthn

Avant le nouvel onglet WebAuthn, le débogage WebAuthn natif n'était pas pris en charge 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 et inspecter leurs états, sans avoir besoin d'authentificateurs physiques. Ainsi, l'expérience de débogage.

Consultez notre documentation pour en savoir plus sur la fonctionnalité WebAuthn.

Problème Chromium: 1034663

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

Les outils de développement permettent désormais de déplacer des outils dans les outils de développement entre le panneau supérieur et le panneau inférieur. De cette façon, vous pouvez deux outils à la fois.

Par exemple, si vous souhaitez afficher simultanément les panneaux Éléments et Sources, vous pouvez Cliquez sur le panneau Sources, puis sélectionnez Move to bottom (Déplacer vers le bas) pour le déplacer vers le bas.

Placer en dernière position

De même, vous pouvez déplacer n'importe quel onglet du bas vers le haut en cliquant dessus avec le bouton droit de la souris et en sélectionnant Déplacer vers en haut de la page.

Déplacer vers le haut

Problème Chromium: 1075732

Mises à jour du panneau des éléments

Afficher le volet de la barre latérale "Calculé" dans le volet "Styles"

Vous pouvez maintenant activer/désactiver le volet Computed rectangulaire (Barre latérale calculée) dans le volet "Styles".

Par défaut, la fenêtre Barre latérale calculée du volet Styles est réduite. Cliquez sur le bouton pour l'activer ou la désactiver.

Volet de la barre latérale des calculs

Problème Chromium: 1073899

Regrouper des propriétés CSS dans le volet "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, il sera plus facile de naviguer dans le volet Calculé (moins et sélectionnez un ensemble de propriétés associées pour l'inspection CSS.

Dans le panneau Éléments, sélectionnez un élément. Cochez la case Grouper pour regrouper/dégrouper le CSS. propriétés.

Regrouper des propriétés CSS

Problèmes Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 dans le panneau Lighthouse

Le panneau Lighthouse utilise désormais Lighthouse 6.4. Consultez les notes de version pour obtenir la liste des modifications.

Phare

Nouveaux audits dans Lighthouse 6.4:

  • Précharger les polices. Vérifie si toutes les polices qui utilisent font-display: optional ont été préchargées.
  • Mappages sources valides. Vérifie si une page comporte des mappages sources valides pour du code JavaScript propriétaire volumineux.
  • [Expérimental] Grande bibliothèque JavaScript. Les bibliothèques JavaScript volumineuses peuvent avoir des performances. Cet audit suggère des alternatives moins chères que les grandes bibliothèques JavaScript courantes telles que moment.js

Problème Chromium: 772558

performance.mark() événements dans la section "Durée"

La section Durée de l'enregistrement des performances marque désormais performance.mark() événements.

Événements Performance.mark

Nouveaux filtres resource-type et url dans le panneau "Network"

Utilisez les nouveaux mots clés resource-type et url dans le panneau Network (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 demandes par propriété pour trouver 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 la règle COEP (Cross-Origin Embedder Policy) et la règle d'ouverture multi-origine (COOP)reporting to dans 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 d'effectuer les actions suivantes : spécifier les points de terminaison du serveur auxquels le navigateur doit envoyer les avertissements et les erreurs.

signaler au point de terminaison

Lisez cet article pour en savoir plus sur l'activation de COEP et de COOP, et pour créer votre site Web. "isolément multi-origine".

Problème Chromium: 1051466

Afficher les modes COEP et COOP report-only

Les outils de développement affichent désormais le libellé report-only pour les méthodes COEP et COOP définies sur le mode report-only.

libellé "rapport uniquement"

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

Problème Chromium: 1051466

Abandon de Settings dans le menu "Plus d'outils"

Le Settings dans le menu "Plus d'outils" est obsolète. Ouvrez les paramètres à partir du panneau principal. à la place.

Paramètres du panneau principal

Problème Chromium: 1121312

Fonctionnalités expérimentales

Afficher et résoudre les problèmes de contraste des couleurs dans le panneau "Présentation du CSS"

Le panneau Présentation du CSS affiche désormais une liste des textes à faible contraste de couleurs 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 présentant ce problème.

Problèmes de faible contraste des couleurs

Cliquez sur un élément de la liste pour l'ouvrir dans le panneau Éléments. Les outils de développement fournissent des outils suggestion de couleur 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, en pointant sur une commande et en cliquant 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

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