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

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

Jecelyn Yeen

Fonctionnalité preview: nouveau panneau "Insights sur les performances"

Le panneau Insights sur les performances fournit des insights exploitables et basés sur des cas d'utilisation, sur les performances de votre site Web.

Ouvrez le panneau et démarrez un nouvel enregistrement basé sur votre cas d'utilisation. Par exemple, mesurons le chargement de cette page de démonstration.

Nouveau panneau "Insights sur les performances"

Une fois l'enregistrement terminé, les insights sur les performances s'affichent dans le volet Insights (Statistiques). Cliquez sur chaque élément d'insight (par exemple, la requête bloquant l'affichage ou le décalage de mise en page) pour comprendre le problème et les solutions potentielles.

Accédez à la documentation du panneau Insights sur les performances pour en savoir plus grâce au tutoriel détaillé.

Il s'agit d'une fonctionnalité en preview permettant aux développeurs Web (en particulier aux non-experts en performances) d'identifier et de résoudre les éventuels problèmes de performances. Notre équipe travaille activement sur cette fonctionnalité, et nous avons besoin de vos commentaires pour l'améliorer.

Problème Chromium: 1270700

Nouveaux raccourcis pour émuler les thèmes clair et sombre

Vous pouvez désormais émuler plus rapidement les thèmes clair et sombre (fonctionnalité multimédia CSS prefers-color-scheme) grâce aux nouveaux raccourcis du volet Styles.

Auparavant, l'émulation des thèmes dans l'onglet Rendu nécessitait davantage d'étapes.

Nouveaux raccourcis pour émuler les thèmes clair et sombre

Problème Chromium: 1314299

Amélioration de la sécurité dans l'onglet "Aperçu sur le réseau"

Les outils de développement appliquent désormais CSP (Content Security Policy) dans l'onglet Aperçu du panneau Réseau.

Par exemple, la première capture d'écran montre une page qui comporte du contenu mixte. La page se charge via une connexion HTTPS sécurisée, mais la feuille de style se charge via une connexion HTTP non sécurisée.

Le navigateur a bloqué la demande de feuille de style par défaut. Toutefois, lorsque vous avez ouvert la page via l'onglet Aperçu du panneau Réseau, la feuille de style n'était pas bloquée auparavant (l'arrière-plan est donc devenu rouge). Il est désormais bloqué comme prévu (deuxième capture d'écran).

Améliorer la sécurité dans l'onglet "Aperçu sur le réseau"

Problème Chromium: 833147

Amélioration de l'actualisation au point d'arrêt

Le débogueur met désormais fin à l'exécution du script lors de l'actualisation au niveau du point d'arrêt.

Par exemple, dans cette démonstration React, le script était précédemment en boucle lors de la définition et de l'actualisation du point d'arrêt ReactDOM. Le panneau Sources ne fonctionne plus en raison de la boucle sans fin.

Continuer à exécuter JavaScript pose beaucoup de problèmes aux développeurs et peut entraîner un dysfonctionnement du moteur de rendu. Cette modification permet d'aligner le comportement de débogage sur d'autres navigateurs tels que Firefox.

Amélioration de l'actualisation au point d'arrêt

Problèmes Chromium: 1014415, 1004038, 1112863, 1134899

Mises à jour de la console :

Gérer les erreurs d'exécution de scripts dans la console

Les erreurs lors de l'évaluation des scripts dans la console génèrent désormais des événements d'erreur corrects qui déclenchent le gestionnaire window.onerror et sont envoyés en tant qu'événements "error" sur l'objet window.

Gérer les erreurs d'exécution de scripts dans la console

Problème Chromium: 1295750

Valider l'expression active avec Entrée

Une fois que vous avez fini de saisir une expression active, vous pouvez cliquer sur Enter pour la valider. Auparavant, appuyer sur Entrée entraînait l'ajout de nouvelles lignes. Cela ne correspond pas aux autres parties des outils de développement.

Pour ajouter une ligne dans l'éditeur d'expressions en direct, utilisez Shift+Enter à la place.

Valider l'expression active avec Entrée

Problème Chromium: 1260744

Annuler l'enregistrement du flux utilisateur au début

Vous pouvez annuler l'enregistrement au début de l'enregistrement du flux utilisateur. Auparavant, il n'était pas possible d'annuler l'enregistrement.

Annuler l'enregistrement du flux utilisateur au début

Problème Chromium: 1257499

Afficher les pseudo-éléments de mise en surbrillance hérités dans le volet "Styles"

Affichez les pseudo-éléments de mise en surbrillance hérités (par exemple, ::selection, ::spelling-error, ::grammar-error et ::highlight) dans le volet Styles. Auparavant, ces règles n'étaient pas affichées.

Comme indiqué dans la spécification, lorsque plusieurs styles sont en conflit, la règle "cascade" détermine le style gagnant. Cette nouvelle fonctionnalité vous aide à comprendre l'héritage et la priorité des règles.

Remarque:Pour le moment, vous devez exécuter Chrome avec l'indicateur --enable-blink-features=HighlightInheritance pour activer cette fonctionnalité.

Afficher les pseudo-éléments de mise en surbrillance hérités dans le volet "Styles"

Problème Chromium: 1024156

Points forts divers

Voici quelques correctifs importants dans cette version:

Le volet Properties (Propriétés) affiche désormais les propriétés d'accesseur avec une valeur par défaut. Il a été masqué par erreur auparavant. (1309087).
Le volet Styles affiche désormais correctement les règles @support remplacées et barrées. Auparavant, les règles n'étaient pas barrées. (1298025).
Correction de la logique de mise en forme CSS dans le panneau Sources, qui entraînait plusieurs lignes vides lors de la modification du code CSS. (1309588).
Limitez l'option Développer de manière récursive à un maximum de 100 objets dans la console afin qu'elle ne s'étende pas indéfiniment pour les objets circulaires. (1272450).

[Expérimental] Copier les modifications CSS

Avec ce test, le volet Styles met en évidence vos modifications CSS en vert. Pointez sur les règles modifiées, puis cliquez sur le bouton "Nouvelle copie" situé à côté pour les copier.

Vous pouvez également copier toutes les modifications CSS d'une déclaration à l'autre en effectuant un clic droit sur une règle et en sélectionnant Copier toutes les modifications CSS.

Un nouveau bouton Copier a été ajouté à l'onglet Modifications pour vous aider à suivre et copier facilement vos modifications CSS.

Copier les modifications CSS

Problème Chromium: 1268754

[Expérimental] Sélection d'une couleur en dehors du navigateur

Activez ce test pour choisir une couleur en dehors du navigateur à l'aide du sélecteur de couleur. Auparavant, vous ne pouviez choisir qu'une couleur dans le navigateur.

Dans le volet Styles, cliquez sur un aperçu d'une couleur pour ouvrir le sélecteur de couleur. Avec la pipette, choisissez une couleur où que vous soyez.

Choix d'une couleur en dehors du navigateur

Problème Chromium: 1245191

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.