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

Jecelyn Yeen

Nouveaux outils de création de longueurs CSS

Les outils pour les développeurs 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, 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 horizontalement pour augmenter ou diminuer la valeur. Pour ajuster la valeur de 10 unités, maintenez la touche Maj enfoncée pendant le glissement.

Vous pouvez toujours modifier la valeur des unités sous forme de texte. Il vous suffit de cliquer sur la valeur et de commencer à 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 comme celui-ci.

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 seul.

Volet "Problèmes masqués"

Problème Chromium: 1175722

Amélioration de l'affichage des établissements

DevTools améliore l'affichage des propriétés en:

  • Mettez toujours en gras et triez d'abord vos propres propriétés dans la console, dans le panneau Sources et dans le volet Propriétés.
  • Aplatissez l'affichage des propriétés dans le panneau 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 que vous possédez sont désormais affichées 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 de l'utilisateur sont en gras et triées en premier

En plus de ces modifications, les propriétés du panneau Properties (Propriétés) sont désormais aplaties pour améliorer l'expérience de débogage des propriétés DOM, en particulier pour les composants Web.

Propriétés aplaties

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 chargée de manière différée et recommande de supprimer l'attribut loading.

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

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

Problème Chromium: 772558

Trier les extraits dans le panneau "Sources"

Les extraits du volet Extraits du panneau Sources sont désormais triés par ordre alphabétique. Auparavant, elles n'étaient pas triées.

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 de DevTools dans six autres langues : russe, chinois, espagnol, japonais, portugais et coréen via l'onglet "Nouveautés".

Depuis Chrome 94, vous pouvez définir votre langue préférée dans DevTools. Si vous avez détecté 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

Amélioration de l'interface utilisateur du menu de commande des outils de développement

Avez-vous eu du mal à rechercher un fichier dans le menu de commande ? Bonne nouvelle : l'interface utilisateur du menu de commande est désormais améliorée.

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

Les améliorations de l'interface utilisateur du menu de commande sont toujours en cours. Tenez-vous informé !

Menu de commande

Problème Chromium: 1201997

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.