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 Présentation du CSS, puis cliquez sur Capturer une vue d'ensemble pour générer un rapport sur le CSS de votre page.

Vous pouvez approfondir ces 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 Présentation du CSS est une fonctionnalité en version preview. Notre équipe travaille toujours activement sur cette fonctionnalité et nous attendons vos commentaires 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 l'expérience de modification et de copie de la longueur du CSS

Les fonctionnalités Copier le CSS et Modifier en tant que texte sont rétablies pour les propriétés CSS avec une 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 de modification principale en texte.

Si vous avez détecté des problèmes, veuillez les signaler sur goo.gle/length-feedback.

Vous pouvez la désactiver via Settings > Experiments > Enable CSS length authoring tools in the Styles pane (Paramètres > Tests > Activer les outils d'édition de la 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 la fonctionnalité de 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 "Charge utile" dans le panneau "Network"

Utilisez le nouvel onglet Charge utile du panneau Network (Réseau) lorsque vous inspectez une requête réseau avec une 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 prototypes et les méthodes DOM sont désormais 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 :

Option permettant de masquer les erreurs CORS dans la console

Vous pouvez masquer les erreurs CORS dans la console. Les erreurs CORS sont désormais signalées dans l'onglet "Problèmes". Vous pouvez donc les masquer dans la console pour réduire le nombre d'éléments affichés.

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 de manière anticipée.

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 là 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 maintenant reçu suffisamment de commentaires suite à l'avis d'abandon. Nous allons donc travailler à 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 toujours 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 "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 canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme 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.

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.