00:00:00L'équipe Chrome a enfin publié une mise à jour permettant au serveur MCP Chrome DevTools
00:00:06de communiquer avec une instance active de Chrome pour déboguer des problèmes derrière une page de connexion,
00:00:12d'analyser une session en direct et même d'effectuer des tâches de débogage avancées comme l'accès
00:00:17à un élément sélectionné, à des erreurs spécifiques ou même aux activités réseau.
00:00:21Mais face à d'autres outils de débogage IA comme Agent Browser et Playwright, qui ajoutent un CLI
00:00:26avec des compétences et un serveur MCP, est-ce une direction que le MCP Chrome DevTools
00:00:31devra prendre à l'avenir ?
00:00:33Abonnez-vous et découvrons cela ensemble.
00:00:35Il y a quelques mois, Anjis a créé une vidéo offrant un excellent aperçu du serveur MCP
00:00:44Chrome DevTools, mais à l'époque, il ne pouvait que lancer une nouvelle session Chrome,
00:00:49ou se connecter à un port de débogage distant, ce qui exigeait beaucoup de configuration manuelle.
00:00:53Désormais, avec Chrome 144 et plus, et le flag de débogage distant activé, l'outil MCP Chrome
00:00:58détectera automatiquement une session ouverte pour le débogage, ce qui change tout pour moi
00:01:04car je préfère utiliser Claude Code dans le terminal. Cela signifie que je n'ai plus
00:01:09à utiliser des navigateurs IA comme Deer ou Comet, ni l'extension Chrome de Claude,
00:01:15ou même des outils de débogage IA utiles comme React Grab.
00:01:18Voyons ces nouvelles fonctionnalités du MCP Chrome DevTools en action.
00:01:22Vous devrez d'abord installer le serveur MCP avec l'option d'auto-connexion disponible.
00:01:27J'utilise Open Code, mais cela supporte de nombreux agents, et dans Chrome, vous devrez
00:01:31accéder à cette URL et vous assurer que cette option est activée.
00:01:36Auparavant, il fallait démarrer une session avec une commande comme celle-ci et l'agent
00:01:40se connectait au port exposé via HTTP.
00:01:43Mais avec la nouvelle méthode via cette interface, vous lancez Chrome normalement en gardant
00:01:48vos cookies et votre historique, et vous pouvez le désactiver quand vous avez fini.
00:01:53Si vous tenez à votre sécurité, je vous montrerai plus tard dans la vidéo comment
00:01:57vous connecter à une version plus privée de Chrome.
00:01:59Une fois ces deux étapes franchies : activer l'option et se connecter au serveur MCP
00:02:04avec l'auto-connexion, tout devrait être prêt.
00:02:08Je peux demander à mon agent de vérifier les performances de Betastack et, dans Chrome,
00:02:12une fenêtre contextuelle me demandera d'autoriser le débogage distant, puis une bannière s'affichera.
00:02:17L'agent a pu naviguer sur le site Betastack et utilise maintenant l'outil d'audit
00:02:21Lighthouse pour me donner des indicateurs Web Vitals, des scores et d'autres détails.
00:02:27Passons maintenant à quelque chose de vraiment utile.
00:02:29Voici une application d'apprentissage des langues sur laquelle je travaille.
00:02:31Je suis connecté en tant qu'admin, je suis allé dans le contenu et sur cet exercice précis.
00:02:37J'ai remarqué sur la fenêtre de l'exercice que le bouton "Enregistrer" ici est différent
00:02:42des autres boutons du site.
00:02:44Au lieu de dire manuellement à l'agent de reproduire mes étapes, comme se connecter
00:02:49et naviguer jusqu'ici, je vais sélectionner ce bouton dans les outils d'inspection,
00:02:55puis demander à l'agent s'il peut voir l'élément que j'ai sélectionné.
00:02:58Après un moment, il parvient à voir que le bouton "Enregistrer" est sélectionné.
00:03:02Je lui demande donc de modifier le style pour qu'il ressemble au bouton "Nouvel exercice",
00:03:06qui est le bouton juste ici, si vous le voyez.
00:03:09En quelques secondes, il a modifié le style du bouton exactement comme je le voulais.
00:03:13Notez que si vous lancez le serveur MCP dans un environnement sandbox, vous devrez utiliser
00:03:18l'URL du navigateur avec le port de débogage distant en HTTP, pas en WebSockets.
00:03:23Et si la sécurité vous préoccupe, vous devrez ajouter le répertoire des données utilisateur
00:03:28à une localisation spécifique dans les options du serveur MCP. Ainsi, les agents
00:03:33n'auront pas accès à vos cookies, mots de passe ou historique de navigation existants.
00:03:36Vous devrez alors vous reconnecter aux sites pour que l'agent puisse y accéder.
00:03:41C'est génial, mais si vous avez vu mes précédentes vidéos, vous savez que je ne suis pas
00:03:46un grand fan des serveurs MCP car ils consomment beaucoup de contexte si vous en avez trop.
00:03:51beaucoup.
00:03:52Heureusement, le serveur MCP Chrome DevTools permet de tout faire via un CLI,
00:03:59ce que peu de gens savent car c'est un peu caché dans le répertoire des compétences,
00:04:04puis dans Chrome DevTools CLI pour découvrir cette fonctionnalité expérimentale,
00:04:10qui donne à votre agent les informations sur comment l'utiliser.
00:04:12Il y a aussi des instructions d'installation si vous ne l'avez pas déjà fait.
00:04:16C'est essentiellement une légère surcouche autour du serveur MCP.
00:04:20Si vous l'avez déjà dans un harnais d'agent, ce CLI ne l'utilisera pas
00:04:24car il utilise son propre démon.
00:04:26Cette commande donne des infos sur le démon par défaut, et on voit déjà qu'il a configuré
00:04:30le flag URL du navigateur avec d'autres options comme "headless" et "isolated".
00:04:34Mais vous remarquerez qu'il n'y a pas d'auto-connexion dans les options du CLI.
00:04:39Donc, si vous n'avez pas lancé Chrome via le terminal, vous devrez quitter celui-ci
00:04:43et le lancer ainsi, en vous assurant d'avoir le flag du port de débogage distant
00:04:48et celui des données utilisateur.
00:04:50Maintenant, je peux lancer le démon, lister les pages, ce qui ne montre qu'un nouvel
00:04:54onglet car il n'y a pas grand-chose pour le moment.
00:04:57Mais bien sûr, la vraie puissance réside dans l'utilisation avec un agent.
00:05:01Si je coupe l'outil MCP Chrome, sélectionne ce bouton dans DevTools et demande à l'agent
00:05:06d'utiliser le CLI pour identifier l'élément sélectionné, on voit qu'il y parvient.
00:05:10parfaitement.
00:05:11Notez que les données du répertoire utilisateur persistent entre les sessions.
00:05:15Cela conserve donc tous mes cookies, mes informations de navigation, etc.
00:05:19De plus, le CLI Chrome DevTools offre de nombreuses autres possibilités.
00:05:22Je vous recommande d'explorer cette compétence ; ils ajouteront peut-être l'auto-connexion
00:05:26à l'avenir.
00:05:28Voilà donc un tour d'horizon rapide des nouvelles fonctionnalités du serveur MCP et
00:05:32du CLI Chrome DevTools, qui amélioreront nettement votre expérience de débogage
00:05:38avec des assistants de code.
00:05:39En tant qu'utilisateur d'Arc (oui, je l'utilise toujours), j'espère que cela arrivera bientôt.
00:05:45En attendant, je suis ravi d'utiliser Agent Browser de Vassal, qui fonctionne
00:05:50très bien pour moi.
00:05:51Si vous ne connaissez pas Agent Browser, allez voir ma vidéo d'il y a quelque temps,
00:05:55même s'il s'est beaucoup amélioré depuis.
00:05:58Il est peut-être temps que j'en fasse une nouvelle.