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 des outils fiables aux développeurs pour créer des applications sur le Web. Prenez le temps de parcourir l'onglet Nouveautés pour célébrer les étapes franchies.

Comme d'habitude, vous pouvez regarder la dernière vidéo sur les nouveautés des outils de développement 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 @ @supports CSS dans le volet Styles. Ces modifications permettent d'expérimenter plus facilement les règles @ en temps réel. Ouvrez cette page de démonstration, inspectez l'élément <div class=”box”>, puis affichez les règles @supports dans le volet Styles. Cliquez sur la déclaration de la règle pour la modifier.

Afficher et modifier les règles @supports

Problèmes Chromium : 1222574, 1222573

Améliorations apportées au panneau "Enregistreur"

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

Lorsqu'il détermine un sélecteur unique pendant l'enregistrement, le panneau Enregistreur préfère désormais automatiquement les éléments présentant 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 courants utilisés dans l'automatisation des tests.

Par exemple, démarrez un 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'e-mail a data-testid défini, il est automatiquement utilisé comme sélecteur au lieu 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 communs.

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&#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 en cliquant sur le bouton de modification (icône en forme de crayon) à côté du titre de l'enregistrement.

Renommer un enregistrement

Afficher un aperçu des propriétés de classe/fonction au survol

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.

Afficher un aperçu des propriétés de classe/fonction au survol

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.

Auparavant, la timeline Frames visualisait tous les frames avec un travail différé sur le thread principal comme des "frames abandonnés". Toutefois, dans certains cas, certaines frames peuvent toujours produire des mises à jour visuelles (par exemple, le défilement) pilotées par le thread du compositeur.

Cela prête à confusion pour les utilisateurs, car les captures d'écran de ces "images perdues" reflètent toujours les mises à jour visuelles.

La nouvelle métrique "Frames partiellement présentés" vise à indiquer de manière plus intuitive que, bien que certains contenus ne soient pas présentés à temps dans le frame, 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 importants

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 ultérieures à la version 5 ont une chaîne d'agent utilisateur 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 une carte source était fournie. (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 rendait le débogage difficile. (1294422)

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.