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

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

Jecelyn Yeen

Enregistreur: copier en tant qu'options pour les pas, rediffusion sur la page et menu contextuel de l'étape

Nouvelles options de copie dans le panneau "Enregistreur"

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

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 relancer la lecture de l'encart !

Vous pouvez également effectuer un clic droit sur une étape et la copier dans le presse-papiers dans le panneau *Recorder (Enregistreur) au lieu d'exporter l'ensemble du parcours utilisateur. Cette fonctionnalité est également compatible avec les extensions. Par exemple, essayez de copier une étape sous forme de script Nightwatch Test. Grâce à cette fonctionnalité, vous pouvez facilement mettre à jour n'importe quel script existant.

Auparavant, vous ne pouviez accéder au menu des étapes qu'à l'aide du 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 réels des fonctions dans les enregistrements des 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.

La comparaison avant/après des noms de fonctions s'affiche dans le panneau "Performances".

Dans cet exemple, la taille d'un fichier source est réduite pendant la production. Par exemple, dans cette démonstration, la fonction sayHi est réduite à n, tandis que la fonction takeABreak est réduite à o.

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 de fonctions réduits. Le débogage était donc plus difficile.

Avec les dernières modifications, les outils de développement peuvent désormais lire le mappage source et afficher le nom réel des fonctions et leur emplacement source.

Problèmes liés à 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 commandes suivantes : Sous macOS, Fonction + Commande + Flèche vers le haut et flèche vers le bas Sous Windows et Linux, Ctrl + Page précédente ou Bas

De plus, vous pouvez parcourir les suggestions de saisie semi-automatique en appuyant sur Ctrl+N et Ctrl+P sous macOS, comme pour 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 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 flèche vers la droite, il est très probable que vous souhaitiez placer le curseur sur la position suivante au lieu de passer par la saisie semi-automatique. Cette modification de l'expérience utilisateur est mieux adaptée à votre workflow de création.

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

Amélioration du débogage JavaScript

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 maintenant consigner 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 l'empêcher d'être récupéré. Les outils de développement affichent désormais un aperçu intégré pour la valeur et évaluent la référence faible directement dans la console lors du débogage. Auparavant, vous deviez appeler explicitement la méthode "deref" pour résoudre ce problème.
Correction de l'aperçu intégré pour la variable bloqué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, 1311637

Points forts divers

Voici quelques correctifs importants dans cette version:

Prise en charge de davantage d'indices 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. Elle ne fonctionnait pas correctement depuis la récente mise à niveau de l'éditeur de code dans les outils de développement. (1290182).
Capturer 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 l'expérience de débogage dans Enregistreur. (1351649).
Permet d'enregistrer et de relire 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 les variables contenant des caractères échappés tels que var(--fo\ o). , (1378992)

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

Le volet Breakpoints (Points d'arrêt) actuel vous permet de superviser tous les points d'arrêt. En plus de cela, les actions fréquemment utilisées sont dissimulées derrière le menu contextuel.

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

Voici quelques points clés:

Les deux options de pause se trouvent dans le volet Breakpoints (Points d'arrêt). Elles comportent des étiquettes de texte 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 réduire et les développer**.
Nouvelles options permettant de supprimer et de modifier un point d'arrêt lorsque vous pointez sur le point d'arrêt ou sur un nom de fichier dans le volet Breakpoint (Point d'arrêt).

Consultez l'intégralité des modifications dans notre document RFC (fermé) et laissez vos commentaires ici.

Afficher le volet "Breakpoint" (Point d'arrêt) avant et après la refonte.

Problèmes liés à Chromium: 1346231, 1324904

[Expérimental] Impression élégante et automatique sur place

Désormais, le panneau Sources imprime automatiquement les fichiers sources minimes. Vous pouvez cliquer sur le bouton Impression élégante { } pour annuler l'opération.

Auparavant, le panneau Sources affichait le contenu réduit par défaut. Vous deviez cliquer manuellement sur le bouton d'impression pour formater le contenu. En plus de cela, le contenu correctement imprimé ne s'affichait pas dans le même fichier, mais dans un autre onglet ::formatted.

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

Problème Chromium: 1164184

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.