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

Jecelyn Yeen

Importer et exporter des parcours utilisateur enregistrés en tant que fichier JSON

Le panneau Enregistreur permet désormais d'importer et d'exporter des enregistrements de parcours utilisateur sous forme de fichier JSON. Cette fonctionnalité permet de partager plus facilement les flux utilisateur et peut être utile pour signaler des bugs.

Par exemple, téléchargez ce fichier JSON. Vous pouvez l'importer à l'aide du bouton d'importation et revoir le parcours utilisateur.

Vous pouvez également exporter l'enregistrement. Après avoir enregistré un parcours utilisateur, cliquez sur le bouton d'exportation. Trois options d'exportation sont disponibles :

  • Exporter au format JSON Téléchargez l'enregistrement au format JSON.
  • Exporter en tant que script @puppeteer/replay Téléchargez l'enregistrement sous forme de script Puppeteer Replay.
  • Exporter en tant que script Puppeteer Téléchargez l'enregistrement sous forme de script Puppeteer.

Consultez la documentation pour en savoir plus sur les différences entre ces options.

Options d'exportation dans le panneau "Enregistreur"

Problème Chromium : 1257499

Afficher les calques en cascade dans le volet "Styles"

Les calques en cascade permettent de contrôler plus explicitement vos fichiers CSS pour éviter les conflits de spécificité de style. Cela est particulièrement utile pour les grands codebase, les systèmes de conception et lors de la gestion des styles tiers dans les applications.

Dans cet exemple, trois calques en cascade sont définis : page, component et base. Dans le volet Styles, vous pouvez afficher chaque calque et ses styles.

Cliquez sur le nom du calque pour afficher l'ordre des calques. La couche page est la plus spécifique. Par conséquent, l'arrière-plan box est vert.

Afficher les calques en cascade dans le volet "Styles"

Problème Chromium : 1240596

Compatibilité avec la fonction de couleur hwb()

Vous pouvez désormais afficher et modifier le format de couleur HWB dans les outils de développement.

Dans le volet Styles, maintenez la touche Maj enfoncée et cliquez sur l'aperçu d'une couleur pour modifier le format de couleur. Le format de couleur HWB a été ajouté.

Vous pouvez également définir le format de couleur sur HWB dans le sélecteur de couleur.

Fonction de couleur hwb()

Amélioration de l'affichage des propriétés privées

Les outils de développement évaluent et affichent désormais correctement les accesseurs privés. Auparavant, vous ne pouviez pas développer les classes avec des accesseurs privés dans la console et le panneau Sources.

propriétés privées dans la console.

Problèmes Chromium : 1296855, https://crbug.com/1303407

Autres points importants

Voici quelques corrections notables dans cette version :

  • Le cache amélioré affiche désormais l'ID de l'extension qui a bloqué le bfcache, le cas échéant.( 1284548)
  • Correction de la saisie semi-automatique pour les objets de type tableau, les noms de classes CSS, les balises map.get et HTML. (1297101, 1297491, 1293807, 1296983)
  • Correction de la mise en surbrillance incorrecte lors du double-clic sur des mots et de l'annulation de la saisie semi-automatique. (1298437, 1298667)
  • Correction du raccourci clavier pour les commentaires dans le panneau Sources. (1296535)
  • Réactivation de la prise en charge de la touche Alt (Options) pour la sélection multiple dans le panneau Sources. (1304070)

[Expérimental] Nouveaux modes "Période" et "Instantané" dans le panneau Lighthouse

En plus du mode Navigation existant, le panneau Lighthouse prend désormais en charge deux modes supplémentaires pour mesurer les parcours utilisateur : Période et Instantané.

Par exemple, vous pouvez utiliser les rapports Période pour analyser les interactions des utilisateurs. Ouvrez cette page de démonstration. Sélectionnez le mode Période, puis cliquez sur Début de la période. Sur la page, cliquez sur un café et mettez fin à la période. Consultez le rapport pour connaître le temps de blocage total et le Cumulative Layout Shift causés par l'interaction.

Chaque mode présente ses propres cas d'utilisation, avantages et limites. Pour en savoir plus, consultez la documentation Lighthouse.

Mode période et instantané dans le panneau Lighthouse

Problème Chromium : 772558

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

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 sujets abordés dans la série Nouveautés de DevTools.