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

Jecelyn Yeen

Fonctionnalité bêta : nouveau panneau "Présentation du CSS"

Utilisez le nouveau panneau 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 également afficher des informations plus détaillées. 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 bêta. Notre équipe travaille toujours activement sur cette fonctionnalité et nous aimerions recueillir vos commentaires pour l'améliorer.

Pour en savoir plus sur le panneau Présentation du CSS, consultez cet article.

Panneau "Présentation du CSS"

Problème Chromium : 1254557

Restauration et amélioration de l'expérience de modification et de copie des longueurs CSS

L'expérience Copier le CSS et Modifier en tant que texte est restaurée 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 de l'unité et mettre à jour le type d'unité dans le menu déroulant. Cette fonctionnalité de création de complément de durée ne devrait pas avoir d'incidence sur l'expérience principale de modification sous forme de texte.

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

Pour le désactiver, décochez la case Activer les outils de création de longueur CSS dans le volet "Styles" sous Paramètres > Tests.

Problèmes Chromium : 1259088, 1172993

Afficher les modifications apportées aux onglets

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

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

La fonctionnalité mé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 afin d'émuler le mode sombre automatique et de voir facilement à quoi ressemble votre page lorsque le mode sombre automatique de Chrome est activé.

Chrome 96 introduit un essai Origin Trial 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 utilisant un thème clair lorsque l'utilisateur a activé les thèmes sombres dans le système d'exploitation.

Ouvrez le menu de commandes, 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 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 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 "Réseau"

Utilisez le nouvel onglet Charge utile dans le panneau 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 "Réseau"

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 ont été supprimés.

Grâce aux améliorations apportées au 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. Étant donné que les erreurs CORS sont désormais signalées dans l'onglet "Problèmes", vous pouvez les masquer dans la console pour réduire l'encombrement.

Dans la console, cliquez sur l'icône Paramètres et 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 affiche désormais des traces de pile async pour les fonctions async afin d'être cohérente 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 rester. Dans Chrome 94, nous avons annoncé l'abandon à venir 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 sur l'avis d'abandon. Nous allons donc nous efforcer d'améliorer la barre latérale au lieu 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 d'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 failles de sécurité 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 Reporting API du panneau Application.

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

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

Volet "Reporting API" dans le panneau "Application"

Problème Chromium : 1205856

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.