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

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

Jecelyn Yeen

Suppression du panneau des performances lors de l'actualisation

Le panneau Performance efface à présent la capture d'écran et la trace lorsque vous cliquez sur le bouton Start profiling and reload page (Commencer le profilage et actualiser la page).

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

Le panneau des performances est effacé lors de l'actualisation.

Problèmes Chromium: 1101268, 1382044

Mises à jour de l'Enregistreur

Afficher et mettre en surbrillance le code de votre flux utilisateur dans l'Enregistreur

L'Enregistreur propose désormais une vue de code fractionné, qui facilite la visualisation du code de votre parcours utilisateur. Pour accéder à la vue Code, ouvrez un flux 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, par exemple avec 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 ne capturer que les sélecteurs que vous souhaitez dans vos parcours utilisateur.

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

Problème Chromium: 1384431

Modifier le parcours utilisateur pendant l'enregistrement

L'Enregistreur permet désormais de monter des vidéos pendant l'enregistrement, ce qui vous permet d'apporter des modifications en temps réel. Vous n'avez plus besoin d'arrêter l'enregistrement pour effectuer des réglages.

Montage pendant l'enregistrement du parcours utilisateur.

Problème Chromium: 1381971

Impression élégante automatique sur place

Le panneau Sources affiche désormais automatiquement l'impression élégante des fichiers sources réduits. Vous pouvez annuler l'opération en cliquant sur le bouton Pretty print (impression élégante) { }.

Auparavant, le panneau Sources affichait par défaut la taille du contenu réduit. Pour formater le contenu, il fallait cliquer sur le bouton « impression élégante » manuellement. De plus, le contenu assez imprimé n'était pas affiché dans le même onglet, mais dans un autre onglet ::formatted.

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

Problèmes Chromium: 1383453, 1382752, 1382397

Mise en surbrillance de la syntaxe améliorée et aperçu intégré pour Vue, SCSS, etc.

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

Mise en évidence de la syntaxe dans Vue.

En outre, 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é de Vue.

Par ailleurs, 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, 1152106

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

Les outils de développement améliorent la saisie semi-automatique en appliquant les modifications suivantes:

Tab est toujours utilisé pour la saisie semi-automatique.
Le comportement de Arrow right et de Enter varie en fonction du contexte.
La saisie semi-automatique fonctionne de manière cohérente dans tous 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 légère bordure en pointillés autour de l'option supérieure pour indiquer que la navigation n'a pas encore commencé.
La console exécute la ligne lorsque vous appuyez sur Enter. Auparavant, il complétait automatiquement la ligne avec la meilleure suggestion. Pour la saisie semi-automatique, appuyez sur Tab ou Arrow Right.
La console met en surbrillance l'option sélectionnée lorsque vous parcourez la liste de suggestions à l'aide des raccourcis Arrow up et Arrow down.
Pour utiliser la saisie semi-automatique avec l'option sélectionnée pendant la navigation, utilisez les touches du clavier Tab, Enter ou Arrow Right.
Lors de la modification au milieu du code, 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.

Problèmes Chromium: 1399436, 1276960

Points importants divers

Voici quelques correctifs importants dans cette version:

Un problème de régression dans les outils de développement ne s'est pas arrêté au niveau de l'instruction debugger dans les scripts intégrés. (1385374).
Un nouveau paramètre de la 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éveloppez les messages console.trace() par défaut. (1139616).
Le volet Extraits du panneau Sources offre une fonctionnalité de saisie semi-automatique améliorée, semblable à la console. (772949).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.