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

Sofia Emelianova
Sofia Emelianova
GitHub

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'élément suivant:

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

Boutons et option de menu Demander à l'IA dans "Réseau", "Sources" et "Performances".

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 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 l'onglet Performances > Principal.

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

L'historique des discussions avec l'IA dans un menu déroulant sous le bouton "Historique".

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.

État avant et après l'ajout de la section "Espace de stockage des extensions" au panneau "Application".

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 voir la répartition des phases et leurs délais.

"Avant et après" après avoir ajouté une répartition des phases et de leurs délais aux interactions.

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.

État avant et après l'ajout d'informations sur le blocage du rendu dans l'onglet "Résumé".

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

État avant et après l'ajout de la prise en charge des événements scheduler.postTask et de leurs flèches d'initiateur.

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.

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.

Avant et après l'ajout d'un lien depuis l'onglet "Styles" au panneau "Animations".

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.

État avant et après l'ajout de l'option d'émulation de la pression du processeur au panneau "Capteurs".

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.

Avant et après le regroupement des objets JavaScript portant le même nom également par source.

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

Les sections "Avant" et "Après" sont séparées 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 Home qui vous 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 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.