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

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

Jecelyn Yeen

Enregistreur: copie en tant qu'options pour les étapes, relecture sur la page, menu contextuel des étapes

Nouvelles options de copie dans le panneau "Enregistreur".

Ouvrez un parcours utilisateur existant dans l'Enregistreur. Auparavant, lorsque vous relanciez le parcours utilisateur, les outils de développement lançaient toujours la relecture en accédant à la page ou en l'actualisant.

Avec les dernières mises à jour, l'Enregistreur affiche l'étape de navigation séparément. Vous pouvez cliquer avec le bouton droit de la souris et le supprimer pour effectuer une nouvelle lecture sur la page.

En outre, vous pouvez effectuer un clic droit sur une étape et la copier dans le presse-papiers du panneau *Enregistreur au lieu d'exporter l'intégralité du flux utilisateur. Elle fonctionne également avec les extensions. Par exemple, essayez de copier une étape en tant que script de test Nightwatch. Grâce à cette fonctionnalité, vous pouvez facilement mettre à jour n'importe quel script existant.

Auparavant, vous ne pouviez accéder au menu d'étape qu'à l'aide du bouton à trois points. Vous pouvez maintenant effectuer un clic droit n'importe où sur l'étape pour accéder au menu.

Problèmes Chromium: 1322313, 1351649, 1322313, 1339767

Afficher les noms des fonctions réelles dans les enregistrements de performances

Le panneau Performance affiche désormais les noms réels des fonctions et leurs sources dans la trace s'il existe un mappage source.

Afficher la comparaison des noms de fonctions avant et après s'affiche dans le panneau "Performances".

Dans cet exemple, la taille d'un fichier source est réduite en production. Par exemple, la taille de la fonction sayHi est réduite à n et celle de la fonction takeABreak est réduite à o dans cette démonstration.

Afficher les fichiers avant et après la minimisation.

Auparavant, lorsque vous enregistriez une trace dans le panneau Performance, celle-ci n'affichait que les noms réduits des fonctions. Cela rendait le débogage plus difficile.

Avec les dernières modifications, les outils de développement lisent désormais la carte source, et affichent les noms des fonctions et l'emplacement source réels.

Problèmes Chromium: 1364601, 1364601

Nouveaux raccourcis clavier dans la console et Panneau "Sources"

Vous pouvez passer d'un onglet à l'autre dans le panneau Sources à l'aide des éléments suivants: Sous macOS, Fonction+Commande+Flèche vers le haut et Bas Sous Windows et Linux, Ctrl+Page précédente ou Page suivante

De plus, vous pouvez parcourir les suggestions de saisie semi-automatique à l'aide des touches Ctrl+N et Ctrl+P sous macOS, comme avec Emacs. Par exemple, vous pouvez saisir window. dans Console et utiliser ces raccourcis pour naviguer.

De plus, les outils de développement acceptent désormais la flèche vers la droite pour la saisie semi-automatique uniquement à la fin de la ligne. Par exemple, une boîte de dialogue de saisie semi-automatique s'affiche lorsque vous modifiez un élément au milieu du code. Lorsque vous appuyez sur la flèche vers la droite, vous voulez probablement placer le curseur à la position suivante plutôt que la saisie semi-automatique. Cette modification de l'expérience utilisateur correspond mieux à votre workflow de création.

Problème Chromium: 1167965, 1172535, 1371585. 1369503

Amélioration du débogage JavaScript

Voici quelques améliorations du débogage JavaScript dans cette version:

new.target est une méta-propriété qui vous permet de détecter si une fonction ou un constructeur a été appelé à l'aide du nouvel opérateur. Vous pouvez maintenant enregistrer new.target dans la console pour vérifier sa valeur lors du débogage. Auparavant, il renvoyait des erreurs lorsque vous saisissiez new.target.
Un objet WeakRef vous permet de conserver une référence faible à un autre objet, sans empêcher la récupération de mémoire sur cet objet. Les outils de développement affichent désormais un aperçu intégré de la valeur et évaluent la référence faible directement dans la console lors du débogage. Auparavant, vous deviez explicitement appeler la méthode "deref" pour les résoudre.
Correction de l'aperçu intégré pour une variable bloquée Auparavant, la valeur d'affichage était incorrecte.
Désobscurcir les noms de variables dans les fonctions Generator et async du volet Champ d'application du panneau Sources

Problèmes Chromium: 1267690, 1246863 1371322, 1311637

Points importants divers

Voici quelques correctifs importants dans cette version:

Prise en charge d'autres indications pour les propriétés CSS inactives dans le volet Styles (hauteur et largeur intégrées, propriétés Flex et grille). (1373597, 1178508, 1178508,1178508)
Correction de la mise en surbrillance de la syntaxe. Il ne fonctionnait pas correctement depuis la récente mise à niveau de l'éditeur de code dans les outils de développement. (1290182).
Capturez correctement les événements de changement d'entrée après un événement de floutage dans l'Enregistreur. (1378488).
Mise à jour du script de relecture Puppeteer lors de l'exportation pour améliorer le débogage dans l'Enregistreur (1351649).
Prise en charge de l'enregistrement et de la relecture dans l'Enregistreur pour le débogage à distance. (1185727).
Correction de l'analyse des noms de variables CSS spéciales dans var(). Auparavant, les outils de développement ne permettaient pas d'analyser des variables contenant des caractères d'échappement tels que var(--fo\ o). (1378992)

[Expérimental] Amélioration de l'expérience utilisateur dans la gestion des points d'arrêt

Le volet Breakpoints (Points d'arrêt) actuel fournit une petite aide visuelle pour superviser tous les points d'arrêt. De plus, les actions fréquemment utilisées sont masquées derrière le menu contextuel.

Cette refonte expérimentale de l'expérience utilisateur structure le volet Breakpoints (Points d'arrêt) et permet aux développeurs d'accéder rapidement aux fonctionnalités couramment utilisées, comme la modification et la suppression de points d'arrêt.

Voici quelques points à retenir:

Les deux options de pause se trouvent dans le volet Breakpoints (Points d'arrêt). Elles comportent des libellés textuels explicites qui rendent les options explicites.
Les points d'arrêt sont regroupés par fichier et classés par numéro de ligne ou de colonne. Vous pouvez les réduire et les développer**.
De nouvelles options permettent de supprimer et de modifier un point d'arrêt lorsque vous passez la souris dessus ou sur un nom de fichier dans le volet Breakpoint (Point d'arrêt).

Lisez l'intégralité des modifications dans notre document RFC (fermé) et laissez vos commentaires sur cette page.

Afficher le volet des points d'arrêt avant et après la refonte

Problèmes Chromium: 1346231, 1324904

[Expérimental] Impression automatique sur place

Le panneau Sources affiche désormais automatiquement les fichiers sources réduits au format joli. Pour annuler l'opération, cliquez sur le bouton Impression élégante { }.

Auparavant, le panneau Sources affichait par défaut la taille du contenu réduit. Il fallait cliquer sur le bouton « Pretty print » manuellement pour formater le contenu. De plus, le contenu correctement imprimé n'était pas affiché dans le même fichier, mais dans un autre onglet ::formatted.

Affichez un fichier réduit avant et après l'impression élégante automatique sur place.

Problème Chromium: 1164184

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