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

Jecelyn Yeen

Importer et exporter des flux utilisateur enregistrés sous forme de fichier JSON

Le panneau Enregistreur permet désormais d'importer et d'exporter des enregistrements de parcours utilisateur au format JSON. Cette fonctionnalité permet de partager plus facilement les parcours 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:

  • Exportez-les sous forme de fichier JSON. Téléchargez l'enregistrement au format JSON.
  • Exporter en tant que script @puppeteer/replay Téléchargez l'enregistrement sous la forme d'un script Puppeteer Replay.
  • Exportation sous forme de script Puppeteer . Téléchargez l'enregistrement sous la forme d'un 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 couches en cascade permettent de contrôler plus explicitement vos fichiers CSS afin d'éviter les conflits de spécificité de style. Cela est particulièrement utile pour les grands codebases, les systèmes de conception et 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 de la couche pour afficher l'ordre des couches. 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 pour les développeurs.

Dans le volet Styles, maintenez la touche Maj enfoncée et cliquez sur un aperçu de couleur pour modifier le format de couleur. Le format de couleur HWB est 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

DevTools évalue et affiche 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 forts

Voici quelques corrections importantes apportées dans cette version:

  • Le cache amélioré affiche désormais l'ID d'extension qui a bloqué le bfcache, le cas échéant.( 1284548)
  • Correction de la prise en charge de la saisie semi-automatique pour les objets ressemblant à des tableaux, les noms de classe CSS, les balises map.get et HTML. (1297101, 1297491, 1293807, 1296983)
  • Correction des surbrillances incorrectes lorsque vous double-cliquez sur des mots et annulez la saisie semi-automatique. (1298437, 1298667)
  • Correction du raccourci clavier pour les commentaires dans le panneau Sources. (1296535)
  • Réactivez la possibilité d'utiliser la touche Alt (Options) pour la sélection multiple dans le panneau Sources. (1304070)

[Expérimental] Nouveau mode "Période" et "Instantané" dans le panneau Lighthouse

En plus du mode Navigation existant, le panneau Lighthouse est désormais compatible avec deux autres modes de mesure des flux utilisateur : Période et Instantané.

Par exemple, vous pouvez utiliser les rapports sur la période pour analyser les interactions des utilisateurs. Ouvrez cette page de démonstration. Sélectionnez le mode Période, puis cliquez sur Démarrer la période. Sur la page, cliquez sur un café et terminez la période. Consultez le rapport pour connaître le temps de blocage total et le déplacement cumulé de la mise en page 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 Intervalle et instantané dans le panelhouse de Lighthouse

Problème Chromium: 772558

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 plates-formes 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 sujet lié aux outils de développement.

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement