Publié le 23 septembre 2025
Nous lançons aujourd'hui une préversion 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 codage 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 pour les développeurs Chrome change la donne. Les assistants de codage IA peuvent déboguer des pages Web directement dans Chrome et bénéficier des fonctionnalités de débogage et des insights sur les performances des Outils pour les développeurs. Cela améliore leur précision lors de l'identification et de la résolution des problèmes.
Découvrez par vous-même comment cela fonctionne :
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 pour les développeurs Chrome ajoute des fonctionnalités de débogage à votre agent 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 les Outils pour les développeurs Chrome afin d'enregistrer une trace de performances. Le LLM peut ensuite analyser la trace de performances pour suggérer des améliorations potentielles. À l'aide du 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 afin de l'aider à créer des sites Web de meilleure qualité.
Pour en savoir plus sur le fonctionnement du protocole MCP, consultez la documentation MCP.
À quoi peut-il servir ?
Voici quelques exemples d'invites que vous pouvez essayer dans l'assistant IA de votre choix, comme Gemini CLI.
Vérifier les modifications de code en temps réel
Générez un correctif avec votre agent IA, puis vérifiez automatiquement que la solution fonctionne comme prévu avec le protocole MCP des Outils pour les développeurs Chrome.
Invite à essayer :
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 détecter les problèmes CORS ou d'inspecter les journaux de la console pour comprendre pourquoi une fonctionnalité ne fonctionne pas comme prévu.
Invite à essayer :
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 flux utilisateur complexes, tout en inspectant l'environnement d'exécution.
Invite à essayer :
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 des éléments qui débordent, en fonction des données en direct du navigateur.
Invite à essayer :
The page on localhost:8080 looks strange and off. Check what's happening there.
Automatiser les audits de performances
Demandez à votre agent 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.
Invite à essayer :
Localhost:8080 is loading slowly. Make it load faster.
Consultez la documentation de référence de notre outil pour obtenir la liste de tous les outils disponibles.
Premiers pas
Pour essayer cette fonctionnalité, 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 l'invite suivante dans votre agent de codage :
Please check the LCP of web.dev.
Pour en savoir plus, consultez la documentation MCP des Outils pour les développeurs Chrome sur GitHub.
Un travail d'équipe
Nous développons le protocole MCP des Outils pour les développeurs Chrome de manière progressive, en commençant par la version de préversion publique que nous publions aujourd'hui. Nous sommes à l'écoute de vos commentaires et de 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 IA, vos insights seront précieux. Si quelque chose manque ou ne fonctionne pas, veuillez signaler un problème sur GitHub.