Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Fonctionnalité en preview: 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 l'aperçu pour générer un rapport sur le CSS de votre page.

Vous pouvez afficher le détail de 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 Éléments.

Le panneau CSS Overview (Aperçu CSS) est une fonctionnalité disponible en version preview. Notre équipe y travaille toujours et n'hésitez pas à nous faire part de vos commentaires pour l'améliorer.

Lisez cet article pour en savoir plus sur le panneau CSS Overview (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 CSS

Les expériences Copier le code CSS et Modifier sous forme de texte sont restaurées pour les propriétés CSS longues. Ces expériences ne fonctionnent pas dans la dernière version.

Vous pouvez également faire glisser la valeur de l'unité et mettre à jour le type d'unité à l'aide du menu déroulant. Cette fonctionnalité de création de longueurs pour les modules complémentaires ne doit pas avoir d'impact sur la modification principale sous forme de texte.

Si vous avez rencontré des problèmes, veuillez nous les signaler via goo.gle/length-feedback.

Vous pouvez la désactiver en accédant à Paramètres > Tests > Activer les outils de création de longueur CSS dans le volet "Styles".

Problèmes liés à Chromium: 1259088, 1172993

Mise à jour de l'onglet "Rendu"

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

La fonctionnalité multimédia Privilégie le contraste permet de détecter si l'utilisateur a demandé plus ou moins de contraste sur la page.

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

Problème Chromium: 1139777

Émuler la fonctionnalité de 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 Commandes, 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 la fonctionnalité de thème sombre automatique de Chrome

Problème Chromium: 1243309

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

Deux nouvelles options ont été ajoutées dans le menu contextuel pour vous permettre de copier facilement les règles CSS en tant que propriétés JavaScript. Ces options de raccourcis sont utiles, en particulier 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 au format JavaScript

Problème Chromium: 1253635

Nouvel onglet "Charge utile" dans le panneau "Network"

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

Onglet "Payload" (Charge utile) du panneau "Network" (Réseau)

Problème Chromium: 1214030

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

Désormais, le volet Properties (Propriétés) n'affiche plus que les propriétés pertinentes, et non toutes les propriétés de l'instance. Suppression des prototypes et des méthodes DOM.

Avec les améliorations du volet Propriétés 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 :

Option permettant de masquer les erreurs CORS dans la console

Vous pouvez masquer les erreurs CORS dans la console. Les erreurs CORS étant désormais signalées dans l'onglet "Problèmes", les masquer dans la console peut vous aider à les désencombrer.

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 des objets `Intl` appropriés dans la console

L'aperçu des objets Intl est désormais correct et est rapidement évalué 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 pile async pour les fonctions async afin de garantir la cohérence avec les autres tâches asynchrones et les informations affichées dans la pile d'appel.

traces de pile asynchrones

Problème Chromium: 1254259

La barre latérale de la console reste disponible. Dans Chrome 94, nous avions 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 de l'avis d'abandon et nous allons 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 d'application" obsolète dans le panneau "Application"

Le volet Cache d'application du panneau "Application" a été supprimé, car AppCache n'est plus compatible avec Chrome et les autres navigateurs 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.

Lorsque ce test est activé, vous pouvez maintenant afficher 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" du panneau "Application"

Problème Chromium: 1205856

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.