Nouveautés des outils pour les développeurs, Chrome 132

Déboguer les requêtes réseau, les fichiers sources et les traces de performances avec Gemini

En plus des styles CSS, vous pouvez désormais discuter avec Gemini sur les requêtes réseau, les fichiers sources et les traces de performances.

Comme pour le menu contextuel du panneau Éléments, pour ouvrir le panneau Assistance IA et commencer à discuter avec Gemini, effectuez un clic droit et sélectionnez Demander à l'IA, ou cliquez sur le bouton Demander à l'IA à côté de l'icône suivante:

• Requête réseau dans le panneau Network (Réseau).
• Fichier dans l'onglet Sources > Page.
• Une activité dans le canal Performances > Principal.

Gemini tient compte du contexte de la requête, du fichier ou de l'activité sélectionnés.

L'équipe DevTools attend vos commentaires sur crbug.com/364805393.

Historique des discussions avec l'IA

Vous pouvez désormais restaurer et consulter les discussions précédentes avec Gemini dans le panneau Assistance par l'IA en cliquant sur le bouton Ajouter Nouvelle discussion en haut à gauche du panneau, ou en utilisant les boutons et les options de menu Demander à l'IA du panneau Réseau, de l'onglet Sources > Page et de la piste Principale Performances >.

Pour afficher l'une de vos discussions précédentes, sélectionnez l'invite correspondante dans le menu déroulant sous le bouton Historique Historique. Le panneau Assistance par IA mémorise l'historique de vos discussions lorsque les outils pour les développeurs sont ouverts.

Gérer l'espace de stockage de l'extension dans Application > Stockage

Comme pour le stockage local et le stockage de session, vous pouvez désormais afficher et modifier les entrées de stockage des extensions dans la section Application > Stockage.

Problème Chromium: crbug.com/40963428.

Amélioration des performances

Cette version apporte plusieurs améliorations au panneau Performances.

Phases d'interaction dans les métriques en direct

Vous pouvez désormais développer les interactions dans les métriques de performances en temps réel pour obtenir une répartition des phases et de leurs délais.

Comme indiqué dans L'extension Web Vitals, désormais disponible dans DevTools, la sortie de ces fonctionnalités marque la fin de la prise en charge de l'extension Web Vitals.

Problème Chromium: crbug.com/369097528.

Informations sur le blocage du rendu dans l'onglet "Récapitulatif"

Lorsque vous sélectionnez une requête réseau marquée d'un triangle rouge dans la piste Performances > Réseau, l'onglet Récapitulatif, en plus de l'info-bulle (refactorisée), vous indique désormais que la requête bloque le rendu.

Prise en charge des événements scheduler.postTask et de leurs flèches d'initiateur

Le canal Performances > Principal affiche désormais les événements scheduler.postTask() et les flèches d'initiateur suivantes entre:

• Schedule postTask -> Fire postTask
• Schedule postTask -> Abort postTask

Problème Chromium: crbug.com/40775984.

Styles"" id="animations" tabindex="-1">Améliorations apportées au panneau "Animations" et à l'onglet "Éléments > Styles"

Cette version apporte quelques améliorations au panneau Animations et à l'onglet Éléments > Styles.

Passer d'Éléments > Styles à Animations

L'onglet Éléments > Styles affiche désormais des boutons animation Accéder au panneau "Animations" à côté de la valeur des propriétés animation, ce qui vous permet de modifier facilement l'animation.

Mises à jour en temps réel dans l'onglet "Calculé"

L'onglet Éléments > Calculées met désormais à jour les valeurs calculées en temps réel lorsque, par exemple, les animations les mettent à jour.

Émulation de la pression de calcul dans les capteurs

Le panneau Capteurs vous permet désormais d'émuler la pression du processeur Nominal, Fair, Serious et Critical.

Problème Chromium: crbug.com/362277525.

Objets JavaScript portant le même nom regroupés par source dans le panneau "Mémoire"

Le panneau Mémoire fait désormais la distinction entre les objets JavaScript portant le même nom qui proviennent de sources différentes et les regroupe en conséquence.

Problème Chromium: crbug.com/357902505.

Nouvelle interface des paramètres

Pour mieux aligner la conception de l'interface utilisateur, les paramètres des outils pour les développeurs ressemblent désormais davantage aux paramètres de Chrome. En particulier, les sections sont désormais séparées visuellement en "fiches".

Le panneau "Informations sur les performances" est obsolète et supprimé des Outils de développement

Toutes les fonctionnalités importantes et utiles du panneau Informations sur les performances ont désormais trouvé leur place dans le panneau Performances, en particulier dans les métriques en temps réel, l'onglet de la barre latérale Insights et le canal "Déplacements de mise en page". Par conséquent, cette version rend obsolète et supprime le panneau Informations sur les performances de DevTools.

L'équipe DevTools vous remercie pour les commentaires que vous avez fournis sur l'abandon de ce panneau et sur l'expérience globale de débogage des performances. Comme toujours, nous aimerions connaître votre avis et votre point de vue. Continuez sur votre lancée !

Autres points forts

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

• Performances :
  • Suppression d'une limite inutile de trois caractères pour les requêtes de recherche.
  • Ajout du bouton Accueil Home qui permet de revenir à l'écran des métriques en temps réel.
  • Correction des raccourcis de zoom de tracé Maj+S/W qui ne fonctionnaient pas.
• Éléments > Styles :
  • Ajout de anchor-center à la saisie semi-automatique 341991541.
  • Correction d'un bug lié à l'éditeur Flexbox qui n'était pas disponible pour les valeurs de deux mots 341964645.
• Réseau: les échecs de préchargement sont désormais signalés par des avertissements jaunes ou des erreurs rouges pour indiquer que l'affichage du contenu n'est pas affecté 372055494.

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