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

Jecelyn Yeen

Nouveaux outils de création de longueur CSS

Les outils de développement ont ajouté un moyen plus simple et flexible de mettre à jour les longueurs en CSS.

Dans le volet Styles, recherchez une propriété CSS avec une longueur (par exemple, height ou padding).

Pointez sur le type d'unité. Vous remarquerez qu'il est souligné. Cliquez dessus pour sélectionner un type d'unité dans le menu déroulant.

Pointez sur la valeur de l'unité. Le pointeur de la souris se transforme en curseur horizontal. Faites glisser le doigt horizontalement pour augmenter ou diminuer la valeur. Pour ajuster la valeur par incréments de 10, maintenez la touche Maj enfoncée lorsque vous faites glisser le curseur.

Vous pouvez toujours modifier la valeur de l'unité sous forme de texte. Pour cela, cliquez sur la valeur et commencez à la modifier.

Problèmes Chromium : 1126178, 1172993

Masquer les problèmes dans l'onglet "Problèmes"

Vous pouvez désormais masquer des problèmes spécifiques dans l'onglet "Problèmes" pour vous concentrer uniquement sur ceux qui vous intéressent.

Dans l'onglet "Problèmes", pointez sur le problème que vous souhaitez masquer. Cliquez sur Autres options   Plus   > Masquer les problèmes de ce type.

Masquer le menu des problèmes

Tous les problèmes masqués seront ajoutés dans le volet Problèmes masqués. Développez le volet. Vous pouvez afficher tous les problèmes masqués ou un problème sélectionné.

Volet "Problèmes masqués"

Problème Chromium : 1175722

Amélioration de l'affichage des propriétés

Les outils de développement améliorent l'affichage des propriétés en :

  • Mettez toujours en gras et triez d'abord les propriétés dans la console, le panneau Sources et le volet Propriétés.
  • Aplatissez l'affichage des propriétés dans le volet Propriétés.

Par exemple, l'extrait de code ci-dessous crée un objet URL link avec deux propriétés propres, user et access, et met à jour la valeur d'une propriété héritée search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Essayez de consigner link dans la console. Les propriétés propres sont désormais en gras et triées en premier. Ces modifications permettent de repérer plus facilement les propriétés personnalisées, en particulier pour les API Web (par exemple, URL) avec de nombreuses propriétés héritées.

Les propriétés propres sont en gras et triées en premier.

En plus de ces modifications, les propriétés du volet Propriétés sont désormais aplaties pour une meilleure expérience de débogage des propriétés DOM, en particulier pour les composants Web.

Aplatir les propriétés

Problèmes Chromium : 1076820, 1119900

Lighthouse 8.4 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 8.4. Lighthouse détecte désormais si l'élément Largest Contentful Paint (LCP) était une image à chargement différé et recommande de supprimer l'attribut loading.

Pour en savoir plus sur les nouveautés, consultez Nouveautés de Lighthouse 8.4.

Audit LCP à chargement différé dans un rapport Lighthouse

Problème Chromium : 772558

Trier les extraits dans le panneau "Sources"

Les extraits du volet Extraits, sous le volet Sources, sont désormais triés par ordre alphabétique. Auparavant, ils n'étaient pas triés.

Utilisez la fonctionnalité d'extraits pour exécuter des commandes plus rapidement. Regardez cette vidéo pour obtenir un conseil.

Trier les extraits dans le panneau "Sources"

Problème Chromium : 1243976

Nouveaux liens vers les notes de version traduites et signalement d'un bug de traduction

Vous pouvez désormais cliquer pour lire les notes de version des outils pour les développeurs dans six autres langues : chinois, coréen, espagnol, japonais, portugais et russe. Pour ce faire, accédez à l'onglet "Nouveautés".

Depuis Chrome 94, vous pouvez définir votre langue préférée dans les outils pour les développeurs. Si vous avez rencontré des problèmes de traduction, aidez-nous à les améliorer en signalant un problème de traduction via Autres options > Aide > Signaler un bug de traduction.

Nouveaux liens vers les notes de version traduites et signalement d'un bug de traduction

Problèmes Chromium : 1246245, 1245481

Interface utilisateur améliorée pour le menu de commandes des outils de développement

Avez-vous eu du mal à rechercher un fichier dans le menu de commandes ? Bonne nouvelle : l'interface utilisateur du menu de commandes a été améliorée.

Ouvrez le menu de commandes pour rechercher un fichier à l'aide du raccourci clavier Ctrl+P sous Windows et Linux, ou Commande+P sous macOS.

Nous continuons d'améliorer l'UI du menu de commandes. Restez à l'écoute pour en savoir plus !

Menu de commandes

Problème Chromium : 1201997

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.