Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

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

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

Semblable au 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é des éléments suivants :

Requête réseau dans le panneau Réseau.
Un fichier dans l'onglet Sources > Page.
Une activité dans la piste Performances > Principale.

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

Gemini tiendra compte du contexte de la demande, du fichier ou de l'activité sélectionnés.

L'équipe des outils de développement attend vos commentaires sur crbug.com/364805393.

Historique des discussions avec l'IA

Vous pouvez désormais restaurer et afficher vos discussions passées avec Gemini dans le panneau Assistance 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 des panneaux Réseau, Sources > onglet Page et Performances > piste Principale.

Pour afficher l'une de vos précédentes discussions, sélectionnez la requête correspondante dans le menu déroulant sous le bouton Historique. Le panneau Assistance IA se souviendra de l'historique de vos discussions tant que les outils de développement seront ouverts.

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

Gérer le stockage des extensions dans Application > Stockage

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

Avant et après l'ajout de la section "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 direct pour afficher le détail des phases et de leur durée.

L'avant et l'après ajoutent une répartition des phases et de leur timing aux interactions.

Comme indiqué dans L'extension Web Vitals est désormais disponible dans les outils de développement, la sortie de ces fonctionnalités marque la fin de la compatibilité avec 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 section Performances > Réseau, l'onglet Récapitulatif vous indique désormais que la requête bloque le rendu, en plus de l'info-bulle (refactorisée).

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

La piste Performances > Principale affiche désormais les événements scheduler.postTask() et les flèches d'initiateur suivantes entre eux :

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

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.

Passer d'Éléments > Styles à Animations

L'onglet Éléments > Styles affiche désormais des icônes Accéder au panneau "Animations" animation à côté de la valeur des propriétés animation. Vous pouvez ainsi inspecter facilement les animations.

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

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

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

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

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

Problème Chromium : crbug.com/362277525.

Objets JS 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 JS portant le même nom, mais provenant de sources différentes, et les regroupe en conséquence.

Les objets JS avant et après le regroupement avec le même nom également par source.

Problème Chromium : crbug.com/357902505.

Nouvelle apparence des paramètres

Pour mieux harmoniser la conception de l'interface utilisateur, les paramètres des outils de développement ressemblent désormais davantage à ceux de Chrome. En particulier, les sections sont désormais visuellement séparées en "cartes".

Les sections avant et après sont séparées en "cartes".

Le panneau "Informations sur les performances" est obsolète et a été supprimé des Outils pour les développeurs

Toutes les fonctionnalités importantes et utiles du panneau Informations sur les performances ont été déplacées vers le panneau Performances, plus précisément dans les métriques en direct, l'onglet latéral Insights et la piste Décalages de mise en page. Cette version rend donc le panneau Informations sur les performances obsolète et le supprime des Outils de développement.

L'équipe des outils de développement 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 vos points de vue. Continuez comme ça !

Autres points importants

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 qui vous permet de revenir à l'écran des métriques en direct.
- Correction des raccourcis de zoom sur les traces Maj+S/W qui ne fonctionnaient pas.
Éléments > Styles :
- Ajout de anchor-center à la saisie semi-automatique 341991541.
- Correction d'un bug qui empêchait l'éditeur Flexbox d'être disponible pour les valeurs à deux mots 341964645.
Réseau : les échecs de préchargement sont désormais des avertissements jaunes au lieu d'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 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 Chrome DevTools

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 en cliquant sur Plus d'options > Aide > Signaler un problème dans les outils de développement.
Envoyez un tweet à @ChromeDevTools.
Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".