Nouveautés des outils pour les développeurs Chrome 144

Matthias Rohmer

Dans Chrome 144, l'équipe a déployé une fonctionnalité très attendue sur le serveur MCP des outils de développement Chrome : le nouveau panneau "Conditions de la requête" et des améliorations pour le débogage des polices et des feuilles de style adoptées.

Cette liste remarquable de fonctionnalités lancées en 2025 touche à sa fin. Vous voulez savoir si vous en avez manqué ? Consultez ensuite les points forts ci-dessous ou parcourez nos anciennes éditions de Nouveautés dans les outils pour les développeurs.

Mises à jour du serveur MCP des outils de développement

Nous avons apporté diverses corrections au serveur MCP DevTools et publié la version 0.12.1. Cette version introduit une nouvelle fonctionnalité clé, la connexion automatique, qui vous permet de réutiliser une session de navigateur existante. Avec la connexion automatique, vous pouvez commencer à déboguer vous-même dans Chrome, puis pointer le MCP DevTools vers la même instance Chrome pour reprendre là où vous vous étiez arrêté.

Pour en savoir plus sur la connexion automatique pour les outils pour les développeurs MCP, consultez l'article de blog correspondant. Pour obtenir la liste complète des modifications et des corrections de bugs, consultez le journal des modifications public sur GitHub.

Limitation de bande passante pour les requêtes réseau individuelles

Le panneau "Blocage des requêtes réseau" a été renommé Conditions de requête. En plus des demandes de blocage, ce panneau vous permet désormais de limiter les demandes individuelles.

Ouvrez le panneau en cliquant sur ⋮ > Plus d'outils > Conditions de la requête. Cochez la case Activer le blocage et la limitation pour activer le blocage des requêtes. Cliquez sur le bouton + pour ajouter un motif de texte. Cliquez sur l'icône  pour supprimer toutes les règles.

Découvrez comment limiter le débit des requêtes réseau individuelles dans la documentation mise à jour.

Modifier les règles @font-face et @font-feature-values

@font-face et @font-feature-values s'affichent désormais dans le panneau Styles et peuvent y être modifiés.

Feuilles de style adoptées dans le panneau "Éléments"

Le panneau Éléments affiche désormais les feuilles de style adoptées sous les racines fantômes et les racines de document. Cela permet à ceux qui travaillent avec des feuilles de style construites de trouver plus facilement les feuilles de style qui affectent leurs éléments et de déboguer les styles, en particulier lorsqu'ils ne s'appliquent pas de manière inattendue.

Nouveautés des Outils de développement en 2025

Innovations de l'IA

Depuis les insights de la console, les innovations en matière d'IA sont devenues une partie intégrante des outils pour les développeurs Chrome, le panneau Assistance IA étant le principal hub pour le débogage assisté par l'IA et adapté au contexte. Grâce aux suggestions de code dans les panneaux "Console" et "Sources", ainsi qu'aux annotations automatiques de Gemini dans vos traces de performances, les outils de développement offrent un ensemble complet d'outils optimisés par l'IA pour simplifier vos workflows.

  • Correction du style de bout en bout : demandez à Gemini de corriger les problèmes CSS et, en combinaison avec les espaces de travail, enregistrez ces modifications directement dans vos fichiers sources sur le disque.
  • Poser des questions sur les performances : vous pouvez désormais discuter d'une trace de performances complète avec l'aide de l'IA, examiner en détail n'importe quel insight sur les performances ou utiliser Gemini pour annoter une trace.
  • Débogage visuel : le panneau d'assistance par IA est devenu multimodal, ce qui vous permet d'importer des images ou de prendre des captures d'écran pour aider Gemini à comprendre et à déboguer les problèmes visuels.

Performances

Nous avons repensé le panneau Performances pour rendre le débogage des performances moins complexe et plus exploitable. Par exemple, une trace enregistrée est désormais accompagnée d'insights sélectionnés qui vous aident à identifier plus rapidement les goulots d'étranglement et à parcourir les traces plus rapidement. Voici d'autres améliorations :

Plate-forme Web

Les outils de développement ont suivi le rythme de l'évolution de la plate-forme Web, en ajoutant des outils dédiés aux dernières spécifications CSS tout en améliorant l'expérience des développeurs pour les fonctionnalités établies.

Nous avons ajouté le traçage approfondi pour les chaînes de variables CSS complexes, la disponibilité de référence aux info-bulles de propriétés et, plus récemment, la prise en charge du débogage pour les animations d'entrée complexes à l'aide de la règle @starting-style et d'un éditeur visuel pour la nouvelle mise en page display: masonry.

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.