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

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

Jecelyn Yeen

Fonctionnalité en preview: Nouveau panneau "Informations sur les performances"

Le panneau Informations sur les performances vous permet d'obtenir des insights exploitables sur les performances de votre site Web, basés sur des cas d'utilisation.

Ouvrez le panneau et commencez un nouvel enregistrement en fonction de votre cas d'utilisation. Mesurons par exemple le chargement de cette page de démonstration.

Nouveau panneau "Informations sur les performances"

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

Pour en savoir plus, consultez le tutoriel détaillé dans la documentation du panneau Informations sur les performances.

Il s'agit d'une fonctionnalité en version preview qui permet aux développeurs Web (en particulier ceux qui ne sont pas experts en performances) d'identifier et de résoudre d'éventuels problèmes de performances. Notre équipe travaille activement sur cette fonctionnalité et nous aimerions connaître votre avis pour l'améliorer.

Problème Chromium: 1270700

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

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

Auparavant, la procédure d'émulation des thèmes dans l'onglet Affichage était plus importante.

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 du réseau"

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

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

Le navigateur a bloqué la requête 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). Elle est désormais bloquée comme prévu (deuxième capture d'écran).

Améliorer la sécurité dans l'onglet "Aperçu du 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 point d'arrêt.

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

Continuer à exécuter JavaScript pose beaucoup de problèmes aux développeurs et peut laisser le moteur de rendu dans un état défectueux. Cette modification permet d'aligner le comportement de débogage sur celui 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 script dans la console

Les erreurs lors de l'évaluation du script dans la console génèrent désormais des événements d'erreur appropriés 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 script dans la console

Problème Chromium: 1295750

Valider l'expression active avec Entrée

Une fois que vous avez terminé 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 actives, utilisez plutôt Shift + Enter.

Valider l'expression active avec Entrée

Problème Chromium: 1260744

Annuler l'enregistrement du parcours 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 parcours 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, en cas de conflit entre plusieurs styles, la 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 importants divers

Voici quelques correctifs importants dans cette version:

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

[Expérimental] Copier les modifications CSS

Dans ce test, les modifications apportées au code CSS sont mises en surbrillance en vert dans le volet Styles. Vous pouvez pointer sur les règles modifiées, puis cliquer 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. Pour ce faire, effectuez un clic droit sur une règle, puis sélectionnez 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] Choix 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 une couleur que dans le navigateur.

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

Choix de la couleur en dehors du navigateur

Problème Chromium: 1245191

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.