Nouveautés des outils pour les développeurs (Chrome 149)

Matthias Rohmer

Publié le : 2 juin 2026

Chrome 149 apporte des améliorations majeures à l'assistance par l'IA, introduit des outils de débogage WebMCP expérimentaux dans le panneau "Application" et étend la prise en charge de la saisie semi-automatique de code à CSS.

Outils de développement pour les agents

Le serveur MCP et l'interface de ligne de commande des outils pour les développeurs Chrome pour les agents sont désormais officiellement stables. Consultez l'annonce complète.

Voici les principales fonctionnalités et les nouveaux outils ajoutés jusqu'à la version 1.1.1 :

  • Outils tiers personnalisés exposés sur les pages : les pages peuvent désormais définir des outils de débogage personnalisés via JavaScript, qui peuvent être découverts et appelés par les outils de développement pour les agents.
  • Débogage WebMCP : les Outils de développement pour les agents peuvent désormais lister et exécuter les outils WebMCP.
  • Émulation d'en-têtes HTTP personnalisés : ajoute la prise en charge des en-têtes HTTP (tels que les jetons d'authentification ou les user-agents personnalisés) à l'outil d'émulation.

Les outils tiers et le débogage WebMCP sont toujours expérimentaux et ne sont pas encore activés par défaut. Consultez la documentation de référence sur les outils pour savoir comment les utiliser. Nous fournirons plus de documentation sur developer.chrome.com une fois que ces fonctionnalités seront prêtes pour une utilisation en production.

Pour obtenir les dernières informations sur les outils pour les développeurs pour les agents et pour contribuer, consultez le dépôt GitHub. Pour commencer, consultez notre documentation ou regardez la session vidéo complète de Google I/O Supercharge your AI coding workflow with Chrome DevTools for agents (Boostez votre workflow de codage IA avec les outils pour les développeurs Chrome pour les agents).

Assistance IA

Le panneau Assistance IA a fait l'objet d'une mise à jour importante de l'interface utilisateur et de nouveaux outils ont été ajoutés pour améliorer l'expérience conversationnelle et fournir des insights plus approfondis sur les pages :

  • Présentation de l'agent : l'assistance IA affiche désormais les widgets directement dans l'interface de chat au lieu du texte brut Markdown. Ces widgets couvrent les métriques Web essentielles et les insights associés, les éléments LCP, la répartition LCP, l'activité des threads ascendants et plus encore. Un lien Afficher à l'intérieur du widget vous redirige vers la source de ces informations dans les outils de développement.
  • Copier dans l'agent de codage : les conversations se terminent désormais par un bouton dédié permettant de copier la conversation, soit résumée sous forme de requête, soit mot pour mot, pour que vous puissiez la coller dans l'agent de codage de votre choix.
  • Fonctionnalités améliorées : l'assistance IA a désormais accès à Lighthouse et aux insights associés. Elle peut ainsi analyser votre page de manière holistique et vous donner des conseils ciblés.
  • Réponses améliorées : grâce à Gemini 3 et à des préambules affinés, l'assistance IA fournit des réponses plus concises et plus pratiques.
  • Navigation améliorée : vous pouvez désormais parcourir vos requêtes de chat précédentes à l'aide des touches Flèche vers le haut et Flèche vers le bas. Vous pouvez ainsi affiner ou réexécuter rapidement et intuitivement vos requêtes précédentes.
Assistance IA avec la requête "Comment puis-je améliorer les performances de cette page ?" sur le site de démonstration Astro.js DevTools Times, montrant le parcours de l'agent, les widgets et l'option "Copier vers l'agent de codage" vers Antigravity.

N'hésitez pas à nous faire part de votre avis en commentant le bug dédié aux commentaires. Nous allons arrêter la prise en charge des corrections de style automatisées grâce à l'assistance de l'IA avec Chrome 152, au profit de l'option "Copier vers l'agent de codage".

WebMCP

Cette version introduit des outils de débogage WebMCP expérimentaux dans la barre latérale du panneau Application. WebMCP (Web Model Context Protocol) permet aux pages Web d'enregistrer des outils à utiliser par les agents LLM. Pour en savoir plus sur la norme proposée, consultez notre documentation.

Les nouveaux outils de débogage permettent aux développeurs :

  • Inspectez les outils côté client et leurs schémas.
  • Exécutez manuellement les outils avec des paramètres personnalisés.
  • Suivez et filtrez les événements d'appel d'outils actifs ou en attente.
  • Surveillez l'état d'exécution et inspectez les charges utiles de retour.

WebMCP est une norme Web proposée en preview anticipée. Activez les indicateurs #devtools-webmcp-support et #enable-webmcp-testing sur chrome://flags pour commencer à faire des tests.

Nouveaux outils de débogage WebMCP dans le panneau "Application" des outils de développement.
Les nouveaux outils de débogage WebMCP inspectent le site de démonstration L'Atelier, en affichant les invocations d'outils passées, les outils disponibles et les options de filtrage.

Problèmes Chromium : 494516094

Complétion de code pour CSS

L'onglet Styles propose désormais la complétion de code pour CSS avec Gemini, en s'appuyant sur la prise en charge des panneaux "Console" et "Sources". Activez les suggestions de code dans Paramètres > Innovations de l'IA > Suggestions de code.

Cela vous permet de tester des combinaisons plus complexes de propriétés CSS, comme des dégradés ou des ombres de boîte, sans avoir à vous souvenir de leur syntaxe exacte. Ou pour créer rapidement des mises en page en grille et flexibles, en s'appuyant sur plusieurs propriétés associées.

La barre d'outils en bas de l'onglet Styles affiche l'état à l'aide d'une icône de chargement. Les suggestions sont mises à jour ou effacées au fur et à mesure de votre saisie, ce qui garantit que le texte généré par l'IA reste pertinent par rapport à vos modifications manuelles.

Les consignes relatives au contraste des couleurs APCA sont désormais stables

Le calculateur de contraste de l'algorithme de contraste perceptuel avancé (APCA) a officiellement quitté sa phase expérimentale et est désormais disponible en tant que paramètre standard. L'APCA remplace les anciennes consignes de contraste AAA/AA par un modèle de contraste perceptuel moderne optimisé pour les écrans et le rendu de texte modernes.

Vous pouvez désormais activer ou désactiver les consignes APCA à l'aide de la case à cocher située sous Paramètres > Préférences > Éléments > Activer les consignes de contraste APCA.

Bouton d'activation de l'algorithme APCA dans les paramètres des outils de développement et nouvel algorithme en vigueur dans l'onglet "Styles".
Bouton bascule de l'algorithme APCA dans les paramètres des outils de développement et nouvel algorithme en vigueur dans l'onglet "Styles".

User-agent du mode Appareil dynamique

Le mode Appareil réactif utilisait auparavant une chaîne User-Agent codée en dur (Android 6.0 ; Nexus 5). Cela a entraîné une dégradation des fonctionnalités ou le déclenchement de modes de compatibilité sur les sites Web modernes, car l'OS signalé était reconnu comme ayant plus de dix ans.

L'user-agent codé en dur a été remplacé par une heuristique dynamique qui se met à jour automatiquement en fonction de l'année civile en cours. Les outils de développement signalent ainsi toujours un environnement plausible et moderne sans nécessiter de maintenance manuelle.

Autres points marquants

Cette version inclut un certain nombre d'améliorations mineures et de corrections de bugs :

  • Console : ajout d'un bouton bascule Réduire / Développer tout à la barre d'outils du panneau "Console" pour développer ou réduire rapidement tous les groupes de console et les traces de pile actifs en même temps. (427657550)
  • Application : des liens hypertexte cliquables ont remplacé le texte statique pour les champs de bucket de stockage dans la vue des métadonnées de l'application. Lorsque vous cliquez sur un lien de bucket, vous êtes automatiquement redirigé vers ce bucket spécifique dans le panneau latéral Buckets de stockage, qui est mis en évidence. (435311130)
  • Application : réactivation de la prise en charge de l'inspection complète du stockage pour les Service Workers après résolution d'une régression de plantage. (406991275, 466134219)
  • Application : ajout de la prise en charge de l'inspection des événements de prérendu form_submission dans le panneau "Préchargement". (346555939, 488078903)
  • Application : implémentation de la gestion des identifiants de session liés à l'appareil (DBSC), permettant aux développeurs d'effacer ou de supprimer les sessions actives à partir du menu contextuel ou en appuyant sur les touches Delete ou Backspace. (471017387)
  • Éléments : les mises en évidence des nœuds DOM représentant des problèmes masqués dans le panneau "Problèmes" sont désormais mises à jour de manière dynamique (elles apparaissent ou disparaissent) en réponse aux actions de filtrage des problèmes. (40272723)
  • Réseau : les événements envoyés par le serveur (SSE) sont désormais entièrement sérialisés et inclus dans les exportations HAR. Cela permet d'enregistrer et de réimporter dans les outils de développement les captures de flux d'événements en direct et en continu. (494294071)
  • Performances : correction du suivi des métriques Core Web Vitals dans la vue "Métriques en direct" pour limiter le suivi strictement au contexte d'exécution du frame principal, ce qui empêche le renouvellement dynamique des iFrames de réinitialiser les métriques. (494350655)
  • Performances : mise à niveau de web-vitals vers la version 5.2.0, avec l'introduction de correctifs natifs en amont pour les fuites de mémoire lors de la surveillance de l'INP. (484342204)