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

Fonctionnalité en preview: nouveau panneau "Présentation du CSS"

Utilisez le nouveau panneau Aperçu du CSS pour identifier les améliorations possibles à apporter au CSS sur votre page. Ouvrez le panneau Aperçu du CSS, puis cliquez sur Capturer l'aperçu pour générer un rapport sur le CSS de votre page.

Vous pouvez afficher le détail des informations. Par exemple, cliquez sur une couleur dans la section Couleurs pour afficher la liste des éléments qui s'appliquent à la même couleur. Cliquez sur un élément pour l'ouvrir dans le panneau Éléments.

Le panneau Aperçu CSS est une fonctionnalité en version preview. Notre équipe travaille toujours activement à sa résolution et nous aimerions connaître votre avis pour l'améliorer.

Consultez cet article pour en savoir plus sur le panneau Présentation du CSS.

Panneau "Présentation du CSS"

Problème Chromium: 1254557

Restauration et amélioration de la modification et de la copie de la longueur du CSS

Les interfaces copie CSS et modifier sous forme de texte sont restaurées pour les propriétés CSS de longueur. Ces expériences sont défectueuses dans la dernière version.

En outre, vous pouvez faire glisser la valeur d'unité pour ajuster la valeur et mettre à jour le type d'unité à l'aide du menu déroulant. Cette fonctionnalité de création de longueurs de module complémentaire ne devrait pas avoir d'incidence sur la modification principale en tant que texte.

Si vous rencontrez des problèmes, veuillez les signaler via goo.gle/length-feedback.

Vous pouvez la désactiver dans Paramètres > Tests > Case à cocher Activer les outils de création de longueurs CSS dans le volet "Styles".

Problèmes Chromium: 1259088, 1172993

Mises à jour de l'onglet "Affichage"

Émuler la fonctionnalité "CSS preferences-contrast media"

Émuler la fonctionnalité "CSS preferences-contrast media"

La fonctionnalité multimédia prefers-contrast est utilisée pour détecter si l'utilisateur a demandé plus ou moins de contraste sur la page.

Ouvrez le menu de commande, exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate CSS media feature preferences-contrast.

Problème Chromium: 1139777

Émuler le thème sombre automatique de Chrome

Utilisez les outils de développement pour émuler le thème sombre automatique afin de voir facilement à quoi ressemble votre page lorsque le thème sombre automatique de Chrome est activé.

Chrome 96 introduit une phase d'évaluation pour le thème sombre automatique sur Android. Grâce à cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites à thème clair, lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation.

Ouvrez le menu de commande, exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate auto dark mode (Émuler le mode sombre automatique).

Émuler le thème sombre automatique de Chrome

Problème Chromium: 1243309

Copier les déclarations au format JavaScript dans le volet "Styles"

Deux nouvelles options sont ajoutées au menu contextuel pour vous permettre de copier facilement les règles CSS en tant que propriétés JavaScript. Ces options de raccourcis sont particulièrement utiles pour les développeurs qui utilisent des bibliothèques CSS-in-JS.

Dans le volet Styles, effectuez un clic droit sur une règle CSS. Vous pouvez sélectionner Copier la déclaration en tant que JS pour copier une seule règle ou Copier toutes les déclarations en tant que JS pour copier toutes les règles.

Par exemple, l'exemple ci-dessous copie paddingLeft: '1.5rem' dans le presse-papiers.

Copier la déclaration au format JavaScript

Problème Chromium: 1253635

Nouvel onglet de charge utile dans le panneau "Network" (Réseau)

Utilisez le nouvel onglet Charge utile dans le panneau Réseau lorsque vous inspectez une requête réseau avec la charge utile. Auparavant, les informations sur la charge utile étaient disponibles dans l'onglet Headers (En-têtes).

Onglet "Charge utile" du panneau "Réseau"

Problème Chromium: 1214030

Amélioration de l'affichage des propriétés dans le volet "Propriétés"

Le volet Properties (Propriétés) n'affiche désormais que les propriétés pertinentes au lieu de toutes les propriétés de l'instance. Les méthodes et les prototypes DOM sont maintenant supprimés.

Avec le volet Properties (Propriétés) améliorations de Chrome 95, vous pouvez désormais localiser plus facilement les propriétés pertinentes.

Affichage des propriétés dans le volet "Propriétés"

Problème Chromium: 1226262

Mises à jour de la console :

Possibilité de masquer les erreurs CORS dans la console

Vous pouvez masquer les erreurs CORS dans la console. Comme les erreurs CORS sont désormais signalées dans l'onglet "Problèmes", masquer les erreurs CORS dans la console peut contribuer à désencombrer la page.

Dans la console, cliquez sur l'icône Paramètres, puis décochez la case Afficher les erreurs CORS dans la console.

Possibilité de masquer les erreurs CORS dans la console

Problème Chromium: 1251176

Aperçu et évaluation appropriés des objets Intl dans la console

L'aperçu des objets Intl est maintenant correct et sont évalués hâtivement dans la console. Auparavant, les objets Intl n'étaient pas évalués hâtivement.

Objets internationaux dans la console

Problème Chromium: 1073804

Traces de pile asynchrones cohérentes

La console signale désormais les traces de la pile async pour les fonctions async afin qu'elles soient cohérentes avec les autres tâches asynchrones et ce qui est affiché dans la pile d'appels.

traces de pile asynchrones

Problème Chromium: 1254259

Conserver la barre latérale de la console

La barre latérale de la console est conçue pour durer. Dans Chrome 94, nous avons annoncé l'abandon à venir de la barre latérale de la console, et nous avons demandé aux développeurs de nous faire part de leurs commentaires et de leurs préoccupations.

Nous avons reçu suffisamment de commentaires concernant l'avis d'abandon, et nous allons nous efforcer d'améliorer la barre latérale plutôt que de la supprimer.

Barre latérale de la console

Problèmes Chromium: 1232937, 1255586

Volet de cache d'application obsolète dans le panneau "Application"

Le volet Cache de l'application du panneau "Application" a été supprimé, car AppCache n'est plus compatible avec Chrome et les autres navigateurs basés sur Chromium.

Problème Chromium: 1084190

[Expérimental] Nouveau volet "API Reporting" dans le panneau "Application"

L'API Reporting est conçue pour vous aider à surveiller les cas de non-conformité de votre page, les appels d'API obsolètes et plus encore.

Lorsque ce test est activé, vous pouvez désormais afficher l'état des rapports dans le nouveau volet API Reporting du panneau Application.

Veuillez noter que la section Points de terminaison est en cours de développement (aucun point de terminaison de création de rapports n'est affiché pour le moment).

Pour en savoir plus sur l'API Reporting, consultez cet article.

Volet de l'API Reporting dans le panneau "Application"

Problème Chromium: 1205856

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 vos suggestions ou vos commentaires via crbug.com.
  • Signalez un problème lié aux outils de développement en cliquant sur Autres options   Plus > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement