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

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

Jecelyn Yeen

Suppression du panneau "Performances" lors de l'actualisation

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

Auparavant, le panneau Performances affichait une chronologie avec des captures d'écran provenant des enregistrements précédents. Il était donc difficile de déterminer à quel moment la mesure a commencé. Désormais, le panneau accède toujours en premier à la page about:blank pour s'assurer que l'enregistrement commence par une trace vide. comme dans le panneau Insights sur les performances, qui a déjà fait de même.

Suppression du panneau "Performances" 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é, ce qui facilite la visualisation du code de votre parcours utilisateur. Pour accéder à la vue Code, ouvrez un flux utilisateur et cliquez sur Show Code (Afficher le code).

L'Enregistreur met en surbrillance le code correspondant lorsque vous passez la souris 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, ce qui vous permet de passer d'un format à l'autre, par exemple pour 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. La nouvelle option permettant de personnaliser les types de sélecteurs lors de la création d'un enregistrement vous permet d'inclure ou d'exclure des sélecteurs tels que XPath, ce qui vous permet de ne capturer 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 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 ajustements.

Montage pendant l'enregistrement du flux utilisateur.

Problème Chromium: 1381971

Impression élégante sur place et automatique

Le panneau Sources affiche désormais automatiquement les fichiers sources réduits sur place. 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. Pour formater le contenu, vous deviez cliquer manuellement sur le bouton d'impression. En plus de cela, le contenu correctement imprimé ne s'affichait pas dans le même onglet, mais dans un autre onglet ::formatted.

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

Problèmes Chromium: 1383453, 1382752, 1382397

Amélioration de la mise en surbrillance de la syntaxe et de l'aperçu intégré pour Vue, SCSS, etc.

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

Mise en surbrillance de la syntaxe dans Vue.

En outre, les outils de développement ont également amélioré l'aperçu intégré de Vue, HTML intégré et TSX. Pointez sur une variable pour afficher un aperçu de 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 "Sourcemap".

Lien vers la carte source pour SASS.

Problèmes liés à Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 13952106

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 apportant les modifications suivantes:

Tab est toujours utilisé pour la saisie semi-automatique.
Le comportement de Arrow right et de Enter varie selon le contexte.
La saisie semi-automatique est homogène 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é autour de l'option supérieure, indiquant 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 évidence 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 d'une 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 liés à Chromium: 1399436, 1276960

Points forts divers

Voici quelques correctifs importants dans cette version:

Un problème de régression a été résolu dans les outils de développement. Il empêchait de s'arrêter au niveau de l'instruction debugger dans les scripts intégrés. (1385374).
Nouveau paramètre de la console qui vous permet de développer ou de réduire les messages console.trace() par défaut. Modifiez 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)

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.