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

Jecelyn Yeen

Enregistreur: options de copie pour les étapes, lecture sur la page, menu contextuel de l'étape

Ouvrez un parcours utilisateur existant dans l'enregistreur. Auparavant, lorsque vous reproduisiez le parcours utilisateur, les outils de développement commenç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 effectuer un clic droit et le supprimer pour effectuer une relecture sur la page.

En outre, vous pouvez faire un clic droit sur une étape et la copier dans le presse-papiers dans le panneau *Enregistreur au lieu d'exporter l'ensemble du parcours utilisateur. Il 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 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 fonction réels dans les enregistrements des performances

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

Dans cet exemple, un fichier source est minifié lors de la production. Par exemple, la fonction sayHi est minifiée en n et la fonction takeABreak en o dans cette démo.

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

Avec les dernières modifications, DevTools lit désormais la carte source et affiche les noms de fonction et l'emplacement de la source réels.

Problèmes Chromium: 1364601, 1364601

Nouveaux raccourcis clavier dans le panneau "Console et sources"

Vous pouvez passer d'un onglet à l'autre dans le panneau Sources à l'aide des combinaisons suivantes : Sur macOS, Fonction + Commande + Flèche vers le haut et bas Sur Windows et Linux, Ctrl + Page Haut ou Bas

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, DevTools n'accepte désormais la flèche vers la droite pour la saisie semi-automatique qu'à la fin de la ligne. Par exemple, une boîte de dialogue de saisie semi-automatique s'affiche lorsque vous modifiez quelque chose au milieu du code. Lorsque vous appuyez sur la touche Flèche vers la droite, vous souhaitez probablement placer le curseur à la position suivante au lieu d'utiliser la saisie semi-automatique. Cette modification de l'expérience utilisateur s'adapte mieux à votre workflow de création.

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

Amélioration du débogage JavaScript

Voici quelques-unes des 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 étaient renvoyées lorsque vous saisissez new.target.
• Un objet WeakRef vous permet de conserver une référence faible à un autre objet, sans empêcher la collecte des déchets de cet objet. DevTools affiche désormais un aperçu intégré de la valeur et évalue la référence faible directement dans la console lors du débogage. Auparavant, vous deviez appeler explicitement "deref" dessus pour résoudre le problème.
• Correction de l'aperçu intégré pour la variable ombragée. Auparavant, la valeur d'affichage était incorrecte.
• Désobscurcir les noms de variables dans les fonctions Generator et async dans le volet Champ d'application du panneau Sources.

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

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

• Prise en charge de plus d'astuces 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 coloration syntaxique. Il ne fonctionnait pas correctement depuis la récente mise à niveau de l'éditeur de code dans DevTools. (1290182)
• Capturez correctement les événements de modification de saisie après l'événement de floutage dans l'enregistreur. (1378488)
• Mise à jour du script de relecture Puppeteer lors de l'exportation pour améliorer l'expérience de débogage dans l'Enregistreur. (1351649)
• Prise en charge de l'enregistrement et de la lecture dans l'Enregistreur pour le débogage à distance. (1185727)
• Correction de l'analyse des noms de variables CSS spéciaux dans var(). Auparavant, DevTools n'était pas compatible avec l'analyse des variables avec des caractères échappés tels que var(--fo\ o). , (1378992)

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

Le volet Points d'arrêt actuel offre 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'expérience utilisateur apporte de la structure au volet 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 des points d'arrêt.

Voici quelques-uns des points forts:

• Les deux options de suspension se trouvent dans le volet 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, classés par numéro de ligne ou de colonne. Vous pouvez les développer et les réduire.**
• Nouvelles options pour supprimer et 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 (clôturée) et envoyez vos commentaires sur cette page.

Problèmes Chromium: 1346231, 1324904

[Expérimental] Impression élégante automatique en place

Le panneau Sources affiche désormais automatiquement les fichiers sources minimisés. Vous pouvez cliquer sur le bouton Affichage soigné { } pour annuler l'opération.

Auparavant, le panneau Sources affichait le contenu minifié par défaut. Vous deviez cliquer manuellement sur le bouton d'affichage soigné 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 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 é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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.