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

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

Jecelyn Yeen

Chrome 100

Voici la 100e version de Chrome ! Les outils pour les développeurs Chrome continueront de fournir aux développeurs des outils fiables pour créer sur le Web. Prenez le temps de cliquer dans l'onglet Nouveautés pour célébrer les étapes franchies.

Comme d'habitude, vous pouvez regarder la dernière vidéo What's New in DevTools (Nouveautés des outils de développement) en cliquant sur l'image.

Afficher et modifier les @prises en charge des règles dans le volet "Styles"

Vous pouvez désormais afficher et modifier les règles at @supports CSS dans le volet Styles. Ces modifications permettent de tester plus facilement l'attribut at-rules en temps réel. Ouvrez cette page de démonstration, inspect l'élément <div class=”box”> et affichez les règles at @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 liés à Chromium: 1222574, 1222573

Améliorations apportées au panneau de l'Enregistreur

Prendre en charge les sélecteurs courants par défaut

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

id-test-données
test de 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 dans l'automatisation des tests.

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

Étant donné que data-testid est défini pour l'élément d'adresse e-mail, il est automatiquement utilisé comme sélecteur au lieu des attributs id ou class.

Prendre en charge 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. Saisissez 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 la classe/de la fonction lorsque l'utilisateur pointe dessus

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, seul le nom de la fonction et un lien vers son emplacement dans le code source étaient affichés.

Prévisualiser les propriétés de la classe/de la fonction lorsque l'utilisateur pointe dessus

Problème Chromium: 1049947

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

L'enregistrement des performances affiche désormais une nouvelle catégorie de frames "Images partiellement présentées" dans la chronologie Frames.

Auparavant, la timeline Frames affichait toutes les images dont le thread principal décalé était retardé en tant que "frames abandonnés". Toutefois, il existe des cas où certains frames peuvent toujours produire des mises à jour visuelles (par exemple, un défilement) générées par le thread compositeur.

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

L'objectif du nouveau "frames partiellement présentés" est d'indiquer de manière plus intuitive que même si certains contenus ne sont pas présentés en temps opportun dans le frame, le problème n'est pas au point de bloquer complètement les mises à jour visuelles.

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

Problème Chromium: 1261130

Points forts divers

Voici quelques correctifs importants dans cette version:

Mise à jour des chaînes user-agent iPhone pour les appareils émulés. Toutes les versions d'iPhone ultérieures à la version 5 disposent d'une chaîne user-agent avec iPhone OS 13_2_3. (1289553).
Vous pouvez maintenant enregistrer directement un 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 la carte source. Auparavant, le panneau Sources affichait des noms de variables de champ d'application réduits même si le mappage source était 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 gênait le débogage. (1294422).

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.