Cette page a été traduite par l'API Cloud Translation.

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

Jecelyn Yeen

Modification du style pour les frameworks CSS-in-JS

Le volet "Styles" prend désormais mieux en charge 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 arrière-plan pour créer des styles.

Désormais, vous pouvez également modifier les styles ajoutés en JavaScript à l'aide de feuilles de style constructibles. Les feuilles de style constructibles constituent 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) ne peuvent pas être modifiés 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 utilise désormais Lighthouse 6. Consultez la page Nouveautés de Lighthouse 6.0 pour obtenir 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 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 sont deux des nouveaux Core Web Vitals de Google, tandis que la fonctionnalité Toboggans est un proxy de mesure de laboratoire pour un autre signal Core Web Vitals, le premier délai d'entrée.

La formule du score de performance a également été réévaluée pour mieux refléter l'expérience de chargement des utilisateurs.

Nouvelles métriques de performances dans Lighthouse 6.0

Problème Chromium n° 772558

Abandon de First Meaningful Paint (FMP)

La méthode First Meaningful Paint (FMP) est obsolète dans Lighthouse 6.0. Elle a également été supprimée du panneau "Performances". La technique Largest Contentful Paint est recommandée pour remplacer FMP. Consultez la section First Meaningful Paint pour en savoir plus sur les raisons de son abandon.

Problème Chromium n° 1096008

Prise en charge des nouvelles fonctionnalités JavaScript

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

Saisie semi-automatique de la syntaxe de chaînage facultatif : la saisie semi-automatique des propriétés dans la console accepte désormais la syntaxe de chaînage facultative (par exemple, name?. fonctionne désormais en plus de name. et name[).
Mise en surbrillance de la syntaxe des champs privés : les champs de classe privés sont désormais correctement mis en surbrillance et correctement mis en évidence dans le panneau "Sources".
Mise en surbrillance de la syntaxe de l'opérateur de coalisation null : les outils de développement impriment désormais correctement l'opérateur de coalisation null dans le panneau des sources.

Problèmes Chromium n° 1083214, n° 1073903, #1083797

Nouveaux avertissements de raccourcis d'appli 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 dans les cas suivants:

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

Avertissements liés aux raccourcis d'applis

Problème Chromium #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 est l'heure qui précède immédiatement l'exécution du gestionnaire d'événements fetch du service worker jusqu'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, quelle que soit la taille de la fenêtre d'affichage. Auparavant, le volet "Calculé" fusionnait dans le volet "Styles" lorsque la largeur de la fenêtre d'affichage des outils de développement était étroite.

Problème Chromium n° 1073899

Décalages de Bytecode pour les fichiers WebAssembly

Les outils de développement utilisent désormais des décalages bytecode pour afficher les numéros de ligne du démontage Wasm. Cela indique plus clairement que vous examinez des données binaires et est plus cohérent avec la manière dont l'environnement d'exécution Wasm référence les emplacements.

Décalages de bytecode

Problème Chromium n° 1071432

Copier et couper au niveau de la ligne dans le panneau des sources

Lorsque vous effectuez un copier-coller sans sélection dans l'éditeur du panneau des 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 "Couper", la ligne entière est copiée dans le presse-papiers et supprimée.

Problème Chromium n° 800028

Mises à jour des paramètres de la console

Dégrouper les mêmes messages de console

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

Par exemple, précédemment, les outils de développement ne dissociaient pas les messages hello même si l'option Group similaire était décochée. Les messages hello ne sont plus regroupé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 étaient réinitialisés chaque fois que vous fermiez et rouvrez les outils de développement. Cette modification concorde le comportement des paramètres avec les autres options des paramètres de la console.

Contexte sélectionné uniquement

Problème Chromium n° 1055875

Informations sur le 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 aucune information liée à la mise en cache du code si celle-ci n'avait pas lieu.

Informations sur le cache de compilation JavaScript

Problème Chromium n° 912581

Alignement du temps de navigation dans le panneau "Performances"

Le panneau "Performances" affichait les temps dans les règles en fonction du début de l'enregistrement. Cela a maintenant changé pour les enregistrements où l'utilisateur parcourt, où les outils de développement affichent désormais les temps de la règle en fonction de la navigation.

Ajustez le temps de navigation dans le panneau "Performances"

Nous avons également modifié les horaires des événements DOMContentLoaded, First Paint, First Contentful Paint et Largest Contentful Paint pour qu'ils soient liés au début de la navigation, c'est-à-dire qu'ils correspondent aux délais 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 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 affichent une conception d'indicateur actualisée, 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 n° 1041830

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.