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

Résoudre les problèmes liés à votre site grâce au nouvel onglet "Problèmes"

Le nouvel onglet Problèmes du tiroir vise à réduire la fatigue liée aux notifications et le désordre de la console. Actuellement, la console est l'endroit central où les développeurs de sites Web, les bibliothèques, les frameworks et Chrome lui-même enregistrent les messages, les avertissements et les erreurs. L'onglet "Problèmes" présente les avertissements du navigateur de manière structurée, agrégée et exploitable. Il fournit des liens vers les ressources concernées dans les outils de développement et des conseils pour résoudre les problèmes. Au fil du temps, de plus en plus d'avertissements Chrome s'afficheront dans l'onglet "Problèmes" plutôt que dans la console, ce qui devrait contribuer à réduire l'encombrement de la console.

Pour commencer, consultez Find And Fix Problems With The Chrome DevTools Issues Tab (Identifier et résoudre les problèmes avec l'onglet "Problèmes" des outils pour les développeurs Chrome).

Bug Chromium : #1068116

Afficher les informations sur l'accessibilité dans l'info-bulle du mode d'inspection

L'info-bulle du mode Inspecter indique désormais si l'élément possède un nom et un rôle accessibles et s'il est focusable au clavier.

Bug Chromium : #1040025

Modifications apportées au panneau "Performances"

Afficher les informations sur le Total Blocking Time (TBT) dans le pied de page

Après avoir enregistré les performances de chargement, le panneau "Performances" affiche désormais des informations sur le temps de blocage total (TBT) dans le pied de page. Le TBT est une métrique de performances de chargement qui permet de quantifier le temps nécessaire pour qu'une page devienne utilisable. Elle mesure essentiellement le temps pendant lequel une page semble utilisable (parce que son contenu a été affiché à l'écran), mais ne l'est pas réellement, car JavaScript bloque le thread principal et, par conséquent, la page ne peut pas répondre aux entrées utilisateur. TBT est la principale métrique de laboratoire pour approximer le First Input Delay, qui est 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 Recharger la page pour enregistrer les performances de chargement de la page. Cliquez plutôt sur Enregistrer , actualisez manuellement la page, attendez qu'elle se charge, puis arrêtez l'enregistrement. Si vous voyez Total Blocking Time: Unavailable, 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.

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 Cumulative Layout Shift (CLS) est une métrique qui peut vous aider à quantifier l'instabilité visuelle indésirable. Il s'agit de l'une des nouvelles métriques Core Web Vitals de Google.

Cliquez sur un événement Décalage de mise en page pour afficher les détails du décalage de mise en page dans l'onglet Résumé. Pointez sur les champs Déplacé depuis et Déplacé vers pour visualiser où le changement de mise en page s'est produit.

Terminologie plus précise concernant les promesses dans la console

Lors de la journalisation d'un Promise, la console décrivait incorrectement l'état du Promise comme resolved :

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

Bug V8 : #6751

Modifications apportées au volet "Styles"

Compatibilité avec le mot clé revert

L'UI d'autocomplétion du volet "Styles" détecte désormais le mot clé CSS revert, qui rétablit la valeur en cascade d'une propriété à ce qu'elle aurait été si aucune modification n'avait été apportée au style de l'élément.

Bug Chromium : #1075437

Aperçus des images

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

Bug Chromium : #1040019

Le sélecteur de couleurs utilise désormais la notation fonctionnelle des couleurs avec des espaces

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 avec le sélecteur de couleur ou que vous alternez entre les représentations de couleur dans le volet "Styles" en maintenant la touche Maj enfoncée, puis en cliquant sur la valeur de couleur, vous voyez maintenant la syntaxe des arguments séparés par des espaces.

Vous verrez également la syntaxe dans le volet "Calculé" et dans l'info-bulle du mode Inspecter.

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 d'arguments séparés par des virgules, qui est obsolète.

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

Bug Chromium : #1072952

Obsolescence du volet Propriétés dans le panneau "Éléments"

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

Références :

• console.dir()
• $0

Prise en charge des raccourcis d'application dans le volet "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 Gagner en efficacité grâce aux raccourcis d'application.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

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.