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 longueur CSS

Les outils de développement permettent de modifier les longueurs en CSS de manière plus simple et plus flexible.

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

Pointez sur le type d'unité. Celui-ci est souligné. Cliquez dessus pour sélectionner un type d'unité dans le menu déroulant.

Pointez sur la valeur de l'unité pour que le pointeur de votre souris se transforme en curseur horizontal. Faites glisser horizontalement pour augmenter ou diminuer la valeur. Pour ajuster la valeur de 10, maintenez la touche Maj enfoncée tout en faisant glisser l'élément.

Vous pouvez toujours modifier la valeur de l'unité sous forme de texte. Il vous suffit de cliquer sur la valeur et de commencer à la modifier.

Problèmes liés à 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 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 sont ajoutés dans le volet Problèmes masqués. Développez le volet. Vous pouvez afficher tous les problèmes masqués ou seulement certains d'entre eux.

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 vos propres propriétés en gras et triez-les en premier dans la console, les panneaux 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 spécifiques: 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 qui leur sont 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) qui comportent de nombreuses propriétés héritées.

Les propriétés qui leur sont associées sont en gras et triées en premier

Outre 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 liés à Chromium: 1076820, 1119900

Lighthouse 8.4 dans le panneau Lighthouse

Le panneau Lighthouse utilise désormais la version 8.4 de Lighthouse. Lighthouse détecte désormais si l'élément LCP (Largest Containful Paint) est une image à chargement différé et recommande de supprimer l'attribut loading.

Pour en savoir plus sur ces modifications, consultez la page 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 des conseils.

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 consulter les notes de version des outils de développement 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 les outils de développement. Si vous constatez des problèmes de traduction, aidez-nous à les améliorer en signalant un problème de traduction via Plus d'options > Aide > Signaler un bug de traduction.

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

Problèmes liés à Chromium: 1246245, 1245481

Avez-vous trouvé difficile de rechercher un fichier dans le menu Commandes ? Bonne nouvelle ! L'interface utilisateur du menu de commande 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 apportées à l'interface utilisateur du menu de commande sont toujours en cours. Nous vous communiquerons prochainement plus d'informations à ce sujet.

Problème Chromium: 1201997

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.