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.

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 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 "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.

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 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émarrer 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.

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

Contrôle du zoom amélioré 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 votre 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.

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.

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 une couleur que 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ù.

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é.

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 acceptent les clés résidentes.

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

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 Composant 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 Chrome DevTools

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les 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 de DevTools.