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

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

Kayce Basques

Résoudre les problèmes du site avec le nouvel onglet "Problèmes"

Le nouvel onglet Issues (Problèmes) du panneau vise à réduire l'accoutumance aux notifications et l'encombrement de la console. Actuellement, la console est l'emplacement central permettant aux développeurs de sites Web, aux bibliothèques, aux frameworks et à Chrome de consigner les messages, les avertissements et les erreurs. L'onglet "Issues" (Problèmes) présente des avertissements provenant du navigateur de manière structurée, agrégée et concrète, des liens vers les ressources concernées dans les outils de développement et fournit des conseils sur la façon de résoudre les problèmes. Au fil du temps, de plus en plus d'avertissements de Chrome s'afficheront dans l'onglet "Problèmes" plutôt que dans la console, ce qui devrait contribuer à désencombrer celle-ci.

Consultez Trouver et résoudre les problèmes liés à l'onglet "Problèmes liés aux outils pour les développeurs Chrome" pour vous lancer.

L'onglet "Problèmes".

Bug Chromium: #1068116

L'info-bulle du mode d'inspection indique désormais si l'élément a un nom et un rôle accessibles et s'il est sélectionnable au clavier.

Info-bulle du mode d'inspection contenant des informations sur l'accessibilité.

Bug Chromium: #1040025

Mises à jour du panneau "Performances"

Afficher les informations sur le temps total de blocage dans le pied de page

Après avoir enregistré vos performances de chargement, le panneau "Performances" affiche à présent des informations Total Blocking Time (TBT) dans le pied de page. Cette métrique de performances de chargement permet de quantifier le temps nécessaire pour qu'une page soit utilisable. Elle mesure essentiellement la durée pendant laquelle une page semble être utilisable (car son contenu a été affiché à l'écran), mais n'est pas réellement utilisable, car JavaScript bloque le thread principal et la page ne peut donc pas répondre à l'entrée utilisateur. La métrique "TBT" est la principale métrique expérimentale permettant d'estimer le premier délai d'entrée. Il s'agit de l'une des nouvelles métriques Core Web Vitals de Google.

Pour obtenir des informations sur le temps de blocage total, n'utilisez pas le workflow Actualiser la page pour enregistrer les performances de chargement de la page. À la place, cliquez sur Record (Enregistrer) , actualisez manuellement la page, attendez qu'elle se charge, puis arrêtez l'enregistrement. Si Total Blocking Time: Unavailable s'affiche, cela signifie que les outils de développement n'ont pas obtenu les informations dont ils ont besoin à partir des données de profilage internes de Chrome.

Informations sur le temps total bloqué dans le pied de page d'un enregistrement du panneau "Performances"

Bug Chromium: #1054381

Événements de décalage de mise en page dans la nouvelle section "Expérience"

La nouvelle section Expérience du panneau "Performances" peut vous aider à détecter les décalages de mise en page. Le CLS (Cumulative Layout Shift) est une métrique qui peut vous aider à quantifier une instabilité visuelle indésirable. Il s'agit de l'un des nouveaux Core Web Vitals de Google.

Cliquez sur un événement Layout Shift pour en afficher les détails dans l'onglet Summary (Résumé). Pointez sur les champs Moved from (Origine) et Moved to (Déplacé vers) pour visualiser où le décalage de mise en page s'est produit.

Détails d'un décalage de mise en page.

Terminologie plus précise des promesses dans la console

Lors de la journalisation d'un Promise, la console décrit de manière incorrecte l'état de l'Promise comme resolved:

Exemple de la console utilisant l'ancienne terminologie "résolue".

La console utilise désormais le terme fulfilled, qui conforme à la spécification Promise:

Exemple de la console utilisant la nouvelle terminologie "traité".

Bug V8: #6751

Mises à jour du volet "Styles"

Compatibilité avec le mot clé `revert`

L'interface utilisateur de saisie semi-automatique du volet "Styles" détecte désormais le mot clé CSS revert, qui rétablit la valeur en cascade d'une propriété sur la valeur qu'elle aurait été si aucune modification n'avait été apportée au style de l'élément.

Définir la valeur d'une propriété à rétablir.

Bug Chromium: #1075437

Aperçus d'images

Pointez sur une valeur background-image dans le volet "Styles" pour afficher un aperçu de l'image dans une info-bulle.

Pointez sur la valeur d'une image de fond.

Bug Chromium: #1040019

Le sélecteur de couleur utilise désormais une notation de couleur fonctionnelle séparée par un espace.

Le module de couleur CSS de niveau 4 spécifie que les fonctions de couleur telles que rgb() doivent accepter les arguments séparés par des espaces. Par exemple, rgb(0, 0, 0) correspond à rgb(0 0 0).

Lorsque vous choisissez des couleurs à l'aide du sélecteur de couleur ou que vous alternez entre les représentations de couleurs dans le volet "Styles" en maintenant la touche Maj enfoncée, puis en cliquant sur la valeur de couleur, la syntaxe d'argument séparée par un espace s'affiche.

Utiliser des arguments séparés par des espaces dans le volet "Styles"

Vous verrez également la syntaxe dans le volet "Computed" (Calculé) et dans l'info-bulle "Inspect Mode" (Mode d'inspection).

Les outils de développement utilisent la nouvelle syntaxe, car les prochaines fonctionnalités CSS telles que color() ne sont pas compatibles avec la syntaxe obsolète pour les arguments séparés par une virgule.

La syntaxe des arguments séparés par des espaces est depuis longtemps compatible avec la plupart des navigateurs. Consultez la section Puis-je utiliser des notations de couleurs fonctionnelles séparées par un espace ?

Bug Chromium: #1072952

Abandon du volet Propriétés du panneau "Éléments"

Le volet Properties (Propriétés) du panneau Elements (Éléments) est désormais obsolète. Exécutez plutôt console.dir($0) dans la console.

Volet "Propriétés" obsolète.

Références :

Prise en charge des raccourcis d'application dans le volet du fichier manifeste

Les raccourcis d'application aident les utilisateurs à démarrer rapidement des tâches courantes ou recommandées dans une application Web. Le menu des raccourcis d'application ne s'affiche que pour les progressive web apps installées sur l'ordinateur ou l'appareil mobile de l'utilisateur.

Pour en savoir plus, consultez Gagnez en efficacité grâce aux raccourcis d'application.

Raccourcis des applications dans le volet du fichier manifeste.

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.