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

Jecelyn Yeen

Conseils pour les propriétés CSS inactives

Les outils de développement identifient désormais les styles CSS valides, mais qui n'ont aucun effet visible. Dans le volet Styles, les outils de développement font disparaître en fondu les propriétés inactives. Passez la souris sur l'icône à côté de la règle pour comprendre pourquoi elle n'a aucun effet visible.

Conseils pour les propriétés CSS inactives.

Problème Chromium: 1178508

Détection automatique des sélecteurs XPath et de texte dans le panneau "Enregistreur"

Le panneau Enregistreur est désormais compatible avec les sélecteurs XPath et Text. Commencez à enregistrer un parcours utilisateur. L'enregistreur sélectionne automatiquement le XPath et le texte unique le plus court d'un élément comme sélecteur, le cas échéant.

Sélecteurs XPath et de texte dans le panneau "Enregistreur".

Problèmes Chromium: 1327206,1327209

Parcourir les expressions séparées par une virgule

Vous pouvez maintenant passer en revue les expressions séparées par une virgule lors du débogage. Cela améliore le débogage du code réduit.

Parcourez les expressions séparées par une virgule.

Auparavant, DevTools n'était compatible qu'avec l'exécution par étapes d'expressions séparées par des points-virgules.

D'après le code ci-dessous,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Les transpileurs et les outils de minification peuvent les transformer en expressions séparées par une virgule.

function bar(){return foo(),foo(),42}

Cela crée de la confusion lors du débogage, car le comportement de la progression est différent entre le code minifié et le code créé. Cela est encore plus déroutant lorsque vous utilisez des mappages sources pour déboguer le code minifié par rapport au code d'origine, car le développeur examine alors des points-virgules (qui ont été transformés en virgules par la chaîne d'outils), mais le débogueur ne s'arrête pas dessus.

Problème Chromium: 1370200

Amélioration du paramètre de liste d'éléments à ignorer

Accédez à Paramètres > Liste des éléments à ignorer. DevTools améliore la conception pour vous aider à configurer les règles afin d'ignorer un script ou un modèle de scripts.

Onglet "Liste d'éléments à ignorer".

Problème Chromium: 1356517

Autres points forts

Voici quelques corrections importantes apportées dans cette version:

  • Saisissez le nom de la propriété CSS automatiquement dans le volet Styles lorsque vous appuyez sur la barre d'espace. (1343316).
  • Suppression du défilement automatique dans le fil d'Ariane du panneau Element (Élément). (1369734)

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 sujet lié aux outils de développement.

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.