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 qui sont valides, mais qui n'ont pas d'effet visible. Dans le volet Styles, les outils de développement suppriment en fondu les propriétés inactives. Pointez sur l'icône située à côté pour comprendre pourquoi la règle n'a aucun effet visible.

Conseils pour les propriétés CSS inactives

Problème Chromium: 1178508

Détecter automatiquement les sélecteurs de texte et XPath dans le panneau "Enregistreur"

Le panneau Recorder (Enregistreur) est désormais compatible avec les sélecteurs XPath et les sélecteurs de texte. Démarrez l'enregistrement d'un parcours utilisateur. L'enregistreur choisit automatiquement le XPath et le texte unique le plus court d'un élément comme sélecteur, le cas échéant.

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

Problèmes liés à 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 la capacité de débogage du code réduit.

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

Auparavant, les outils de développement ne prenaient en charge que l'exécution 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 transpilateurs et les outils de minification 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 de pas est différent entre le code réduit et celui créé. L'utilisation de mappages sources pour déboguer le code minimisé du code d'origine est encore plus déroutante. En effet, le développeur examine ensuite les points-virgules (que la chaîne d'outils a transformés en virgules en des virgules), mais le débogueur ne s'arrête pas dessus.

Problème Chromium: 1370200

Amélioration du paramètre "Liste d'éléments à ignorer"

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

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

Problème Chromium: 1356517

Points forts divers

Voici quelques correctifs importants dans cette version:

Saisie semi-automatique du nom de la propriété CSS 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

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.