Chrome DevTools Connect : WebStorm pilote le navigateur depuis l'IDE
JetBrains intègre Chrome DevTools CLI dans WebStorm 2026.2.1 pour permettre aux agents IA d'inspecter, déboguer et interagir avec Chrome sans quitter l'éditeur.
Profil éditorial · Développement web
En bref
- Chrome DevTools Connect est livré en tant que skill CLI bundled dans WebStorm 2026.2.1, développé en partenariat avec l'équipe Chrome DevTools de Google
- L'agent IASystème qui planifie et enchaîne des actions (outils, APIs, code) pour atteindre un objectif, au-delà d’une seule réponse texte. peut ouvrir Chrome, inspecter le rendu, lire les logs console et requêtes réseau, prendre des screenshots et interagir avec la page directement depuis l'IDE
- Aucune configuration supplémentaire ni câblage MCPModel Context Protocol : standard pour brancher des outils / données à un LLM (serveurs, resources, tools). requis : une installation de package unique à la première utilisation, puis automatique
- Complète Figma Connect (publié quelques jours avant) pour couvrir le workflow design → code → navigateur entièrement dans WebStorm
- L'agent décide lui-même quand atteindre le navigateur pour vérifier le runtime, ou le fait sur demande explicite
Sommaire · 3 sections
Un agent qui voit ce qui se passe dans Chrome
WebStorm 2026.2.1 embarque Chrome DevTools Connect, une skill CLI bundled qui permet à l'agent IA de l'éditeur d'interagir directement avec Chrome. Concrètement : l'agent peut ouvrir le navigateur, inspecter le rendu, lire les logs console et les requêtes réseau, prendre des screenshots et manipuler la page, sans que le développeur quitte l'IDE.
Le plugin repose sur Chrome DevTools CLI et a été développé en partenariat avec l'équipe Chrome DevTools de Google. À la première utilisation, WebStorm propose une installation de package unique ; ensuite, l'agent y accède automatiquement dès qu'il juge qu'une vérification runtime est nécessaire, ou sur demande explicite.
Aucun câblage MCP ni recherche d'outil d'automatisation de navigateur compatible n'est requis.
Un exemple : bug de prix obsolète dans un tunnel de commande
JetBrains illustre l'usage avec un scénario de bug dans un flux checkout multi-étapes : le récapitulatif de commande affiche des prix obsolètes après que l'utilisateur revient en arrière et modifie son panier. Le composant s'affiche correctement au premier chargement, rien ne semble incorrect dans le code, mais le bug n'apparaît qu'après une séquence précise : ajouter un article → passer à la caisse → revenir → changer la quantité → repasser à la caisse.
Avant Chrome DevTools Connect, reproduire ce bug signifiait cliquer manuellement à travers cette séquence à chaque itération, repérer le prix obsolète, basculer vers l'IDE, décrire ce qui s'est passé, attendre le correctif de l'agent, puis recliquer toute la séquence pour vérifier. L'agent travaillait à partir de la description fournie ; le développeur était le relais entre l'IDE et le navigateur.
Avec le plugin, le développeur demande à l'agent : « Le récapitulatif de commande affiche des prix obsolètes si tu reviens en arrière et changes le contenu du panier, donc corrige-le et vérifie le correctif dans le navigateur. » L'agent navigue dans le flux, reproduit le bug, lit l'état obsolète depuis la console, remonte à une dépendance manquante, applique le correctif et reclique la séquence pour confirmer que le bug a disparu. Le développeur reste dans la boucle pour les décisions, mais cesse d'être l'intermédiaire entre l'IDE et le navigateur.
Design → code → navigateur, sans changement de contexte
Chrome DevTools Connect est la deuxième pièce d'un workflow que JetBrains reconstruit entièrement dans WebStorm. Quelques jours avant cette annonce, l'éditeur a publié Figma Connect for WebStorm, qui fait entrer l'intention de design, les specs de composants et les design tokensUnité de texte traitée par un modèle (souvent un morceau de mot). Les coûts et fenêtres de contexte se comptent en tokens. directement depuis Figma dans l'IDE, éliminant le premier changement de contexte.
Avec Chrome DevTools Connect, la validation navigateur arrive à la fin du workflow, toujours dans WebStorm. Le cycle design → code → navigateur se déroule désormais entièrement dans l'éditeur, sans basculement requis.
JetBrains annonce que d'autres intégrations sont en préparation.
Lecture 404 Mates
Chrome DevTools Connect réduit la friction dans un geste répétitif : vérifier que le code produit par l'agent correspond bien à ce qui s'affiche et fonctionne dans le navigateur. Pour les agences et les builders qui intègrent déjà des agents IA dans leur workflow de développement frontend, cela signifie moins de va-et-vient manuel entre l'éditeur et Chrome, surtout sur les bugs qui nécessitent une séquence d'interactions précise pour se reproduire.
L'intégration repose sur Chrome DevTools CLI, développée en partenariat avec Google, ce qui limite le risque de rupture à court terme et évite de dépendre d'un outil d'automatisation tiers. Le fait que la skill soit bundled et s'active automatiquement après une installation unique réduit également la charge de configuration, un point sensible dans les environnements où plusieurs développeurs ou agents travaillent sur le même projet.
Couplé à Figma Connect (publié quelques jours avant), WebStorm construit un workflow design → code → navigateur entièrement contenu dans l'IDE. Pour les équipes qui travaillent déjà avec Figma et Chrome, cela centralise trois environnements auparavant séparés. L'enjeu n'est pas tant la nouveauté technique que la réduction du coût cognitif et temporel du changement de contexte, surtout quand l'agent doit itérer plusieurs fois sur un même composant.
Reste à voir comment ce type d'intégration se comporte sur des projets complexes (applications multi-onglets, états asynchrones, tests end-to-end) et si d'autres navigateurs que Chrome seront couverts. JetBrains annonce d'autres intégrations à venir, sans préciser lesquelles.
