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

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

Jecelyn Yeen

Nouveaux outils de création de longueurs CSS

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

Dans le volet Styles, recherchez toutes les propriétés CSS dont la longueur est définie (height ou padding, par exemple).

Passez la souris sur le type d'unité. Notez que le type d'unité 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, faites-la glisser tout en maintenant la touche Maj enfoncée.

Vous pouvez toujours modifier la valeur d'unité sous forme de texte. Il vous suffit de cliquer dessus et de commencer à apporter des modifications.

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" afin de 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 Plus d'options > Masquer les problèmes similaires.

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

Volet des 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 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 volet Properties (Propriétés).

Par exemple, l'extrait 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 propres sont désormais affichées en gras et triées en premier. Ces modifications facilitent le repérage des propriétés personnalisées, en particulier pour les API Web (par exemple, URL) ayant de nombreuses propriétés héritées.

Vos propres propriétés sont affichées en gras et triées en premier

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.

Aplatir les propriétés

Problèmes Chromium: 1076820, 1119900

Lighthouse 8.4 dans le panneau Lighthouse

Le panneau Lighthouse utilise désormais Lighthouse 8.4. Lighthouse détecte désormais si l'élément Largest Containful Paint (LCP) était une image au chargement différé et recommande de supprimer l'attribut loading de celle-ci.

Consultez la page Nouveautés de Lighthouse 8.4 pour en savoir plus sur les mises à jour.

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 panneau Sources sont désormais triés par ordre alphabétique. Auparavant, elles n'étaient pas triées.

Utilisez la fonctionnalité d'extraits de code pour exécuter des commandes plus rapidement. Astuce : regardez cette vidéo

Trier les extraits dans le panneau "Sources"

Problème Chromium: 1243976

Nouveaux liens vers les notes de version traduites et signaler 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 les outils de développement. Si vous rencontrez des problèmes de traduction, aidez-nous à les améliorer en signalant un problème de traduction en sélectionnant Plus d'options > Aide > Signaler un bug de traduction.

Nouveaux liens vers les notes de version traduites et signaler un bug de traduction

Problèmes Chromium: 1246245, 1245481

Avez-vous trouvé difficile de 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 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 commandes sont toujours en cours. Nous vous donnerons bientôt plus d'informations à ce sujet.

Problème Chromium: 1201997

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.