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 chemins XPath et des sélecteurs 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 chemin XPath et le texte unique le plus court d'un élément comme sélecteur, le cas échéant.

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

Problèmes Chromium : 1327206, 1327209

Parcourir des 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 la débogabilité du code minifié.

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.

Compte tenu du 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 une confusion lors du débogage, car le comportement des étapes est différent entre le code réduit 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 d'é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 à ignorer".

Problème Chromium: 1356517

Points importants divers

Voici quelques corrections importantes apportées dans cette version :

  • Saisissez le nom de la propriété CSS automatiquement dans le volet Styles en appuyant 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 permettent d'accéder aux dernières fonctionnalités de DevTools, de tester les API de plate-forme 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 décrites dans l'article, ou pour tout autre sujet lié aux outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement