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

Jecelyn Yeen

Fonctionnalité en version Preview: nouveau panneau "Informations sur les performances"

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

Ouvrez le panneau et lancez 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 l'affichage" ou "Déplacement de mise en page") pour comprendre le problème et les solutions potentielles.

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

Il s'agit d'une fonctionnalité en version Preview 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 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, il fallait suivre plusieurs étapes pour émuler des thèmes dans l'onglet Affichage.

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 stratégie de sécurité du contenu (CSP) dans l'onglet Preview (Aperçu) du panneau Network (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 avez ouvert la page via l'onglet Preview (Aperçu) du panneau Network (Réseau), la feuille de style n'était pas bloquée précédemment (l'arrière-plan est donc devenu rouge). Il est maintenant 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 se trouvait dans une boucle infinie précédemment lors du paramétrage et du rechargement au point d'arrêt ReactDOM dans cette démo React. Le panneau Sources a été endommagé en raison de la boucle infinie.

La poursuite de l'exécution du code JavaScript pose de nombreux problèmes aux développeurs et peut laisser le moteur de rendu dans un état défectueux. Cette modification 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 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 de fenêtre.

Problème Chromium: 1295750

Valider l'expression active avec Entrée

Une fois que vous avez terminé de saisir une expression dynamique, vous pouvez cliquer sur Enter pour la valider. Auparavant, appuyer sur Entrée permettait d'ajouter des lignes. Cela n'est pas cohérent avec les autres parties des outils de développement.

Pour ajouter une ligne dans l'éditeur d'expressions dynamiques, 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 surbrillance hérités dans le volet "Styles"

Affichez les pseudo-éléments de 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 forts

Voici quelques corrections importantes apportées 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 précédemment. (1309087)
• Le volet Styles affiche désormais correctement les règles @support ignorées en barrant les lignes. 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 afin qu'elle ne s'applique pas indéfiniment aux objets circulaires. (1272450)

[Expérimental] Copier les modifications CSS

Avec ce test, le volet Styles met en surbrillance vos modifications CSS en vert. Vous pouvez pointer sur les règles modifiées, puis cliquer sur le bouton de nouvelle copie à côté d'elles pour les copier.

En outre, vous pouvez copier toutes les modifications CSS dans les déclarations en cliquant avec le bouton 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 vos modifications CSS.

Problème Chromium: 1268754

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

Activez cette expérience 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 n'importe où.

Problème Chromium: 1245191

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.