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 à l'aide du nouvel onglet "Problèmes"

Le nouvel onglet Issues (Problèmes) du panneau vise à réduire l'essoufflement et l'encombrement des notifications de la console. Actuellement, la console est l'endroit central pour les développeurs de sites Web, les bibliothèques, les frameworks et Chrome pour accéder aux messages de journal, aux avertissements et aux erreurs. L'onglet "Problèmes" présente les avertissements du navigateur de manière structurée, agrégée et actionnable, 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 de Chrome s'afficheront dans l'onglet "Problèmes" plutôt que dans la console, ce qui devrait aider à réduire l'encombrement de la console.

Pour commencer, consultez Rechercher et résoudre les problèmes à l'aide de l'onglet des problèmes liés aux outils pour les développeurs Chrome.

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 peut être sélectionné par le clavier.

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

Bug Chromium: #1040025

Informations sur le panneau "Performances"

Afficher les informations sur le temps total de blocage (TBT) en pied de page

Après avoir enregistré vos performances de chargement, le panneau "Performances" affiche à présent des informations sur le temps de blocage total (TBT) dans le pied de page. La requête "TBT" est une métrique de performances de chargement qui permet de quantifier le temps nécessaire pour qu'une page soit utilisable. Elle mesure essentiellement pendant combien de temps une page semble être utilisable (parce que 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 de l'atelier pour l'approximation du First Input Delay, l'une des nouvelles Core Web Vitals de Google.

Pour obtenir des informations sur le temps total de blocage, n'utilisez pas le workflow Actualiser la page pour enregistrer les performances de chargement des pages. Au lieu de cela, cliquez sur Record (Enregistrer) , actualisez manuellement la page, attendez que la page 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 de blocage en bas de l'enregistrement d'un 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 changements de mise en page. La métrique CLS (Cumulative Layout Shift) peut vous aider à quantifier une instabilité visuelle indésirable. Elle fait partie des nouvelles métriques Core Web Vitals de Google.

Cliquez sur un événement Layout Shift pour afficher les détails de ce décalage dans l'onglet Summary (Résumé). Pointez sur les champs Déplacé depuis et Déplacé vers pour voir 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 dans la console

Lors de la journalisation d'une Promise, la console l'a utilisée pour décrire de manière incorrecte l'état de l'Promise en tant que resolved:

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

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

Exemple de la console utilisant la nouvelle terminologie "Traitée".

Bug V8: #6751

Mises à jour du volet "Styles"

Prise en charge du mot clé `revert`.

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

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

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.

Pointez sur une valeur de l'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 niveau de module de couleur CSS 4 indique que les fonctions de couleur telles que rgb() doivent accepter les arguments séparés par un espace. Par exemple, rgb(0, 0, 0) correspond à rgb(0 0 0).

Lorsque vous choisissez des couleurs avec le sélecteur de couleurs ou que vous alternez entre différentes représentations de couleurs dans le volet "Styles" en maintenant la touche Maj enfoncée, puis en cliquant sur la valeur de couleur, vous voyez désormais la syntaxe des arguments séparés par des espaces.

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

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

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

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

Bug Chromium: #1072952

Abandon du volet Properties (Propriétés) du panneau "Elements" (Éléments)

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

Volet "Properties" (Propriétés) obsolète

Références :

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 Accomplissez vos tâches rapidement avec les raccourcis d'applications.

Raccourcis d'application dans le volet "Manifeste".

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.