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

Sofia Emelianova
Sofia Emelianova
GitHub

Déboguer le code CSS avec Gemini

Les outils pour les développeurs Chrome intègrent le nouveau panneau expérimental Assistance par l'IA, qui vous permet de discuter avec Gemini et d'obtenir de l'aide pour déboguer votre CSS.

Essayez ! Dans le panneau Éléments, effectuez un clic droit sur un élément et sélectionnez Demander à l'IA ou cliquez sur le bouton correspondant à côté de l'élément. Les outils de développement ouvrent 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 paramètre, puis revenez au panneau Assistance IA. Il prendra l'élément que vous avez sélectionné comme contexte. Saisissez votre question sur l'élément.

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

Pour savoir comment utiliser au mieux le nouveau panneau, consultez 5 Cool Things To Do with DevTools AI Assistance et Assistance 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 : le nouvel onglet Paramètres > Innovations d'IA. 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 basées sur l'IA.

Accédez à Console Insights en un clic

Les outils de développement ne nécessitent plus que la synchronisation des paramètres soit activée pour les fonctionnalités d'IA. Ainsi, les insights de la console publiés précédemment, ainsi que l'assistance par IA pour le style, sont accessibles en un clic.

Si vous êtes connecté à Chrome, activez ces fonctionnalités dans Paramètres > Innovations d'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 est doté du nouvel onglet Annotations dans une barre latérale extensible à gauche. Il simplifie la création de notes pour l'exploration des traces et la collaboration lors du partage des résultats de performances.

Vous pouvez désormais libeller et relier des événements avec des flèches, et mettre en évidence des plages horaires 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, avec un événement, une plage et une connexion annotés.

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

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

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

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

Repérer plus facilement les décalages de mise en page excessifs

La piste Décalages de mise en page fait peau neuve. Les changements de mise en page sont désormais marqués par des losanges violets (plus visibles) et regroupés en clusters en fonction de leur proximité sur la timeline. Les périodes et leurs clusters sont présentés dans un tableau organisé avec les horaires, les scores, les éléments et les causes potentielles dans l'onglet Récapitulatif.

Avant et après la mise à jour de la piste "Décalages de mise en page" et la réorganisation de l'onglet "Récapitulatif".

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

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

Problème Chromium : 369100729.

Identifier les animations non composées

La piste 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.
  • Marque les animations non composées avec des triangles rouges dans la piste.
  • Affiche le motif de l'échec de la composition dans l'onglet Récapitulatif.

Les animations de changement de nom avant et après dans la piste, en marquant celles qui ne sont pas composées et en indiquant la raison de l'échec.

Pour en savoir plus, consultez Respecter les propriétés du compositeur uniquement et gérer le nombre de calques.

Problème Chromium : 41006273.

La simultanéité matérielle est déplacée vers les capteurs

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

Avant et après le déplacement du paramètre "Simultanéité matérielle" vers le panneau "Capteurs".

Problème Chromium : 371463665.

Ignorer les scripts anonymes et se concentrer sur votre code dans les traces de 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 frames provenant de fichiers figurant dans la liste des fichiers à ignorer. Auparavant, le nom de la fonction n'était pas grisé dans la trace développée.

Vous pouvez également activer les nouveaux Paramètres > Liste des éléments à ignorer > Scripts anonymes provenant d'eval ou de la console pour que les outils de développement ignorent les scripts anonymes sans URL source.

Avant et après l'amélioration de la liste des éléments ignorés dans les traces de pile.

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

Problèmes Chromium : 40279542, 40945570, 345248263.

Éléments > Styles : compatibilité avec les modes d'écriture sideways-* pour les grilles et les mots clés CSS

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

  • La superposition de grille dans la fenêtre d'affichage affiche désormais des grilles pour les modes d'écriture sideways-rl et sideways-lr.
  • Résout les mots clés CSS. Concrètement, 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 CSS-wide.

Problèmes Chromium : 40280717, 40706051, 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 une page non HTTP en mode période et instantané.

Accessibilité

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

  • Dans Sources > Éditeur, les onglets contenant des fichiers ouverts peuvent désormais être fermés en sélectionnant le bouton X et 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 de la touche de tabulation.

Problème Chromium : 372411090.

Autres points importants

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 d'arrière-plan > Chargements spéculatifs > Règles dispose désormais d'un bouton d'impression esthétique {} semblable à Sources > Éditeur (40279147).
  • Expressions en direct : appuyer sur la touche Tabulation après avoir sélectionné une option de saisie semi-automatique permet désormais de quitter le champ de modification au lieu d'indenter le texte (349939551).
  • Éléments > Styles : anchor() et anchor-size() sont compatibles avec la nouvelle syntaxe qui vous permet de réorganiser les arguments et d'omettre la direction anchor-size() (343516786). Correction de l'affichage 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 informe 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 Rendu 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 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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.