Cette page a été traduite par l'API Cloud Translation.

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. Pointez sur l'icône située à côté pour savoir pourquoi la règle 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 de texte. 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 le débogage du code réduit.

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

Auparavant, les outils de développement ne permettaient que d'explorer les expressions séparées par un point-virgule.

Compte tenu du code ci-dessous,

function foo() {}

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

Les analyseurs et les outils de réduction peuvent les transformer en expressions séparées par des virgules.

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éé. Il est encore plus déroutant d'utiliser des mappages sources pour déboguer le code réduit en fonction du code d'origine, car le développeur examine ensuite les points-virgules (qui étaient en arrière-plan transformés en virgules par la chaîne d'outils), mais le débogueur ne s'arrête pas sur eux.

Problème Chromium: 1370200

Amélioration du paramètre "Liste d'éléments ignorés"

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

Onglet "Liste à ignorer".

Problème Chromium: 1356517

Points importants divers

Voici quelques correctifs importants dans cette version:

Nom de la propriété CSS de la saisie semi-automatique dans le volet Styles lorsque vous appuyez sur la barre d'espace. (1343316).
Supprimez le défilement automatique dans le fil d'Ariane du panneau Élément. (1369734).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes 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 dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.