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

Capturer les événements de double-clic et de clic droit dans le panneau "Enregistreur"

Le panneau Enregistreur permet désormais d'enregistrer des événements de type double-clic et clic droit.

Capturer les événements de double-clic et de clic droit dans le panneau "Enregistreur"

Dans cet exemple, démarrez un enregistrement et essayez de procéder comme suit:

  • Double-cliquez sur la fiche pour l'agrandir
  • Effectuez un clic droit sur la fiche, puis sélectionnez une action dans le menu contextuel

Pour comprendre comment l'Enregistreur a capturé ces événements, développez les étapes suivantes:

  • Un double-clic est capturé en tant que type: doubleClick.
  • L'événement de clic droit est capturé en tant que type: click, mais la propriété button est définie sur secondary. La valeur button d'un clic de souris normal est primary.

Problèmes Chromium: 1300839, 1322879, 1299701, 1323688

Nouveaux modes de période et d'instantané dans le panneau Lighthouse

Vous pouvez désormais utiliser Lighthouse pour mesurer les performances de votre site Web au-delà du chargement de la page.

Nouveaux modes de période et d'instantané dans le panneau Lighthouse

Le panneau Lighthouse est désormais compatible avec trois modes de mesure du parcours utilisateur:

  • Les rapports Navigation analysent le chargement d'une seule page. La navigation est le type de rapport le plus courant. Tous les rapports Lighthouse antérieurs à la version actuelle sont des rapports sur la navigation.
  • Les rapports sur la période analysent une période arbitraire contenant généralement les interactions des utilisateurs.
  • Les rapports Instantanés analysent la page dans un état particulier, généralement après une interaction de l'utilisateur.

Par exemple, mesurons les performances liées à l'ajout d'articles au panier sur cette page de démonstration. Sélectionnez le mode Timespan (Période), puis cliquez sur Start timespan (Commencer la période). Faites défiler la page et ajoutez quelques articles au panier. Lorsque vous avez terminé, cliquez sur End timespan (Terminer la période) pour générer un rapport Lighthouse sur les interactions des utilisateurs.

Mode d'intervalle de temps

Consultez la section Parcours utilisateur dans Lighthouse pour en savoir plus sur les cas d'utilisation uniques, les avantages et les limites de chaque mode.

Problème Chromium: 1291284

Informations sur les insights sur les performances

Amélioration de la commande de zoom dans le panneau "Insights sur les performances"

Les outils de développement effectueront désormais un zoom avant en fonction du curseur de votre souris plutôt que de la position de la tête de lecture.Avec le dernier zoom basé sur le curseur, vous pouvez déplacer votre souris n'importe où sur la piste et effectuer un zoom avant direct sur la zone souhaitée.

Consultez l'article Informations sur les performances pour savoir comment obtenir des insights exploitables et améliorer les performances de votre site Web grâce au panel.

Problème Chromium: 1313382

Confirmer la suppression d'un enregistrement de performance

Les outils de développement affichent désormais une boîte de dialogue de confirmation avant de supprimer un enregistrement des performances.

Confirmer la suppression d'un enregistrement de performance

Problème Chromium: 1318087

Réorganiser les volets du panneau "Éléments"

Vous pouvez désormais réorganiser les volets du panneau Éléments en fonction de vos préférences.

Par exemple, lorsque vous ouvrez les outils de développement sur un écran étroit, le volet Accessibilité est masqué sous le bouton Plus. Si vous déboguez fréquemment des problèmes d'accessibilité, vous pouvez désormais faire glisser le volet au premier plan pour un accès plus facile.

Réorganiser les volets du panneau "Éléments"

Problème Chromium: 1146146

Choix d'une couleur en dehors du navigateur

Les outils de développement permettent désormais de choisir une couleur en dehors du navigateur. Auparavant, vous ne pouviez choisir une couleur que dans le navigateur.

Dans le volet Styles, cliquez sur un aperçu de couleur pour ouvrir un sélecteur de couleur. Utilisez la pipette pour choisir une couleur où que vous soyez.

Choix d'une couleur en dehors du navigateur

Problème Chromium: 1245191

Amélioration de l'aperçu de la valeur intégrée lors du débogage

Le débogueur affiche désormais correctement l'aperçu des valeurs intégrées.

Dans cet exemple, la fonction double comporte un paramètre d'entrée a et une variable x. Placez un point d'arrêt à la ligne return et exécutez le code. L'aperçu intégré affiche correctement les valeurs a et x. Auparavant, le débogueur n'affichait pas la valeur x dans l'aperçu intégré.

Amélioration de l'aperçu de la valeur intégrée lors du débogage

Problème Chromium: 1316340

Prise en charge des blobs volumineux pour les authentificateurs virtuels

L'onglet WebAuthn comporte désormais la nouvelle case à cocher Prend en charge les blobs volumineux pour les authentificateurs virtuels.

Par défaut, cette case est désactivée. Vous ne pouvez l'activer que pour les authentificateurs dont le protocole ctap2 est compatible avec les clés résidentes.

 Prise en charge des blobs volumineux pour les authentificateurs virtuels

Problème Chromium: 1321803

Nouveaux raccourcis clavier dans le panneau "Sources"

Deux nouveaux raccourcis clavier sont désormais disponibles dans le panneau Sources:

  • Activer/Désactiver la barre latérale de navigation (à gauche) avec Ctrl/Commande+Maj+Y
  • Activez ou désactivez la barre latérale du débogueur (à droite) avec Ctrl / Commande+Maj+H.

Nouveaux raccourcis clavier pour le panneau "Sources"

Problèmes Chromium: 1226363

Améliorations apportées aux cartes sources

Auparavant, les développeurs subissent des défaillances aléatoires pendant:

  • Exemple de débogage avec Codepen
  • Identifier l'emplacement source des problèmes de performances à l'aide d'un exemple Codepen
  • Onglet Component manquant lorsque React DevTools est activé

Voici quelques corrections apportées aux cartes sources pour améliorer l'expérience de débogage globale:

  • Mise en correspondance correcte entre l'emplacement et le décalage pour les scripts intégrés et l'emplacement source
  • Utiliser les informations de remplacement pour l'emplacement du texte du cadre
  • Résoudre correctement les URL relatives avec l'URL du frame

Problèmes Chromium: 1319828, 1318635, 1305475

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