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

Jecelyn Yeen

Modification du style pour les frameworks CSS-in-JS

Le volet "Styles" permet désormais de mieux modifier les styles créés avec les API CSS Object Model (CSSOM). De nombreux frameworks et bibliothèques CSS-in-JS utilisent les API CSSOM en interne pour construire des styles.

Vous pouvez également modifier les styles ajoutés en JavaScript à l'aide des feuilles de style constructibles. Les feuilles de style constructibles sont une nouvelle façon de créer et de distribuer des styles réutilisables lorsque vous utilisez Shadow DOM.

Par exemple, les styles h1 ajoutés avec CSSStyleSheet (API CSSOM) n'étaient pas modifiables auparavant. Vous pouvez désormais modifier les éléments suivants dans le volet "Styles" :

Problème Chromium #946975

Lighthouse 6 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 6. Consultez Nouveautés de Lighthouse 6.0 pour obtenir un récapitulatif de toutes les modifications majeures, ou les notes de version 6.0.0 pour obtenir la liste complète de toutes les modifications.

Lighthouse 6.0 introduit trois nouvelles métriques dans le rapport : Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) et Total Blocking Time (TBT). LCP et CLS sont deux des nouvelles métriques Core Web Vitals de Google. TBT est une mesure de laboratoire qui sert de proxy pour une autre métrique Core Web Vitals, le First Input Delay.

La formule du score de performances a également été pondérée à nouveau pour mieux refléter l'expérience de chargement des utilisateurs.

Nouvelles métriques de performances dans Lighthouse 6.0

Problème Chromium #772558

Abandon de First Meaningful Paint (FMP)

La métrique First Meaningful Paint (FMP) est obsolète dans Lighthouse 6.0. Il a également été supprimé du panneau "Performances". Largest Contentful Paint est le remplacement recommandé pour FMP. Pour comprendre pourquoi elle a été abandonnée, consultez First Meaningful Paint.

Problème Chromium #1096008

Compatibilité avec de nouvelles fonctionnalités JavaScript

Les outils de développement offrent désormais une meilleure prise en charge de certaines des dernières fonctionnalités du langage JavaScript :

  • L'auto-complétion de la syntaxe chaînage optionnel : l'auto-complétion des propriétés dans la console prend désormais en charge la syntaxe de chaînage optionnel. Par exemple, name?. fonctionne désormais en plus de name. et name[.
  • Mise en surbrillance syntaxique pour les champs privés : les champs de classe privés sont désormais correctement mis en surbrillance syntaxique et mis en forme dans le panneau "Sources".
  • Mise en surbrillance de la syntaxe pour l'opérateur de coalescence nullish : les outils de développement affichent désormais correctement l'opérateur de coalescence nullish dans le panneau "Sources".

Problèmes Chromium : #1083214, #1073903, #1083797

Nouveaux avertissements concernant les 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 volet "Manifeste" affiche désormais des avertissements si :

  • les icônes de raccourci de l'application sont plus petites que 96 x 96 pixels.
  • les icônes de raccourci d'application et les icônes de fichier manifeste ne sont pas carrées (elles seront ignorées)

Avertissements concernant les raccourcis d'application

Problème Chromium #955497

Événements respondWith du service worker dans l'onglet "Timing"

L'onglet "Timing" du panneau "Réseau" inclut désormais les événements respondWith des service workers. respondWith correspond au temps écoulé entre le moment où le gestionnaire d'événements fetch du service worker s'exécute et le moment où la promesse respondWith du gestionnaire fetch est résolue.

`respondWith` du service worker

Problème Chromium #1066579

Affichage cohérent du volet "Calculé"

Le volet "Calculé" du panneau "Éléments" s'affiche désormais de manière cohérente en tant que volet pour toutes les tailles de fenêtre d'affichage. Auparavant, le volet "Calculé" était fusionné dans le volet "Styles" lorsque la largeur de la fenêtre d'affichage des outils de développement était étroite.

Problème Chromium #1073899

Décalages de bytecode pour les fichiers WebAssembly

Les outils de développement utilisent désormais des décalages de bytecode pour afficher les numéros de ligne du désassemblage Wasm. Cela indique plus clairement que vous examinez des données binaires et est plus cohérent avec la façon dont le runtime Wasm référence les emplacements.

Décalages du bytecode

Problème Chromium #1071432

Copier et couper des lignes dans le panneau "Sources"

Lorsque vous copiez ou coupez du contenu sans effectuer de sélection dans l'éditeur du panneau "Sources", les outils de développement copient ou coupent le contenu de la ligne actuelle. Par exemple, dans la vidéo ci-dessous, le curseur se trouve à la fin de la ligne 1. Après avoir appuyé sur le raccourci clavier de couper, la ligne entière est copiée dans le presse-papiers et supprimée.

Problème Chromium #800028

Modifications apportées aux paramètres de la console

Dissocier les messages de console identiques

L'option Regrouper les messages similaires dans les paramètres de la console s'applique désormais aux messages en double. Auparavant, elle ne s'appliquait qu'aux messages similaires.

Par exemple, auparavant, les outils de développement ne dissociaient pas les messages hello même si l'option Regrouper les messages semblables était décochée. Désormais, les messages hello ne sont plus groupés :

Problème Chromium #1082963

Conserver les paramètres Contexte sélectionné uniquement

Les paramètres Contexte sélectionné uniquement dans les paramètres de la console sont désormais conservés. Auparavant, les paramètres étaient réinitialisés chaque fois que vous fermiez et rouvriez les outils de développement. Cette modification permet d'harmoniser le comportement du paramètre avec les autres options des paramètres de la console.

Contexte sélectionné uniquement

Problème Chromium #1055875

Modifications apportées au panneau "Performances"

Informations sur le cache de compilation JavaScript dans le panneau "Performances"

Les informations sur le cache de compilation JavaScript sont désormais toujours affichées dans l'onglet "Résumé" du panneau "Performances". Auparavant, les outils de développement n'affichaient rien concernant la mise en cache du code si celle-ci n'avait pas eu lieu.

Informations sur le cache de compilation JavaScript

Problème Chromium #912581

Auparavant, le panneau "Performances" affichait les heures dans les règles en fonction du moment où l'enregistrement avait commencé. Cela a changé pour les enregistrements où l'utilisateur navigue. Les outils de développement affichent désormais les temps de règle par rapport à la navigation.

Aligner le timing de navigation dans le panneau "Performances"

Nous avons également mis à jour les heures des événements DOMContentLoaded, First Paint, First Contentful Paint et Largest Contentful Paint pour qu'elles soient relatives au début de la navigation. Elles correspondent donc aux timings signalés par PerformanceObserver.

Problème Chromium #974550

Nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation

Le panneau Sources présente de nouveaux designs pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation. Les points d'arrêt bénéficient d'un nouveau design de drapeau avec des couleurs plus vives et plus conviviales. Des icônes sont ajoutées pour différencier les points d'arrêt conditionnels et les points de journalisation.

Points d'arrêt

Problème Chromium #1041830

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.

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.