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 fois 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 chronologie avec des captures d'écran d'enregistrements précédents. Il était donc difficile de voir quand la mesure réelle avait commencé. Le panneau accède désormais toujours d'abord à la page about:blank pour garantir que l'enregistrement commence par une trace vide. Cela correspond au panneau Informations sur les performances, qui fonctionne déjà de la même manière.

Effacement du panneau "Performances" lors du rechargement.

Problèmes Chromium: 1101268, 1382044

Informations sur l'Enregistreur

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

L'enregistreur propose désormais une vue du code fractionné, ce qui facilite la visualisation du code de votre parcours utilisateur. Pour accéder à la vue du code, ouvrez un parcours utilisateur, puis 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 de code à l'aide du menu déroulant, qui vous permet de basculer entre différents formats, tels que le script Nightwatch Test.

Vue du 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 de personnalisation des 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 ne capturer que les sélecteurs de votre choix dans vos parcours utilisateur.

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

Problème Chromium: 1384431

Modifier le parcours utilisateur pendant l'enregistrement

L'Enregistreur permet désormais de modifier les vidéos pendant l'enregistrement, ce qui vous permet de faire des changements en temps réel. Vous n'avez plus besoin de mettre fin à l'enregistrement pour effectuer des ajustements.

Modification pendant l'enregistrement du parcours utilisateur

Problème Chromium: 1381971

Impression élégante automatique sur place

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

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

Affichez un fichier minimisé avant et après l'application automatique de l'impression élégante.

Problèmes Chromium: 1383453, 1382752, 1382397

Meilleure mise en surbrillance de la syntaxe et meilleure prévisualisation en ligne pour Vue, SCSS et plus

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

Mise en surbrillance de la syntaxe dans Vue.

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

Autocomplétion ergonomique et cohérente dans la console

DevTools améliore 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 de saisie semi-automatique est cohérente entre les éditeurs de texte, 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, avec une bordure en pointillés autour de l'option supérieure pour indiquer 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 par la première suggestion. Pour effectuer une saisie semi-automatique, appuyez sur Tab ou Arrow Right. Exécute la ligne à l'appui sur la touche Entrée.

  • La console met en surbrillance l'option sélectionnée lorsque vous parcourez la liste des suggestions à l'aide des raccourcis Arrow up et Arrow down. Points intéressants pendant la navigation dans les suggestions.

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

  • Lorsque vous modifiez le code au milieu, par exemple lorsque le curseur se trouve entre n et s, utilisez Tab pour la saisie semi-automatique, 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 forts

Voici quelques corrections importantes apportées dans cette version:

  • Un problème de régression dans DevTools, qui empêchait l'arrêt à l'instruction debugger dans les scripts intégrés, a été résolu. (1385374)
  • Nouveau paramètre Console qui vous permet d'étendre ou de réduire les messages console.trace() par défaut. Pour activer ou désactiver les paramètres, accédez à 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 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.

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.