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

Jecelyn Yeen

Effacer le panneau "Performances" lors du rechargement

Le panneau Performances efface désormais la capture d'écran et la trace lorsque vous cliquez sur le bouton Démarrer le profilage et actualiser la page.

Auparavant, le panneau Performances affichait une timeline avec des captures d'écran des enregistrements précédents. Il était donc difficile de savoir quand la mesure réelle avait commencé. Le panneau accède désormais toujours à la page about:blank en premier pour garantir que l'enregistrement commence par une trace vide. Cela correspond au panneau Informations sur les performances, qui faisait déjà la même chose.

Effacement du panneau des performances lors du rechargement.

Problèmes Chromium : 1101268, 1382044

Nouveautés de l'Enregistreur

Afficher et mettre en surbrillance le code de votre parcours utilisateur dans l'enregistreur

L'enregistreur propose désormais une vue de code fractionnée, ce qui facilite la visualisation du code de votre parcours utilisateur. Pour accéder à la vue du code, ouvrez un parcours utilisateur et cliquez sur Afficher le code.

L'enregistreur met en surbrillance le code correspondant lorsque vous pointez sur chaque étape à gauche, ce qui vous permet de suivre facilement votre flux. Vous pouvez modifier le format du code à l'aide du menu déroulant, qui vous permet de passer d'un format à un autre, comme le script Nightwatch Test.

Vue Code dans l'enregistreur.

Problème Chromium : 1385489

Personnaliser les types de sélecteurs d'un enregistrement

Vous pouvez créer des enregistrements qui ne capturent que les types de sélecteurs qui vous intéressent. Grâce à la nouvelle option permettant de personnaliser les types de sélecteurs lors de la création d'un enregistrement, vous pouvez inclure ou exclure des sélecteurs tels que XPath, ce qui vous permet de n'inclure que les sélecteurs souhaités dans vos parcours utilisateur.

Nouvelle option permettant de personnaliser les types de sélecteurs.

Problème Chromium : 1384431

Modifier un parcours utilisateur pendant l'enregistrement

L'Enregistreur vous permet désormais de modifier vos enregistrements en temps réel. Vous n'avez plus besoin d'arrêter l'enregistrement pour effectuer des ajustements.

Modification pendant l'enregistrement du parcours utilisateur.

Problème Chromium : 1381971

Impression élégante directe automatique

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

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

Affiche un fichier minimisé avant et après l'impression élégante automatique sur place.

Problèmes Chromium : 1383453, 1382752, 1382397

Meilleure mise en surbrillance de la syntaxe et aperçu intégré pour Vue, SCSS et plus

Le panneau Sources a amélioré la mise en surbrillance de la syntaxe pour plusieurs formats de fichiers largement utilisés. Vous pouvez ainsi lire le code plus facilement et reconnaître sa structure, y compris Vue, JSX, Dart, LESS, SCSS, SASS et CSS intégré.

Coloration syntaxique dans Vue.

De plus, les outils de développement ont également amélioré l'aperçu intégré pour Vue, HTML intégré et TSX. Pointez sur une variable pour prévisualiser sa valeur.

Aperçu intégré pour Vue.

En outre, les outils de développement affichent désormais la carte source d'une feuille de style dans le panneau Sources. Par exemple, lorsque vous ouvrez un fichier SCSS, vous pouvez accéder au fichier CSS associé en cliquant sur le lien de la carte source.

Lien vers la carte source pour SASS.

Problèmes Chromium : 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Saisie semi-automatique ergonomique et cohérente dans la console

Les outils de développement améliorent l'expérience de saisie semi-automatique en implémentant les modifications suivantes :

  • Tab est toujours utilisé pour la saisie semi-automatique.
  • Le comportement de Arrow right et Enter varie en fonction du contexte.
  • L'expérience d'autocomplétion est cohérente dans tous les éditeurs de texte, ainsi que dans les panneaux Console, Sources et Éléments.

Par exemple, voici ce qui se passe lorsque vous saisissez cons dans la console :

  • La console affiche une liste de suggestions de saisie semi-automatique. Une bordure en pointillés discrète entoure l'option supérieure, indiquant que la navigation n'a pas encore commencé. Bordure en pointillés autour de la première option de saisie semi-automatique.

  • La console exécute la ligne lorsque vous appuyez sur Enter. Auparavant, la ligne était automatiquement complétée avec la suggestion la plus pertinente. Pour effectuer une saisie semi-automatique, appuyez sur Tab ou Arrow Right. Exécute la ligne sur Entrée.

  • La console met en évidence l'option sélectionnée lorsque vous parcourez la liste des suggestions à l'aide des raccourcis Arrow up et Arrow down. Mise en évidence pendant la navigation vers des suggestions.

  • Pour effectuer une saisie semi-automatique avec l'option sélectionnée pendant la navigation, utilisez les touches du clavier Tab, Enter ou Arrow Right. Saisie semi-automatique avec l'option sélectionnée pendant la navigation.

  • Lorsque vous modifiez du code au milieu, par exemple lorsque le curseur se trouve entre n et s, utilisez Tab pour l'autocomplétion, Enter pour exécuter la ligne et Arrow Right pour déplacer le curseur vers l'avant. Modification au milieu du code.

Problèmes Chromium : 1399436, 1276960

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

  • Un problème de régression dans les outils de développement, qui empêchait l'arrêt à l'instruction debugger dans les scripts intégrés, a été résolu. (1385374)
  • Un nouveau paramètre Console vous permet de développer ou de réduire les messages console.trace() par défaut. Activez ou désactivez les paramètres via Paramètres > Préférences > Développer les messages console.trace() par défaut. (1139616)
  • Le volet Extraits du panneau Sources est compatible avec la saisie semi-automatique améliorée, comme dans la console. (772949) Saisie semi-automatique dans les extraits.

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.

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.