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

Sofia Emelianova
Sofia Emelianova

Édition Google I/O 2025

Les outils pour les développeurs Chrome seront très présents lors de la conférence Google I/O de cette année. Les sessions seront diffusées en direct et enregistrées.

Pour en savoir plus sur ces nouvelles fonctionnalités, consultez les articles suivants:

N'oubliez pas non plus de suivre la session "Nouveautés sur le Web" de Rachel Andrew le 20 mai 2025 à 16h30 (PT).

Regardez notre dernière vidéo pour découvrir nos dernières actualités:

Modifier et enregistrer les modifications CSS apportées à votre espace de travail avec Gemini

En quelques clics, vous pouvez désormais demander à Gemini de modifier et de corriger le CSS pour vous. Avec un dossier d'espace de travail connecté, vous pouvez également enregistrer vos modifications dans les fichiers sources de votre ordinateur.

Les espaces de travail automatiques sont une fonctionnalité expérimentale. Vous pouvez connecter votre dossier source existant ou essayer une démonstration.

Connectez un dossier d'espace de travail. Dans le panneau Éléments, cliquez sur Demander à l'IA, demandez à Gemini de modifier le CSS, cliquez sur Continuer pour tester les modifications en direct, puis développez Modifications non enregistrées, cliquez sur Appliquer à l'espace de travail, examinez la différence et cliquez sur Tout enregistrer.

Associer un dossier d'espace de travail et enregistrer les modifications dans vos fichiers sources

Vous pouvez désormais connecter automatiquement (ou manuellement) un dossier d'espace de travail pour permettre à DevTools d'enregistrer les modifications JavaScript, HTML et CSS dans les fichiers sources stockés sur votre ordinateur.

Découvrez comment cela fonctionne avec JavaScript:

Problème Chromium: 404170628.

Demander à Gemini des insights sur les performances

D'un simple clic, vous pouvez désormais démarrer une discussion avec Gemini pour examiner et exploiter les insights sur les performances suivants:

  • LCP par phase
  • Détection de la requête LCP
  • Requêtes de blocage du rendu
  • Causes des décalages de mise en page
  • Latence de la demande de document

Avant et après l'ajout du bouton "Demander à l'IA" à un insight dans le panneau "Performances".

N'hésitez pas à nous faire part de vos commentaires sur la fonctionnalité sur crbug.com/371170842.

Annoter les résultats de performances avec Gemini

Vous pouvez désormais demander à Gemini de générer des annotations sur les événements dans la trace de performances.

Double-cliquez sur un événement dans la piste Principale, puis cliquez sur Générer un libellé à côté du champ de saisie. Gemini peut suggérer un libellé en fonction de la trace de la pile et du contexte.

Ajouter des captures d'écran à vos discussions avec Gemini

Dans le panneau Assistance par IA, vous pouvez désormais cliquer sur le bouton Faire une capture d'écran pour prendre une capture d'écran de la page et l'envoyer dans votre discussion avec Gemini.

Vous pouvez utiliser des captures d'écran pour fournir un contexte visuel supplémentaire à vos invites, par exemple pour vérifier si tous les boutons visibles ont le même espacement.

Capture d'écran avant et après l'ajout du bouton "Faire une capture d'écran" au panneau "Assistance IA".

Nouvelles informations dans le panneau "Performances"

Cette version apporte deux nouveaux insights au panneau Performances: JavaScript en double et JavaScript ancien.

JavaScript en double

La nouvelle section Performances > Insights > JavaScript en double permet de mettre en évidence dans le suivi Réseau les requêtes de grands modules JavaScript en double dans vos bundles, le cas échéant.

Information "JavaScript en double" dans le panneau "Performances".

Vous pouvez également cliquer sur Afficher la carte proportionnelle dans l'insight pour explorer les dépendances JavaScript.

Ancien JavaScript

La nouvelle section Performances > Insights > Ancien JavaScript permet de mettre en évidence dans le suivi Réseau les requêtes d'ancien JavaScript si elles sont présentes sur votre page. Il peut s'agir, par exemple, de polyfills et de transformations qui permettent aux anciens navigateurs d'utiliser les nouvelles fonctionnalités JavaScript. Dans la majorité des cas cependant, ils ne sont pas nécessaires aux navigateurs récents.

Information "Ancien JavaScript" dans le panneau "Performances".

Les spéculations acceptent désormais les tags de règle

Application > Charges spéculatives affiche désormais des balises au lieu d'URL pour les ensembles de règles, si des balises sont présentes.

L'URL avant et après le remplacement de la règle est définie avec une balise.

Problème Chromium: 393408589.

Lighthouse 12.6.0

Le panneau Lighthouse exécute désormais Lighthouse 12.6.0.

La principale nouveauté de cette version est que Lighthouse passe aux audits d'insights sur les performances. Dans la catégorie Performances du rapport Lighthouse, vous pouvez désormais essayer les insights.

Avant et après l'ajout de l'option permettant de passer aux insights dans un rapport Lighthouse.

Consultez également la liste complète des modifications.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 40543651.

Autres points forts

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

  • Réseau: ajout d'une analyse pour les formats connus des temps de latence du serveur.
  • Vous pouvez désormais désélectionner des lignes dans des tableaux en cliquant avec Cmd/Ctrl (problème Chromium: 409474445).
  • Performances > Insights > Utiliser des durées de vie de cache efficaces ignore désormais les composants dont la valeur TTL est égale ou supérieure à 30 jours.

Accessibilité

Cette version apporte les améliorations d'accessibilité suivantes:

  • Performances: les flèches d'initiateur dans la trace sont désormais plus visibles.
  • Éléments: vous pouvez désormais activer/désactiver l'affichage en arborescence de l'accessibilité en plein écran à l'aide du raccourci A (problème Chromium: 40888478).
  • Les lecteurs d'écran annoncent désormais, entre autres:

    • "Copié dans le presse-papiers" lorsque vous copiez à partir de blocs de code.
    • "Appliquer à l'espace de travail" lorsque vous appliquez des modifications à votre espace de travail dans le chat de l'assistance par IA.
    • "Génération du libellé" lorsque vous demandez à l'IA de le générer dans Performances > Annotations.
    • Notez que des requêtes suggérées s'affichent dans le chat de l'assistance par IA.
    • Consultez les économies estimées pour les insights pertinents dans Performances > Insights.

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.