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

Déboguer CSS avec Gemini

Les outils pour les développeurs Chrome disposent d'un nouveau panneau expérimental d'aide à l'IA dans lequel vous pouvez discuter avec Gemini et obtenir de l'aide pour déboguer votre CSS.

Suivez-le maintenant ! Dans le panneau Éléments, effectuez un clic droit sur un élément, puis sélectionnez Ask AI (Demander à l'IA) ou cliquez sur le bouton correspondant à côté de l'élément. Les outils de développement ouvriront le nouveau panneau Aide à l'IA.

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

Pour en savoir plus sur l'utilisation optimale du nouveau panneau, consultez 5 Cool Things To Do with DevTools AI Assistance (Assistance IA pour les outils de développement), ainsi que l'assistance IA pour la stylisation.

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

Contrôlez les fonctionnalités d'IA dans un onglet "Paramètres" dédié

Vous pouvez désormais gérer toutes les fonctionnalités d'IA au même endroit: dans les nouveaux paramètres Paramètres > onglet Innovations en matière 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.

Pour en savoir plus, accédez à Paramètres > Innovations IA.

Console Insights accessibles en un clic

Les outils de développement ne nécessitent plus de synchronisation des paramètres pour les fonctionnalités d'IA. Ainsi, les insights de la console, ainsi que l'assistance IA pour les styles, sont accessibles en un clic.

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

Améliorations apportées au panneau "Performances"

Cette version apporte un certain nombre d'améliorations au panneau Performances.

Annoter et partager les données sur les performances

Le nouvel onglet Annotations du panneau Performances est disponible dans une barre latérale à gauche que vous pouvez développer. Il simplifie le processus de création de notes pour l'exploration des traces et la collaboration lors du partage des résultats des performances.

Vous pouvez désormais étiqueter et relier des événements à l'aide de flèches, et mettre en surbrillance des périodes directement sur la trace. Vous pouvez ensuite enregistrer, partager et importer les traces annotées dans le panneau Performances.

Obtenez des informations 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 est conçu pour fournir une analyse guidée et suggérer des insights exploitables concernant 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 différentes catégories, puis pointez et cliquez sur les éléments. 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 utilisation avec d'autres outils, tels que 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 Décalages de mise en page fait peau neuve. Les décalages de mise en page sont désormais marqués de losanges violets (plus visibles) et regroupés en clusters en fonction de leur proximité dans la chronologie. Les équipes et leurs groupes obtiennent un tableau organisé avec les temps, les scores, les éléments et les coupables potentiels dans l'onglet Résumé.

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.

Problème Chromium : 369100729.

Repérer 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 par des triangles rouges sur la piste.
• Indique la raison de l'échec de la composition dans l'onglet Résumé.

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 Simultanéité matérielle est déplacé du panneau Performances vers un emplacement plus approprié : 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 paramètres Settings (Paramètres) > Ignore list (Liste d'ignorement) > check_box (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.

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, 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 accepte désormais 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é.

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é.

Accessibilité

Cette version comporte 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 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 des onglets.

Problème Chromium: 372411090.

Points importants divers

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 élégante {} semblable à 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). En outre, correction de l'affichage de remplacement (365802559).
• Réseau: correction des aperçus GraphQL (369931288).
• Performances: signale 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 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 plates-formes 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 sujet lié aux outils de développement.

• 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.
• Tweetez à l'adresse @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés dans les outils de développement ou sur les vidéos YouTube de conseils sur les outils de développement.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement