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

Jecelyn Yeen

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

Le panneau Enregistreur peut désormais capturer les événements de double-clic et de 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 d'effectuer les étapes suivantes :

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

Pour comprendre comment Recorder a capturé ces événements, développez les étapes :

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

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

Nouveaux modes "Période" et "Instantané" dans le panneau Lighthouse

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

Nouveaux modes "Période" et "Instantané" dans le panneau Lighthouse

Le panneau Lighthouse est désormais compatible avec trois modes de mesure des flux 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 de navigation.
  • Les rapports Périodes analysent une période arbitraire, contenant généralement des interactions d'utilisateurs.
  • Les rapports Instantanés analysent la page à un moment donné, généralement après que l'utilisateur a interagi avec elle.

Par exemple, mesurons les performances de l'ajout d'articles au panier sur cette page de démonstration. Sélectionnez le mode Période, puis cliquez sur Début de la période. Faites défiler la page et ajoutez quelques articles au panier. Une fois terminé, cliquez sur End timespan (Terminer la période) pour générer un rapport Lighthouse sur les interactions utilisateur.

Mode Période

Consultez Flux utilisateur dans Lighthouse pour en savoir plus sur les cas d'utilisation, les avantages et les limites spécifiques de chaque mode.

Problème Chromium : 1291284

Nouveautés concernant les insights sur les performances

Amélioration du contrôle du zoom dans le panneau "Informations sur les performances"

Les outils de développement effectuent désormais un zoom en fonction de la position du curseur de la souris plutôt que de celle de la tête de lecture.Grâce à cette nouvelle fonctionnalité, vous pouvez déplacer le curseur de la souris n'importe où sur la piste et zoomer immédiatement sur la zone souhaitée.

Consultez Insights sur les performances pour découvrir comment obtenir des insights exploitables et améliorer les performances de votre site Web grâce au panneau.

Problème Chromium : 1313382

Confirmer la suppression d'un enregistrement de performances

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 performances

Problème Chromium : 1318087

Réorganiser les volets dans le panneau "Éléments"

Vous pouvez désormais réorganiser les volets du panneau Éléments selon 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 Afficher plus. Si vous déboguez fréquemment des problèmes d'accessibilité, vous pouvez désormais faire glisser le volet au premier plan pour y accéder plus facilement.

Réorganiser les volets dans le panneau "Éléments"

Problème Chromium : 1146146

Sélectionner une couleur en dehors du navigateur

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

Dans le volet Styles, cliquez sur l'aperçu d'une couleur pour ouvrir un sélecteur de couleur. Utilisez la pipette pour sélectionner une couleur n'importe où.

Sélectionner une couleur en dehors du navigateur

Problème Chromium : 1245191

Amélioration de l'aperçu des valeurs intégrées 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. Insérez 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 des valeurs intégrées 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 Compatible avec les grands blobs pour les authentificateurs virtuels.

Par défaut, cette case est décochée. Vous ne pouvez l'activer que pour les authentificateurs avec le protocole ctap2 qui sont compatibles 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 :

  • Afficher/masquer la barre latérale de navigation (à gauche) avec Ctrl/Cmd+Maj+Y
  • Afficher/Masquer la barre latérale du débogueur (à droite) avec Ctrl/Cmd+Maj+H

Nouveaux raccourcis clavier pour le panneau "Sources"

Problèmes Chromium : 1226363

Améliorations apportées aux cartes sources

Auparavant, les développeurs rencontraient des échecs aléatoires lors des opérations suivantes :

  • Déboguer avec l'exemple Codepen
  • Identifier l'emplacement source des problèmes de performances dans un exemple Codepen
  • L'onglet Component est manquant lorsque React DevTools est activé

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

  • Mappage correct entre l'emplacement et le décalage pour les scripts intégrés et l'emplacement source
  • Utiliser des 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

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 des Outils pour les développeurs Chrome

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 des outils pour les développeurs.