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

Kayce Basques

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

L'onglet Problèmes du panneau de navigation vise à réduire la fatigue liée aux notifications et l'encombrement 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, fournit des liens vers les ressources concernées dans DevTools et donne des conseils pour 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 réduire l'encombrement de la console.

Pour commencer, consultez Trouver et résoudre les problèmes avec l'onglet "Problèmes" des outils pour les développeurs Chrome.

Bug Chromium: 1068116

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

L'info-bulle du mode d'inspection indique désormais si l'élément dispose d'un nom et d'un rôle accessibles et s'il peut être mis au premier plan à l'aide du clavier.

Bug Chromium: 1040025

Mises à jour du panneau "Performances"

Afficher des informations sur le temps de blocage total (TBT) dans le pied de page

Après avoir enregistré vos 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 la durée pendant laquelle une page semble utilisable (car son contenu a été affiché à l'écran), mais qui n'est pas réellement utilisable, car JavaScript bloque le thread principal et que la page ne peut donc pas répondre à l'entrée utilisateur. Le TBT est la principale métrique de laboratoire permettant d'estimer le délai avant la première entrée, qui est l'un des nouveaux 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. Cliquez plutôt sur 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 DevTools n'a pas obtenu les informations dont il a besoin à partir des données de profilage internes de Chrome.

Bug Chromium: 1054381

Événements de changement de mise en page dans la section "Nouvelle interface"

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

Cliquez sur un événement Mise en page modifiée pour afficher les détails de la mise en page modifiée dans l'onglet Récapitulatif. Pointez sur les champs Déplacé depuis et Déplacé vers pour visualiser l'emplacement du changement de mise en page.

Terminologie des promesses plus précise dans la console

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

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

Bug V8: 6751

Mises à jour du volet "Styles"

Compatibilité avec le mot clé revert

L'UI 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é à ce qu'elle aurait été si aucune modification n'avait été apportée au style de l'élément.

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.

Bug Chromium: 1040019

Le sélecteur de couleurs utilise désormais une notation fonctionnelle des couleurs séparée par des espaces

Le niveau 4 du module de couleurs CSS spécifie que les fonctions de couleur telles que rgb() doivent prendre en charge 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 passez d'une représentation de couleur à une autre dans le volet "Styles" en maintenant la touche Maj enfoncée, puis en cliquant sur la valeur de couleur, la syntaxe de l'argument séparé par des espaces s'affiche.

La syntaxe s'affiche également dans le volet "Calculé" et dans l'info-bulle du mode d'inspection.

DevTools utilise la nouvelle syntaxe, car les fonctionnalités CSS à venir telles que color() ne sont pas compatibles avec la syntaxe d'argument séparé par une virgule obsolète.

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

Bug Chromium: 1072952

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

Le panneau 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 "Fichier manifeste"

Les raccourcis d'application aident les utilisateurs à lancer 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 de bureau ou l'appareil mobile de l'utilisateur.

Pour en savoir plus, consultez Réaliser des tâches rapidement avec les raccourcis d'application.

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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les 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.