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

Jecelyn Yeen

Chrome 100

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

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

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

Vous pouvez désormais afficher et modifier les règles CSS @supports dans le volet Styles. Ces modifications facilitent les tests des règles at en temps réel. Ouvrez cette page de démonstration, inspectez l'élément <div class=”box”>, puis affichez les règles de remplacement @supports dans le volet Styles. Cliquez sur la déclaration de la règle pour la modifier.

Afficher et modifier les règles @supports at

Problèmes Chromium: 1222574, 1222573

Améliorations apportées au panneau "Enregistreur"

Prise en charge des sélecteurs courants par défaut

Lors de la détermination d'un sélecteur unique lors de l'enregistrement, le panneau Enregistreur privilégie désormais automatiquement les éléments avec les attributs suivants:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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 l'élément d'adresse e-mail est défini sur data-testid, il est utilisé automatiquement comme sélecteur au lieu des attributs id ou class.

Prise en charge des sélecteurs courants par défaut

Personnaliser le sélecteur de l'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. Lancez un nouvel enregistrement et saisissez data-automate comme attribut sélecteur. Saisissez une adresse e-mail et observez la valeur du sélecteur ([data-automate=email-address]).

Personnaliser le sélecteur de l&#39;enregistrement

Résultat de la sélection du 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

Aperçu des propriétés de classe/fonction en pointant dessus

Vous pouvez désormais pointer sur une classe ou une fonction dans le panneau Sources pendant le débogage 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.

Aperçu des propriétés de classe/fonction en pointant dessus

Problème Chromium: 1049947

Frames partiellement présentés dans le panneau "Performances"

L'enregistrement des performances affiche désormais une nouvelle catégorie de frames "Frames partiellement présentés" dans la timeline Frames (Cadres).

Auparavant, la timeline Frames (Cadres) affichait les frames avec un travail de thread principal retardé sous la forme de "frames abandonnés". Toutefois, dans certains cas, certaines images peuvent toujours produire des mises à jour visuelles (par exemple, le défilement) gérées par le thread du compositeur.

Cela crée de la confusion chez les utilisateurs, car les captures d'écran de ces "images perdues" reflètent toujours les mises à jour visuelles.

La nouvelle alerte "Cadres partiellement présentés" vise à indiquer plus intuitivement que certains contenus ne sont pas présentés à temps dans le cadre, mais que le problème n'est pas suffisamment grave pour bloquer complètement les mises à jour visuelles.

Frames partiellement présentés dans le panneau &quot;Performances&quot;

Problème Chromium: 1261130

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

  • Mise à jour des chaînes user-agent iPhone pour les appareils émulés. Toutes les versions d'iPhone à partir de la version 5 disposent d'une chaîne user-agent avec iPhone OS 13_2_3. (1289553)
  • Vous pouvez désormais 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 portée lors du débogage avec la carte source. Auparavant, le panneau Sources affichait les noms de variables de portée minimisés, même si un 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 restaurée correctement, ce qui causait des problèmes de débogage. (1294422)

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.