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 Problèmes du panneau permet de limiter l'accoutumance aux notifications Console Actuellement, la console est l'endroit central pour les développeurs de sites web, les bibliothèques, et Chrome pour consigner les messages, avertissements et erreurs. L'onglet "Problèmes" présente les avertissements du navigateur de manière structurée, agrégée et exploitable, les liens vers les ressources 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 des avertissements de Chrome s'afficheront dans l'onglet "Problèmes" plutôt que dans la console, ce qui devrait aider désencombrer la console.

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.

Bug Chromium: #1068116

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

L'info-bulle du mode d'inspection indique désormais si l'élément a un nom et un rôle accessibles. et peut être sélectionné à l'aide du clavier.

Bug Chromium: #1040025

Mises à jour du panneau "Performances"

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

Une fois que vous avez enregistré vos performances de chargement, le panneau "Performances" affiche désormais Total Blocking Time (Temps total de blocage). (TBT) dans le pied de page. Il s'agit d'une métrique de performances de chargement qui aide à quantifier prend une page pour être 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. L'atelier "TBT" est le principal atelier pour estimer le délai de première entrée, 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 la page Actualiser. pour enregistrer les performances de chargement des pages. Cliquez plutôt sur Record (Enregistrer). , actualiser manuellement la page, attendre que la page se charge, puis arrêter 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 avaient besoin 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. La métrique CLS (Cumulative Layout Shift) est une métrique qui peut vous aider à quantifier l'instabilité visuelle indésirable est l'un des nouveaux 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é). Pointer le curseur sur les champs Moved from (Déplacé vers) et Moved to (Déplacé vers) pour voir où le décalage de mise en page s'est produit.

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:

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

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, ce qui annule la valeur la valeur en cascade d'une propriété telle qu'elle aurait été si aucune modification n'avait été apportée au le 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 couleur utilise désormais une notation 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 être compatibles 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 alternez entre les représentations des couleurs dans la Dans le volet "Styles", en maintenant la touche Maj enfoncée et en cliquant sur la valeur de couleur, les valeurs séparées par un espace s'affichent. d'argument.

Vous verrez également la syntaxe dans le volet "Computed" (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, comme color(), ne sont pas compatibles avec syntaxe d'arguments séparées par une virgule obsolète.

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 Notations de couleur fonctionnelles séparées par des espaces ?

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 console.dir($0) dans à la console.

Références :

• console.dir()
• $0

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. L'application le menu des raccourcis ne s'affiche que pour les progressive web apps installées sur le bureau de l'utilisateur appareil mobile.

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

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement