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" offre désormais une meilleure prise en charge de la modification des styles créés avec les API CSSOM (CSS Object Model). 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. 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 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. Consultez la page Nouveautés de Lighthouse 6.0 pour obtenir un résumé de toutes les modifications majeures, ou consultez 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. L'option "TBT" est un proxy de mesure en laboratoire pour un autre Core Web Vitals, le First Input Delay.

La formule du score de performance a également été repondéré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)

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. Pour comprendre pourquoi elle a été abandonnée, consultez First Meaningful Paint.

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 des propriétés en chaînage : dans la console, la saisie semi-automatique des propriétés est désormais compatible avec la syntaxe de chaînage facultative. Par exemple, name?. fonctionne désormais en plus de name. et name[.
Mise en surbrillance de la syntaxe pour les champs privés : les champs de classe privés sont désormais correctement mis en surbrillance en termes de syntaxe et correctement imprimés dans le panneau "Sources".
Mise en surbrillance de la syntaxe pour l'opérateur de fusion 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 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 s'écoule 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 satisfaite.

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 pour toutes les tailles de 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 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. Il est ainsi plus clair que vous consultez des données binaires et cela est plus cohérent avec la façon dont l'environnement d'exécution Wasm référence les emplacements.

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 coupent le contenu de la ligne actuel. 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", toute la ligne 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 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. Auparavant, il s'appliquait simplement à des messages similaires.

Par exemple, auparavant, les outils de développement n'avaient pas dissocié les messages hello, même si l'option Group similar (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 étaient réinitialisés chaque fois que vous fermiez puis rouvrez les outils de développement. Cette modification garantit la cohérence du comportement du paramètre 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é" 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 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 heures dans les règles en fonction du début de l'enregistrement. Ce comportement a maintenant changé pour les enregistrements où l'utilisateur navigue, où les outils de développement affichent désormais les temps de règle par rapport à la navigation.

Aligner les temps 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'ils correspondent au début de la navigation, ce qui signifie qu'ils correspondent aux délais signalé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. 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

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.