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.

Passez la souris sur la valeur de l'unité pour que le pointeur de la souris devienne 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     > Masquer les problèmes comme celui-ci.

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.

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 les propriétés et triez-les d'abord dans les panneaux Console, Sources et 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 d'enregistrer 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.

Outre ces modifications, les propriétés du volet Properties (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.

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.

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. Astuce : regardez cette vidéo

Problème Chromium: 1243976

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

Vous pouvez désormais consulter les notes de version des outils de développement dans six autres langues (espagnol, 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.

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 Commande pour rechercher un fichier à l'aide du raccourci clavier Ctrl+P sous Windows et Linux, ou Commande+P sous macOS.

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

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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en sélectionnant more_vert Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils de développement

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.