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

Jecelyn Yeen

Fonctionnalité en avant-première: nouveau panneau "Présentation du CSS"

Utilisez le nouveau panneau CSS Overview (Aperçu CSS) pour identifier les améliorations potentielles du 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 appliquent la même couleur. Cliquez sur un élément pour l'ouvrir dans le panneau Elements (Éléments).

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

Lisez 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 ne fonctionnent pas dans la dernière version.

Vous pouvez également faire glisser le curseur pour ajuster la valeur des unités et modifier le type d'unité via le menu déroulant. Cette fonctionnalité d'édition de la longueur des modules complémentaires ne devrait pas avoir d'impact sur l'expérience principale de modification en texte.

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

Vous pouvez la désactiver via la case à cocher Settings > Experiments > Enable CSS length authoring tools in the Styles pane (Paramètres > Tests > Activer les outils d'écriture de longueur CSS dans le volet "Styles").

Problèmes Chromium: 1259088, 1172993

Mises à jour de l'onglet de rendu

Émuler la caractéristique média CSS prefers-contrast

Émuler la caractéristique média CSS prefers-contrast

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

Ouvrez le menu Command (Commande), exécutez la commande Show Rendering (Afficher le rendu), puis définissez le menu déroulant Emulate CSS media feature prefers-contrast (Émuler la caractéristique média CSS prefers-contrast).

Problème Chromium: 1139777

Émuler la fonctionnalité de thème sombre automatique de Chrome

Utilisez les outils pour les développeurs 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. Avec cette fonctionnalité, le navigateur applique un thème sombre généré automatiquement aux sites au 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 Afficher le rendu, puis définissez le menu déroulant Émuler le mode sombre automatique.

Émuler le thème sombre automatique de Chrome

Problème Chromium: 1243309

Copier les déclarations en tant que code JavaScript dans le volet "Styles"

Deux nouvelles options sont ajoutées au menu contextuel pour vous permettre de copier facilement des règles CSS en tant que propriétés JavaScript. Ces options de raccourcis sont particulièrement utiles pour les développeurs qui travaillent avec 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 en tant que 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 En-têtes.

Onglet "Charge utile" du panneau "Network"

Problème Chromium: 1214030

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

Le volet 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.

Grâce aux améliorations du volet Propriétés dans Chrome 95, vous pouvez désormais trouver plus facilement les propriétés pertinentes.

Affichage des propriétés dans le panneau "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.

Option permettant de masquer les erreurs CORS dans la console

Problème Chromium: 1251176

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

Les objets Intl disposent désormais d'un aperçu approprié et sont évalués de manière anticipée dans la console. Auparavant, les objets Intl n'étaient pas évalués hâtivement.

Objets Intl dans la console

Problème Chromium: 1073804

Traces de pile asynchrones cohérentes

La console indique désormais que les traces de pile async pour les fonctions async sont cohérentes avec les autres tâches asynchrones et avec 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 prochain de la barre latérale de la console et 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 "Cache de l'application" obsolète dans le panneau "Application"

Le volet Cache d'application du panneau "Application" a été supprimé, car la compatibilité avec AppCache a été supprimée de Chrome et des autres navigateurs basés sur Chromium.

Problème Chromium: 1084190

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

L'API Reporting est conçue pour vous aider à surveiller les cas de non-respect de la sécurité de votre page, les appels d'API obsolètes, etc.

Une fois le test activé, vous pouvez consulter 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

Envisagez d'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 plate-forme 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, 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.