Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Capturer des é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 des é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 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 enregistré ces événements, développez les étapes suivantes:

Le double-clic est capturé comme type: doubleClick.
L'événement de clic droit est capturé 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 liés à Chromium: 1300839, 1322879, 1299701, 1323688

Nouvelle période et mode 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.

Nouvelle période et mode Instantané dans le panneau Lighthouse

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

Les rapports de navigation analysent un seul chargement de 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 utilisateur.
Les rapports Instantanés analysent la page dans un état particulier, 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 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 Fin de la période pour générer un rapport Lighthouse sur les interactions des utilisateurs.

Mode Période

Consultez 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 du contrôle du 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 le titre 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 à ce 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 dans le panneau "Elements"

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

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 qu'une couleur dans le navigateur.

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

Choisir 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 maintenant 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, puis 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 contient désormais la nouvelle case à cocher Accepte 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 dotés du 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 des sources

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

Pour activer/désactiver la barre latérale de navigation (à gauche), appuyez sur Ctrl/Commande+Maj+Y
Activez ou désactivez la barre latérale du debugger (à droite) en appuyant sur Ctrl / Commande+Maj+H.

Nouveaux raccourcis clavier pour le panneau "Sources"

Problèmes liés à Chromium: 1226363

Améliorations apportées aux cartes sources

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

Exemple de débogage avec Codepen
Identifier l'emplacement source des problèmes de performances dans un exemple Codepen
Onglet Component (Composant) manquant lorsque React DevTools est activé

Voici quelques corrections apportées aux mappages source 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.