Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

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

Le panneau Enregistreur permet désormais d'importer et d'exporter des enregistrements de parcours utilisateur sous forme de fichier JSON. Cet ajout facilite le partage des flux utilisateur et peut être utile pour la création de rapports de bugs.

Par exemple, téléchargez ce fichier JSON. Vous pouvez l'importer avec le bouton "Importer" et revoir le parcours utilisateur.

Vous pouvez également exporter l'enregistrement. Après avoir enregistré un parcours utilisateur, cliquez sur le bouton "Exporter". Il existe trois options d'exportation:

Exportez-les au format JSON. Téléchargez l'enregistrement au format JSON.
Exportez-les sous forme de script @puppeteer/replay. Téléchargez l'enregistrement sous forme de script Puppeteer Replay.
Exporter sous forme de 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 du panneau "Enregistreur"

Problème Chromium: 1257499

Afficher les calques en cascade dans le volet "Styles"

Les calques en cascade vous 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 codebases volumineux, les systèmes de conception et la gestion de styles tiers dans les applications.

Dans cet exemple, trois couches de cascade sont définies: 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 présente la spécificité la plus élevée. L'arrière-plan box est donc vert.

Afficher les calques en cascade dans le volet "Styles"

Problème Chromium: 1240596

Prise en charge de la fonction color 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 un aperçu des couleurs pour modifier le format de couleur. Ajout du format de couleur HWB.

Vous pouvez également remplacer le format de couleur par le format HWB dans le sélecteur de couleur.

Fonction couleur hwb()

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

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

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

Problèmes liés à Chromium: 1296855, https://crbug.com/1303407

Points forts divers

Voici quelques correctifs importants dans cette version:

Le cache amélioré affiche désormais l'ID d'extension qui bloquait le cache amélioré, le cas échéant.( 1284548)
Correction de la compatibilité de la saisie semi-automatique pour les objets de type tableau, les noms de classe CSS, map.get et les balises HTML. (1297101, 1297491, 1293807, 1296983)
Correction du problème de surlignage incorrect 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éactivez la touche Alt (Options) pour la sélection multiple dans le panneau Sources. (1304070).

[Expérimental] Nouvelle période et nouveau mode Instantané dans le panneau Lighthouse

Outre le mode de navigation existant, le panneau Lighthouse accepte désormais deux modes de mesure des parcours utilisateur : timespan (période) et snapshot (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 Timespan (Période), puis cliquez sur Start timespan (Commencer la période). Sur la page, cliquez sur un café et mettez fin à la période. Lisez le rapport pour connaître le Total Blocking Time (Temps de blocage total) et Cumulative Layout Shift (Changement de mise en page cumulatif) causés par cette interaction.

Chaque mode présente des cas d'utilisation, des avantages et des limites qui lui sont propres. Pour en savoir plus, consultez la documentation de Lighthouse.

Période et mode Instantané dans la cabine du phare

Problème Chromium: 772558

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.