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

Jecelyn Yeen

Enregistrer les événements de double-clic et de clic droit dans le panneau de l'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, lancez un enregistrement et essayez de suivre les étapes suivantes:

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

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

  • Le double-clic est capturé en tant que type: doubleClick.
  • L'événement 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

Nouveau mode "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 de la page.

Nouveau mode "Période" et "Instantané" dans le panneau Lighthouse

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

  • Les rapports sur la 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 les périodes analysent une période arbitraire, contenant généralement des interactions d'utilisateurs.
  • Les rapports sur les 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 liées à l'ajout d'articles au panier sur cette page de démonstration. Sélectionnez le mode Période, puis cliquez sur Démarrer la période. Faites défiler la page et ajoutez quelques articles au panier. Une fois que vous avez terminé, cliquez sur End timespan (Mettre fin à la période) pour générer un rapport Lighthouse sur les interactions utilisateur.

Mode Période

Consultez Parcours utilisateur dans Lighthouse pour découvrir les cas d'utilisation, les avantages et les limites uniques de chaque mode.

Problème Chromium: 1291284

Informations sur les performances

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

DevTools permet désormais de faire un zoom avant en fonction du curseur de la souris plutôt que de la position de la tête de lecture.Avec le dernier zoom basé sur le curseur, vous pouvez placer la souris n'importe où sur la piste et faire un zoom avant sur la zone souhaitée immédiatement.

Consultez l'article Informations sur les performances pour découvrir 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

DevTools affiche désormais une boîte de dialogue de confirmation avant de supprimer un enregistrement de performances.

Confirmer la suppression d'un enregistrement de performances

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 DevTools 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 vers l'avant pour y accéder plus facilement.

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

Problème Chromium: 1146146

Choisir 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 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. 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 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 gros objets blob pour les authentifiants virtuels.

Par défaut, cette case est désactivée. Vous ne pouvez l'activer que pour les authentificateurs avec le protocole ctap2 qui acceptent 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/Cmd+Maj+Y
  • Activez/Désactivez 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
  • 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:

  • Mappage correct 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

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 de développement

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