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

Jecelyn Yeen

Fonctionnalité en avant-première : nouveau panneau "Informations sur les performances"

Utilisez le panneau Insights sur les performances pour obtenir des insights exploitables et axés sur les cas d'utilisation concernant les performances de votre site Web.

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

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

Pour en savoir plus, consultez la documentation sur le panneau Informations sur les performances et suivez le tutoriel pas à pas.

Il s'agit d'une fonctionnalité en avant-première qui aide les développeurs Web (en particulier ceux qui ne sont pas des experts en performances) à identifier et à résoudre les problèmes de performances potentiels. Notre équipe travaille activement sur cette fonctionnalité et est impatiente de recueillir 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 (caractéristique média CSS prefers-color-scheme) grâce aux nouveaux raccourcis du volet Styles.

Auparavant, il fallait plus d'étapes pour émuler des thèmes dans l'onglet Rendu.

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 la Content Security Policy (CSP) dans l'onglet Aperçu du panneau Réseau.

Par exemple, la première capture d'écran montre une page contenant 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 requête de feuille de style par défaut. Toutefois, lorsque vous ouvriez la page via l'onglet Aperçu du panneau Réseau, la feuille de style n'était pas bloquée auparavant (d'où le fond rouge). Il est désormais bloqué comme prévu (deuxième capture d'écran).

Problème Chromium : 833147

Amélioration du rechargement au point d'arrêt

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

Par exemple, le script entrait dans une boucle sans fin lors de la définition et du rechargement au point d'arrêt ReactDOM dans cette démonstration React. Le panneau Sources s'est cassé à cause de la boucle infinie.

L'exécution continue de JavaScript pose de nombreux problèmes aux développeurs et peut laisser le moteur de rendu dans un état défectueux. Ce changement aligne le comportement de débogage sur celui d'autres navigateurs comme Firefox.

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 survenant 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 distribués en tant qu'événements "error" sur l'objet window.

Problème Chromium : 1295750

Valider une expression active avec la touche Entrée

Une fois que vous avez terminé de saisir une expression en direct, vous pouvez cliquer sur Enter pour l'enregistrer. Auparavant, appuyer sur Entrée permettait d'ajouter des lignes. Cela ne correspond pas aux autres parties des outils de développement.

Pour ajouter une ligne dans l'éditeur d'expression en direct, utilisez plutôt Shift + Enter.

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 parcours utilisateur. Auparavant, il n'était pas possible d'annuler l'enregistrement.

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 cascade détermine le style gagnant. Cette nouvelle fonctionnalité vous aide à comprendre l'héritage et la priorité des règles.

Problème Chromium : 1024156

Autres points importants

Voici quelques corrections importantes apportées dans cette version :

• Le volet Propriétés affiche désormais les propriétés d'accesseur avec une valeur par défaut. Il avait été masqué par erreur auparavant. (1309087)
• Le volet Styles affiche désormais correctement les règles @support remplacées comme 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 l'affichage de plusieurs lignes vides lors de la modification du CSS. (1309588)
• Limitez l'option Développer de manière récursive d'un objet dans la console à 100 maximum pour qu'elle ne s'exécute pas indéfiniment pour les objets circulaires. (1272450)

[Expérimental] Copier les modifications CSS

Dans ce test, le volet Styles met en évidence en vert les modifications apportées à votre CSS. Vous pouvez pointer sur les règles modifiées et cliquer sur le nouveau bouton "Copier" à côté pour les copier.

Vous pouvez également copier toutes les modifications CSS dans les déclarations en effectuant un clic droit sur une règle, puis en sélectionnant Copier toutes les modifications CSS.

Un nouveau bouton Copier a également été ajouté à l'onglet Modifications pour vous aider à suivre et à copier facilement les modifications apportées à votre CSS.

Problème Chromium : 1268754

[Expérimental] Sélectionner une couleur en dehors du navigateur

Activez cette fonctionnalité expérimentale 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 l'aperçu d'une couleur pour ouvrir le sélecteur de couleur. Utilisez la pipette pour sélectionner une couleur n'importe où.

Problème Chromium : 1245191

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.