Publié le 23 septembre 2025
Nous lançons aujourd'hui une version Preview publique du nouveau serveur MCP (Model Context Protocol) des outils pour les développeurs Chrome, qui apporte la puissance des outils pour les développeurs Chrome aux assistants de programmation basés sur l'IA.
Les agents de codage sont confrontés à un problème fondamental : ils ne peuvent pas voir ce que fait réellement le code qu'ils génèrent lorsqu'il s'exécute dans le navigateur. Ils programment en quelque sorte les yeux bandés.
Le serveur MCP des outils de développement Chrome change la donne. Les assistants de programmation basés sur l'IA sont capables de déboguer des pages Web directement dans Chrome et de bénéficier des fonctionnalités de débogage et des insights sur les performances des outils de développement. Cela leur permet d'identifier et de résoudre les problèmes plus précisément.
Découvrez son fonctionnement :
Qu'est-ce que le protocole MCP (Model Context Protocol) ?
Le Model Context Protocol (MCP) est une norme Open Source permettant de connecter des grands modèles de langage (LLM) à des outils et des sources de données externes. Le serveur MCP des outils de développement Chrome ajoute des fonctionnalités de débogage à votre agent d'IA.
Par exemple, le serveur MCP des outils pour les développeurs Chrome fournit un outil appelé performance_start_trace. Lorsqu'un LLM est chargé d'examiner les performances de votre site Web, il peut utiliser cet outil pour démarrer Chrome, ouvrir votre site Web et utiliser Chrome DevTools pour enregistrer une trace de performances. Le LLM peut ensuite analyser la trace de performances pour suggérer des améliorations potentielles. Grâce au protocole MCP, le serveur MCP des outils pour les développeurs Chrome peut apporter de nouvelles fonctionnalités de débogage à votre agent de codage pour l'aider à mieux créer des sites Web.
Pour en savoir plus sur le fonctionnement de MCP, consultez la documentation MCP.
Pour quoi l'utiliser ?
Voici quelques exemples de requêtes que vous pouvez essayer dans l'assistant IA de votre choix, comme la CLI Gemini.
Vérifier les modifications de code en temps réel
Générez une correction avec votre agent IA, puis vérifiez automatiquement que la solution fonctionne comme prévu avec Chrome DevTools MCP.
Requête à tester :
Verify in the browser that your change works as expected.
Diagnostiquer les erreurs de réseau et de console
Permettez à votre agent d'analyser les requêtes réseau pour identifier les problèmes CORS ou d'inspecter les journaux de la console pour comprendre pourquoi une fonctionnalité ne fonctionne pas comme prévu.
Requête à tester :
A few images on localhost:8080 are not loading. What's happening?
Simuler le comportement des utilisateurs
Naviguez, remplissez des formulaires et cliquez sur des boutons pour reproduire des bugs et tester des parcours utilisateur complexes, tout en inspectant l'environnement d'exécution.
Requête à tester :
Why does submitting the form fail after entering an email address?
Déboguer les problèmes de style et de mise en page en direct
Demandez à votre agent IA de se connecter à une page en direct, d'inspecter le DOM et le CSS, et d'obtenir des suggestions concrètes pour résoudre des problèmes de mise en page complexes, comme les éléments qui débordent, en fonction des données en direct du navigateur.
Requête à tester :
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatiser les audits de performances
Demandez à votre agent d'IA d'exécuter une trace de performances, d'analyser les résultats et d'examiner des problèmes de performances spécifiques, comme des valeurs LCP élevées.
Requête à tester :
Localhost:8080 is loading slowly. Make it load faster.
Consultez la documentation de référence sur l'outil pour obtenir la liste de tous les outils disponibles.
Commencer
Pour essayer, ajoutez l'entrée de configuration suivante à votre client MCP :
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Pour vérifier si cela fonctionne, exécutez la requête suivante dans votre agent de programmation :
Please check the LCP of web.dev.
Pour en savoir plus, consultez la documentation MCP des outils de développement Chrome sur GitHub.
Un travail d'équipe
Nous développons progressivement le MCP des outils pour les développeurs Chrome, en commençant par la version bêta publique que nous lançons aujourd'hui. Nous sollicitons activement vos commentaires et ceux de la communauté sur les fonctionnalités que nous devrions ajouter ensuite. Que vous soyez un développeur utilisant des assistants de codage IA ou un fournisseur créant la prochaine génération d'outils de développement d'IA, vos insights seront précieux. Si quelque chose manque ou ne fonctionne pas, veuillez signaler un problème sur GitHub.