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

Jecelyn Yeen

Modification des styles pour les frameworks CSS-in-JS

Le volet "Styles" est désormais mieux adapté à la modification des 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 créer des styles.

Vous pouvez également modifier les styles ajoutés en JavaScript à l'aide de feuilles de style construesibles. Les feuilles de style construesibles 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 les modifier 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). Le LCP et le CLS font partie des nouvelles métriques Core Web Vitals de Google, et le TBT est un proxy de mesure en laboratoire pour une autre métrique Core Web Vitals, le délai avant la première entrée.

La formule du score de performances a également été recalculée 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)

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 en savoir plus sur la raison de son abandon, consultez First Meaningful Paint (Première peinture significative).

Problème Chromium 1096008

Compatibilité avec les nouvelles fonctionnalités JavaScript

Les outils de développement sont désormais mieux compatibles avec certaines des dernières fonctionnalités du langage JavaScript:

  • Auto-complétion de la syntaxe de chaînement facultatif : l'auto-complétion des propriétés dans la console est désormais compatible avec la syntaxe de chaînage facultatif. Par exemple, name?. fonctionne désormais en plus de name. et name[.
  • Mise en surbrillance syntaxique des 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 nulle : DevTools affiche désormais correctement l'opérateur de coalescence nulle dans le panneau "Sources".

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

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

  • Les icônes de raccourcis d'application sont inférieures à 96 x 96 pixels
  • Les icônes de raccourci d'application et les icônes de fichier manifeste ne sont pas carrées (car 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 "Network" inclut désormais les événements respondWith du service worker. respondWith correspond au moment immédiatement avant l'exécution du gestionnaire d'événements fetch du service worker jusqu'au 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 "Comptabilisé" du panneau "Éléments" s'affiche désormais de manière cohérente dans toutes les tailles de fenêtre. Auparavant, le volet "Computed" (Calculé) se fusionnait dans le volet "Styles" (Styles) lorsque la largeur de la fenêtre d'affichage des outils de développement était étroite.

Problème Chromium 1073899

Décalages de code octet pour les fichiers WebAssembly

DevTools utilise désormais des décalages de bytecode pour afficher les numéros de ligne de désassemblage Wasm. Cela permet de voir plus clairement que vous consultez des données binaires et est plus cohérent avec la façon dont l'environnement d'exécution Wasm fait référence aux emplacements.

Décalages de bytecode

Problème Chromium 1071432

Copier et couper par ligne dans le panneau "Sources"

Lorsque vous effectuez une copie ou une suppression sans sélection dans l'éditeur du panneau "Sources", DevTools copie ou supprime le contenu de la ligne actuelle. Par exemple, dans la vidéo ci-dessous, le curseur se trouve à la fin de la ligne 1. Une fois que vous avez appuyé sur le raccourci clavier Couper, la ligne entière est copiée dans le presse-papiers et supprimée.

Problème Chromium 800028

Mises à jour des paramètres de la console

Dégrouper les messages de console identiques

Le bouton Regrouper les similaires des 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, DevTools ne dissociait pas les messages hello, même si l'option Group similar (Grouper les similaires) n'était pas cochée. Les messages hello ne sont plus regroupés:

Problème Chromium 1082963

Paramètres Contexte sélectionné uniquement persistants

Les paramètres Sélectionner uniquement le contexte 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 rouvrez les outils de développement. Cette modification rend le comportement du paramètre cohérent avec les autres options de la console.

Contexte sélectionné uniquement

Problème Chromium 1055875

Mises à jour du 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 pour les développeurs n'affichaient rien en rapport avec le cache de code si le cache de code ne s'était pas produit.

Informations sur le cache de compilation JavaScript

Problème Chromium 912581

Le panneau "Performances" affichait les temps dans les repères en fonction du début de l'enregistrement. Cela a changé pour les enregistrements où l'utilisateur navigue, où DevTools affiche désormais les temps de la règle par rapport à la navigation.

Aligner le timing de navigation dans le panneau "Performances"

Nous avons également mis à jour les temps des événements DOMContentLoaded, First Paint, First Contentful Paint et Largest Contentful Paint pour qu'ils soient relatifs au début de la navigation, ce qui signifie qu'ils correspondent aux temps indiqué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 nouvelles conceptions pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation. Les repères bénéficient d'un nouveau design de drapeau avec des couleurs plus vives et plus conviviales. Des icônes sont ajoutées pour distinguer 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 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.

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.