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

Jecelyn Yeen

Conseils pour les propriétés CSS inactives

DevTools identifie désormais les styles CSS valides, mais sans effet visible. Dans le volet Styles, les propriétés inactives sont affichées en demi-teinte. 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 désormais suivre les expressions séparées par des virgules lors du débogage. Cela améliore la débogabilité du code minifié.

Parcourir 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 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 à Settings (Paramètres) > Ignore List (Liste d'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 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 donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme 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.