Nouveautés des outils de développement, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Déboguer le CSS avec Gemini

Les outils pour les développeurs Chrome bénéficient du nouveau panneau expérimental Assistance IA, qui vous permet de discuter avec Gemini et de vous faire aider à déboguer votre CSS.

Suivez-le maintenant ! Dans le panneau Éléments, effectuez un clic droit sur un élément, puis sélectionnez Demander à l'IA ou cliquez sur le bouton correspondant à côté de l'élément. DevTools ouvre le nouveau panneau Assistance IA.

Option de menu "Demander à l'IA" et bouton correspondant

Le nouveau panneau vous invite à activer le paramètre correspondant. Assurez-vous de respecter les conditions requises, activez le bouton d'activation, puis revenez au panneau Assistance par IA. L'élément que vous avez sélectionné sera utilisé comme contexte. Saisissez votre question concernant l'élément.

Nouveau panneau d'assistance IA répondant à une requête.

Pour découvrir comment utiliser au mieux le nouveau panneau, consultez 5 astuces pour utiliser l'assistance de l'IA dans DevTools et Assistance de l'IA pour le style.

L'équipe DevTools a hâte de recevoir vos commentaires. N'hésitez pas à le laisser sur crbug.com/364805393.

Contrôler les fonctionnalités d'IA dans un onglet de paramètres dédié

Vous pouvez désormais gérer toutes les fonctionnalités d'IA au même endroit: dans l'onglet Innovations en IA des nouveaux Paramètres > . Il liste les points importants à prendre en compte, décrit les fonctionnalités d'IA et vous permet de les activer et de les désactiver individuellement.

Nouvel onglet "Innovations en matière d'IA".

Pour en savoir plus, consultez Paramètres > Innovations IA.

Accédez aux insights de la console en un clic

Les outils de développement ne nécessitent plus de synchronisation des paramètres pour les fonctionnalités d'IA. Vous pouvez ainsi accéder en un clic aux insights de la console et à l'assistance par IA pour le style déjà disponibles.

Si vous êtes connecté à Chrome, activez ces fonctionnalités dans Paramètres > Innovations IA.

Améliorations apportées au panneau "Performances"

Cette version apporte plusieurs améliorations au panneau Performances.

Annoter et partager les résultats des performances

Le panneau Performances inclut désormais un nouvel onglet Annotations dans une barre latérale extensible sur la gauche. Il permet de créer des notes pour l'exploration des traces et la collaboration lorsque vous partagez des résultats sur les performances.

Vous pouvez désormais ajouter des libellés et des flèches aux événements, et mettre en surbrillance des plages de temps directement sur la trace. Vous pouvez ensuite enregistrer, partager et importer les traces annotées dans le panneau Performances.

Nouvel onglet "Annotations" dans la barre latérale de gauche, ainsi que l'événement, la plage et la connexion annotés.

Obtenir des insights sur les performances directement dans le panneau "Performances"

Vous pouvez désormais découvrir des insights pratiques dans le nouvel onglet Insights de la barre latérale gauche du panneau Performances. Les insights sont consolidés à partir du rapport Lighthouse et du panneau Informations sur les performances, qui est sur le point d'être abandonné.

L'onglet Insights a pour but de vous fournir une analyse guidée et de vous suggérer des insights pratiques sur les problèmes de performances susceptibles de ralentir votre site Web. Pour utiliser les insights, ouvrez l'onglet dans la barre latérale gauche du panneau Performances, développez les différentes catégories, puis pointez sur les éléments et cliquez dessus. Le panneau Performances met en surbrillance les événements correspondants dans la trace.

L'équipe DevTools attend avec impatience vos commentaires sur l'utilité des insights, les moyens de les améliorer et votre expérience avec eux avec d'autres outils, comme PageSpeed Insights et Lighthouse. N'hésitez pas à nous faire part de vos commentaires sur crbug.com/371170842.

Repérer plus facilement les changements de mise en page excessifs

La piste Mise en page a fait peau neuve. Les changements de mise en page sont désormais marqués par des losanges violets (plus visibles) et sont regroupés en fonction de leur proximité sur la chronologie. Les deux équipes et leurs clusters sont présentés dans un tableau organisé avec des horaires, des scores, des éléments et des coupables potentiels dans l'onglet Récapitulatif.

Avant et après la mise à jour du canal "Déplacements de mise en page" et de l'onglet "Récapitulatif" réorganisé.

De plus, la vue des métriques en direct affiche le journal des déplacements de mise en page avec des scores et des éléments à côté de l'onglet Interactions.

Avant et après l'ajout du journal "Déplacements de mise en page" à la vue des métriques en direct.

Problème Chromium: 369100729.

Identifier les animations non composées

Le canal Animations affiche désormais des informations utiles sur les animations non composées:

  • Nomme les animations en fonction de la propriété CSS correspondante, le cas échéant.
  • Les animations non composées sont marquées par des triangles rouges dans la piste.
  • Indique le motif de l'échec de la composition dans l'onglet Récapitulatif.

Animations avant et après l'attribution de noms dans la piste, avec les animations non composées marquées et la raison de l'échec affichée.

Pour en savoir plus, consultez S'en tenir aux propriétés réservées au moteur de composition et gérer le nombre de calques.

Problème Chromium: 41006273.

La simultanéité matérielle passe aux capteurs

Le paramètre Concurrency matérielle est déplacé du panneau Performances vers un emplacement plus approprié : le panneau Capteurs.

État avant et après le déplacement du paramètre "Cohérence matérielle" vers le panneau "Capteurs".

Problème Chromium: 371463665.

Ignorer les scripts anonymes et se concentrer sur votre code dans les traces de la pile

Les traces de pile dans la console détectent, ignorent, réduisent et (si elles sont développées) grisent désormais correctement les cadres provenant de fichiers figurant sur la liste d'ignorement. Auparavant, le nom de la fonction n'était pas grisé dans la trace développée.

Vous pouvez également activer les nouveaux Settings (Paramètres) > Ignore list (Liste d'ignorement) > (case à cocher) Anonymous scripts from eval or console (Scripts anonymes à partir d'eval ou de la console) pour que DevTools ignore les scripts anonymes sans URL source.

Avant et après l'amélioration de la liste d'éléments à ignorer dans les traces de pile.

De plus, lorsque vous effectuez un clic droit et que vous enregistrez sous le journal de la console, le texte Afficher plus/moins n'est pas enregistré.

Problèmes Chromium: 40279542, 40945570 et 345248263.

Éléments > Styles: prise en charge des modes d'écriture sideways-* pour les superpositions de grille et les mots clés à l'échelle du CSS

L'onglet Éléments > Styles est désormais compatible avec les éléments suivants:

  • La superposition de grille dans le viewport affiche désormais des grilles pour les modes d'écriture sideways-rl et sideways-lr.
  • Résout les mots clés à l'échelle de la CSS. En pratique, cela signifie que, par exemple, si inherit est une couleur, l'onglet Styles affiche un sélecteur de couleur à côté. Avant et après la résolution des mots clés à l'échelle du CSS.

Problèmes Chromium: 40280717, 40706051 et 40501131.

Audits Lighthouse pour les pages non HTTP en mode période et instantané

Lighthouse peut désormais générer des rapports pour les pages non HTTP en mode période et instantané.

Avant et après l'activation de l'audit pour les pages non HTTP en mode période et instantané

Accessibilité

Cette version présente les améliorations d'accessibilité suivantes:

  • Dans Sources > Éditeur, vous pouvez désormais fermer les onglets contenant des fichiers ouverts en sélectionnant le bouton X, puis en appuyant sur Entrée ou Espace.
  • Dans Performances, vous pouvez désormais sélectionner une entrée dans la trace et appuyer sur Espace pour ouvrir le menu contextuel.
  • Dans Performances, l'onglet Insights de la barre latérale de gauche est accessible au clavier et peut être parcouru à l'aide des onglets.

Problème Chromium: 372411090.

Autres points forts

Voici quelques corrections et améliorations importantes apportées à cette version:

  • Les paramètres de limitation sont désormais correctement synchronisés entre les panneaux Performances et Réseau (370332090).
  • Application > Services en arrière-plan > Charges spéculatives > Règles comporte désormais un bouton {} de mise en forme similaire à celui de Sources > Éditeur (40279147).
  • Expressions dynamiques: lorsque vous appuyez sur Tabulation après avoir sélectionné une option de saisie semi-automatique, vous quittez désormais le champ de modification au lieu d'indenter le texte (349939551).
  • Éléments > Styles: anchor() et anchor-size() acceptent une nouvelle syntaxe qui vous permet de réorganiser les arguments et d'omettre la direction anchor-size() (343516786). Correction du rendu de remplacement (365802559).
  • Réseau: correction des aperçus GraphQL (369931288).
  • Performances: indique désormais la progression incrémentielle du chargement et du traitement des traces.
  • WebAuthn: les identifiants modifiés par les méthodes signal* sont désormais mis à jour de manière dynamique (368467199).
  • WebAssembly: un avertissement dans la console vous indique désormais si plusieurs symboles de débogage sont disponibles pour un module WebAssembly et lequel est utilisé (40879198, 369515221).
  • La superposition Core Web Vitals est supprimée de l'onglet Rendering (Affichage) 328487897.
  • Les fonctionnalités d'IA générative ne nécessitent plus la synchronisation des paramètres Chrome.

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.

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.