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

É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. Il y aura un mélange de sessions en direct et de sessions enregistrées.

Pour découvrir les nouvelles fonctionnalités intéressantes, regardez les vidéos suivantes :

• Nouveautés de Chrome, 20 mai 2025 | 15h30 (PT)
• Faites-en plus avec les outils pour les développeurs Chrome et moins avec CTRL+TAB
• Déboguer les performances dans les outils de développement

N'oubliez pas non plus d'assister à 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 rapidement les dernières nouveautés :

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

En quelques clics, vous pouvez demander à Gemini de modifier et de corriger le CSS pour vous. De plus, grâce à un dossier d'espace de travail connecté, vous pouvez enregistrer vos modifications dans les fichiers sources sur votre ordinateur.

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

Si un dossier d'espace de travail est associé, 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, vérifiez les différences, puis 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 aux outils de développement d'enregistrer les modifications apportées à 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

En un clic, vous pouvez désormais discuter avec Gemini pour examiner les insights sur les performances suivants et prendre des mesures :

• 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 des demandes de documents

N'hésitez pas à nous faire part de vos commentaires sur cette 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 pile et du contexte.

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

Dans le panneau Assistance IA, vous pouvez désormais cliquer sur le bouton photo_camera Prendre une capture d'écran pour capturer une capture d'écran de la page et l'envoyer à votre discussion avec Gemini.

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

Nouvelles informations dans le panneau "Performances"

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

JavaScript en double

La nouvelle section Performances > Insights > JavaScript en double met en évidence dans la piste Réseau les requêtes concernant les grands modules JavaScript en double dans vos bundles, le cas échéant.

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 met en évidence les requêtes pour l'ancien JavaScript, le cas échéant, dans la piste Réseau. Par exemple, les polyfills et les 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.

Les spéculations sont désormais compatibles avec les tags de règles

Application > Chargements spéculatifs affiche désormais des tags au lieu des URL pour les ensembles de règles, si des tags sont présents.

Problème Chromium : 393408589.

Lighthouse 12.6.0

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

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

Consultez également la liste complète des modifications.

Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils pour les développeurs, consultez Lighthouse : optimiser la vitesse d'un site Web.

Problème Chromium : 40543651.

Autres points importants

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

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

Accessibilité

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

• Performances : les flèches de l'initiateur dans la trace sont désormais plus visibles.
• Éléments : vous pouvez désormais activer ou désactiver l'affichage de l'arborescence d'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 du contenu à partir de blocs de code.
  • "Application à l'espace de travail" lorsque vous appliquez des modifications à votre espace de travail dans le chat Assistance 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 sont disponibles dans le chat 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 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 more_vert 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".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.