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

Jecelyn Yeen

Enregistreur : options "Copier en tant que" pour les étapes, relecture sur la page, menu contextuel de l'étape

Ouvrez un flux utilisateur existant dans l'enregistreur. Auparavant, lorsque vous relanciez le flux utilisateur, les outils de développement commençaient toujours par accéder à la page ou l'actualiser.

Avec les dernières mises à jour, l'enregistreur affiche l'étape de navigation séparément. Vous pouvez effectuer un clic droit et le supprimer pour effectuer une relecture sur la page.

En dehors de cela, vous pouvez effectuer un clic droit sur une étape et la copier dans le presse-papiers dans le panneau Enregistreur au lieu d'exporter l'intégralité du parcours utilisateur. Il fonctionne également avec les extensions. Par exemple, essayez de copier une étape en tant que script Nightwatch Test. Cette fonctionnalité vous permet de mettre à jour facilement n'importe quel script existant.

Auparavant, vous ne pouviez accéder au menu des étapes que via le bouton à trois points. Vous pouvez désormais 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 de fonctions réels dans les enregistrements de performances

Le panneau Performances affiche désormais les noms de fonctions réels et leurs sources dans la trace s'il existe une carte source.

Dans cet exemple, un fichier source est réduit pendant la production. Par exemple, la fonction sayHi est réduite en n et la fonction takeABreak est réduite en o dans cette démonstration.

Auparavant, lorsque vous enregistriez une trace dans le panneau Performances, elle n'affichait que les noms de fonctions minimisés. Cela rendait le débogage plus difficile.

Grâce aux dernières modifications, les outils de développement lisent désormais la carte source et affichent les noms de fonction et l'emplacement source réels.

Problèmes Chromium : 1364601, 1364601

Nouveaux raccourcis clavier dans la console et le panneau "Sources"

Vous pouvez passer d'un onglet à l'autre dans le panneau Sources en utilisant les raccourcis suivants : Sur macOS : Fonction+Commande+Flèche vers le haut ou Flèche vers le bas Sur Windows et Linux : Ctrl+Page précédente ou Page suivante

De plus, vous pouvez parcourir les suggestions de saisie semi-automatique avec Ctrl+N et Ctrl+P sur macOS, comme dans 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 en fin de 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 touche Flèche vers la droite, vous souhaitez probablement définir le curseur sur la position suivante au lieu de compléter automatiquement le texte. Cette modification de l'expérience utilisateur s'aligne mieux sur votre workflow de création.

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

Débogage JavaScript amélioré

Voici quelques améliorations apportées au 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 désormais consigner new.target dans la console pour vérifier sa valeur lors du débogage. Auparavant, des erreurs s'affichaient lorsque vous saisissiez new.target.
• Un objet WeakRef vous permet de conserver une référence faible à un autre objet, sans empêcher cet objet d'être collecté par le garbage collector. 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 appeler explicitement "deref" pour le résoudre.
• Aperçu intégré fixe pour la variable masquée. Auparavant, la valeur d'affichage était incorrecte.
• Démasquez les noms de variables dans les fonctions Generator et async du volet Portée du panneau Sources.

Problèmes Chromium : 1267690, 1246863, 1371322, 1311637

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

• Prise en charge d'un plus grand nombre d'indices pour les propriétés CSS inactives dans le volet Styles : hauteur et largeur intégrées, propriétés flex et grid. (1373597, 1178508, 1178508,1178508)
• Correction de la coloration syntaxique. 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 modification de saisie après l'événement "on blur" dans l'enregistreur. (1378488)
• Mise à jour du script de relecture Puppeteer lors de l'exportation pour une meilleure expérience de 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 n'étaient pas compatibles avec l'analyse des variables comportant des caractères d'échappement comme var(--fo\ o). , (1378992)

[Expérimental] Expérience utilisateur améliorée pour la gestion des points d'arrêt

Le volet Points d'arrêt actuel ne fournit que peu d'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'UX structure le volet Points d'arrêt et permet aux développeurs d'accéder rapidement aux fonctionnalités courantes, comme la modification et la suppression des points d'arrêt.

Voici quelques points forts :

• Les deux options de mise en veille se trouvent dans le volet Points d'arrêt. Elles comportent des libellés textuels explicites qui rendent les options compréhensibles.
• 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.**
• Nouvelles options permettant de supprimer et de modifier un point d'arrêt lorsque vous pointez dessus ou sur un nom de fichier dans le volet Point d'arrêt.

Pour en savoir plus sur les modifications, consultez notre RFC (fermée) et laissez-nous vos commentaires ici.

Problèmes Chromium : 1346231, 1324904

[Expérimental] Impression élégante directe automatique

Le panneau Sources applique désormais automatiquement l'impression élégante aux fichiers sources minimisés. Pour annuler cette action, cliquez sur le bouton Mise en forme { }.

Auparavant, le panneau Sources affichait le contenu réduit par défaut. Vous deviez cliquer manuellement sur le bouton "Pretty print" pour mettre en forme le contenu. De plus, le contenu mis en forme n'était pas affiché dans le même fichier, mais dans un autre onglet ::formatted.

Problème Chromium : 1164184

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

• 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 de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

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.