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

Jecelyn Yeen

Modification du style pour les frameworks CSS-in-JS

Le volet "Styles" offre désormais une meilleure prise en charge de la modification des styles créés avec l'objet CSS de modèles (CSSOM). De nombreux frameworks et bibliothèques CSS-in-JS utilisent les API CSSOM en arrière-plan pour créer des styles.

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

Par exemple, les styles h1 ajoutés avec CSSStyleSheet (API CSSOM) ne pouvaient pas être modifiés auparavant. Les éléments suivants sont désormais modifiables dans le volet "Styles" :

Problème Chromium n° 946975

Lighthouse 6 dans le panneau Lighthouse

Le panneau Lighthouse exécute désormais Lighthouse 6. Découvrez les nouveautés de Lighthouse 6.0 un résumé de toutes les modifications majeures ou les notes de version de la version 6.0.0 pour obtenir la liste complète des 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 sont deux des nouveaux Core Web Vitals, qui est un proxy de mesure en laboratoire pour une autre métrique Core Web Vitals, la première entrée Délai.

La formule du score de performance a également été repondérée pour mieux refléter chargement... expérience.

Nouvelles métriques de performances dans Lighthouse 6.0

Problème Chromium n° 772558

Abandon de First Meaningful Paint (FMP)

First Meaningful Paint (FMP) est obsolète dans Lighthouse 6.0. Elle a également été supprimée du Panneau "Performances". Nous vous recommandons d'utiliser Largest Contentful Paint pour remplacer FMP. Voir Tout d'abord Meaningful Paint pour savoir pourquoi elle a été abandonnée.

Problème Chromium n° 1096008

Compatibilité avec de nouvelles fonctionnalités JavaScript

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

  • Saisie semi-automatique de la syntaxe de chaînage (facultatif) : pour le moment, la saisie semi-automatique des propriétés est disponible dans la console. prend en charge la syntaxe de chaînage facultative, par exemple name?. fonctionne désormais en complément de name. et name[.
  • Mise en surbrillance de la syntaxe pour les champs privés (les champs de classe privés sont désormais corrects) sont mises en surbrillance et sont joliment imprimées dans le panneau Sources.
  • Mise en surbrillance de la syntaxe pour l'opérateur de fusion Nullish : les outils de développement effectuent désormais correctement l'impression élégante. l'opérateur de fusionnement nulle dans le panneau Sources.

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

Nouveaux avertissements de raccourci 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.

Le volet "Manifest" (Manifeste) affiche désormais des avertissements dans les cas suivants:

  • La taille des icônes de raccourci de l'application est inférieure à 96 x 96 pixels.
  • Les icônes de raccourci de l'application et celles du fichier manifeste ne sont pas carrées (elles seront ignorées).

Avertissements concernant les raccourcis d'application

Problème Chromium n° 955497

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

L'onglet "Durée" du panneau "Réseau" inclut désormais les événements respondWith du service worker. respondWith correspond à l'heure qui précède l'exécution du gestionnaire d'événements fetch du service worker et au moment où La promesse respondWith du gestionnaire fetch est réglée.

service worker "respondWith"

Problème Chromium n° 1066579

Affichage cohérent du volet "Calculé"

Le volet "Calculé" du panneau "Éléments" s'affiche désormais de manière cohérente sous la forme d'un volet dans toutes les fenêtres d'affichage. différentes. Auparavant, le volet "Calculé" était fusionné dans le volet "Styles" lorsque la largeur de la DevTools' la fenêtre d'affichage était étroite.

Problème Chromium n° 1073899

Décalages d'octets de code 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émontage de Wasm. Ainsi, que vous examinez des données binaires et qu'il est plus cohérent avec la façon dont l'environnement d'exécution Wasm fait référence à des lieux.

Décalages d'octets de code

Problème Chromium n° 1071432

Copie et coupe au niveau des lignes dans le panneau "Sources"

Lorsque vous effectuez une copie ou une coupe sans sélection dans l'éditeur du panneau "Sources", les outils de développement copient ou couper le contenu actuel de la ligne. Par exemple, dans la vidéo ci-dessous, le curseur se trouve à la fin de (ligne 1). Après avoir appuyé sur le raccourci clavier "Couper", toute la ligne est copiée dans le presse-papiers et supprimés.

Problème Chromium n° 800028

Mises à jour des paramètres de la console

Dégrouper des messages de console identiques

Le bouton Regrouper les messages similaires dans les paramètres de la console s'applique désormais aux messages en double. Précédemment, qui s'applique à des messages similaires.

Par exemple, auparavant, les outils de développement ne dégroupaient pas les messages hello, même si l'option Groupe similaire n'est pas cochée. Les messages hello sont maintenant dissociés:

Problème Chromium n° 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 ont été réinitialisés chaque fois que vous avez fermé ou rouvert les outils de développement. Le comportement du paramètre cohérente avec les autres options des paramètres de la console.

Contexte sélectionné uniquement

Problème Chromium n° 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é" de Panneau "Performances". Auparavant, les outils de développement n'affichaient rien concernant la mise en cache du code si celui-ci mise en cache n'a pas eu lieu.

Informations sur le cache de compilation JavaScript

Problème Chromium n° 912581

Le panneau "Performances" affichait les heures dans les règles en fonction du début de l'enregistrement. Il contient modifié pour les enregistrements consultés par l'utilisateur, où les outils de développement affichent désormais les temps de la règle à la navigation.

Aligner les temps de navigation dans le panneau "Performances"

Nous avons également modifié les horaires pour DOMContentLoaded, First Paint, First Contentful Paint et Largest Les événements Contentful Paint doivent être liés au début de la navigation, ce qui signifie qu'ils correspondent au codes temporels indiqués par PerformanceObserver.

Problème Chromium n° 974550

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

Le panneau Sources propose de nouvelles conceptions pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation. Les points d'arrêt font peau neuve avec des couleurs plus vives et plus conviviales. Les icônes sont ajoutées différencier les points d'arrêt conditionnels et les points de journalisation.

Points d'arrêt

Problème Chromium n° 1041830

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   Plus > 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