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

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

Jecelyn Yeen

Chrome 100

Vive la 100e version de Chrome ! Les outils pour les développeurs Chrome continueront à fournir aux développeurs des outils fiables pour créer des applications sur le Web. Prenez quelques instants pour cliquer sur l'onglet Nouveautés pour célébrer ces étapes importantes.

Comme d'habitude, vous pouvez regarder la dernière vidéo sur les nouveautés dans les outils de développement en cliquant sur l'image.

Afficher et modifier les @supports au niveau des règles dans le volet "Styles"

Vous pouvez désormais afficher et modifier les règles "at-rules" de CSS @supports dans le volet Styles. Il est ainsi plus facile de tester les règles @ en temps réel. Ouvrez cette page de démonstration, inspect l'élément <div class=”box”> et affichez les règles "at-rules" @supports dans le volet Styles. Cliquez sur la déclaration de la règle pour la modifier.

Afficher et modifier les @supports au niveau des règles

Problèmes Chromium: 1222574, 1222573

Améliorations apportées au panneau "Enregistreur"

Compatibilité avec les sélecteurs courants par défaut

Lorsque vous déterminez un sélecteur unique lors de l'enregistrement, le panneau Recorder (Enregistreur) privilégie désormais automatiquement les éléments avec les attributs suivants:

id-données-test
test-données
data-qa
data-cy
data-test-id
data-qa-id
test-de-données

Les attributs ci-dessus sont des sélecteurs couramment utilisés pour l'automatisation des tests.

Par exemple, démarrez un nouvel enregistrement avec cette page de démonstration. Renseignez une adresse e-mail et observez la valeur du sélecteur.

Comme data-testid est défini pour l'élément e-mail, il est utilisé automatiquement comme sélecteur à la place des attributs id ou class.

Compatibilité avec les sélecteurs courants par défaut

Personnaliser le sélecteur d'enregistrement

Vous pouvez personnaliser le sélecteur d'un enregistrement si vous n'utilisez pas les sélecteurs courants.

Par exemple, cette page de démonstration utilise l'attribut data-automate comme sélecteur. Démarrez un nouvel enregistrement et saisissez data-automate comme attribut de sélecteur. Renseignez une adresse e-mail et observez la valeur du sélecteur ([data-automate=email-address]).

Personnaliser le sélecteur d'enregistrement

Résultat de la sélection d'un sélecteur personnalisé

Renommer un enregistrement

Vous pouvez désormais renommer un enregistrement dans le panneau Enregistreur à l'aide du bouton de modification (icône en forme de crayon) à côté du titre de l'enregistrement.

Renommer un enregistrement

Prévisualiser les propriétés de classe/fonction par survol de la souris

Lors du débogage, vous pouvez désormais pointer sur une classe ou une fonction dans le panneau Sources pour prévisualiser ses propriétés. Auparavant, il n'affichait que le nom de la fonction et un lien vers son emplacement dans le code source.

Prévisualiser les propriétés de classe/fonction par survol de la souris

Problème Chromium: 1049947

Images partiellement présentées dans le panneau "Performances"

L'enregistrement des performances affiche désormais une nouvelle catégorie d'images "Images partiellement présentées" dans la timeline Images.

Auparavant, la chronologie Frames visualise toutes les frames avec une tâche du thread principal retardée en tant que "frames supprimés". Toutefois, dans certains cas, certaines images peuvent encore produire des mises à jour visuelles (comme un défilement) générées par le thread du compositeur.

Cela peut prêter à confusion pour l'utilisateur, car les captures d'écran de ces "frames supprimés" reflètent toujours des mises à jour visuelles.

La nouvelle fonctionnalité "Cadres partiellement présentés" vise à indiquer de manière plus intuitive que certains contenus ne sont pas présentés en temps voulu dans le cadre, mais que le problème n'est pas si grave qu'il bloque complètement les mises à jour visuelles.

Images partiellement présentées dans le panneau "Performances"

Problème Chromium: 1261130

Points importants divers

Voici quelques correctifs importants dans cette version:

Mise à jour des chaînes de user-agents iPhone pour les appareils émulés. Toutes les versions d'iPhone ultérieures à la version 5 disposent d'une chaîne de user-agent avec l'iPhone OS 13_2_3. (1289553).
Vous pouvez désormais enregistrer directement l'extrait en tant que fichier JavaScript. Auparavant, vous deviez ajouter manuellement l'extension de fichier .js. (1137218).
Le panneau Sources affiche désormais correctement les noms des variables de champ d'application lors du débogage avec le mappage source. Auparavant, le panneau Sources affichait les noms des variables de champ d'application réduits, bien que le mappage source ait été fourni. (1294682).
Le panneau Sources restaure désormais correctement la position de défilement lors du chargement de la page. Auparavant, la position n'était pas correctement restaurée, ce qui nuisait au débogage. (1294422).

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.