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 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 sous forme de fichier JSON. Cette nouveauté facilite le partage des parcours 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 à l'aide du bouton d'importation et revoir le flux utilisateur.

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

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

Problème Chromium: 1257499

Afficher les calques de la cascade dans le volet "Styles"

Les calques en cascade offrent un contrôle plus explicite de vos fichiers CSS afin d'éviter les conflits liés aux spécificités des styles. Cela est particulièrement utile pour les codebases et les systèmes de conception volumineux, ainsi que pour 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 son ordre. Le calque page présente la spécificité la plus élevée. L'arrière-plan box est donc vert.

Afficher les calques de la 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 couleurs 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 son format. Le format de couleur HWB est ajouté.

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

Fonction 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 des classes comportant 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

Points importants divers

Voici quelques correctifs importants 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 de type tableau, les noms de classes CSS, map.get et les balises HTML. (1297101, 1297491, 1293807, 1296983)
Correction d'une erreur de mise en surbrillance 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 possibilité d'utiliser la touche Alt (Options) pour la sélection multiple dans le panneau Sources. (1304070).

[Expérimental] Nouveaux modes de période et d'instantané dans le panneau Lighthouse

En plus du mode de navigation existant, le panneau Lighthouse est désormais compatible avec deux autres modes de mesure des parcours utilisateur : timespan (période) et snapshot (instantané).

Par exemple, les rapports Période vous permettent d'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 terminez la période. Lisez le rapport pour connaître le Total Blocking Time (Temps de blocage total) et le Cumulative Layout Shift qui ont été causés par l'interaction.

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

Mode Intervalle et instantané dans le panelhouse de Lighthouse

Problème Chromium: 772558

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.