BrowserTools MCP : service MCP pour la surveillance en temps réel de l'activité du navigateur

Introduction générale

BrowserTools MCP est un projet open source développé par l'équipe AgentDeskAI. Il utilise des extensions Chrome et des services Node.js pour permettre à l'IA de surveiller l'activité du navigateur en temps réel, y compris les journaux, les requêtes réseau et les captures d'écran, ainsi que pour analyser les performances web, le référencement et l'accessibilité. Le projet est basé sur Anthropique Protocole MCP, utilisable avec Curseur La dernière version 1.2.0 a été publiée en février 2025 et compte plus de 2400 étoiles sur GitHub. La dernière version, 1.2.0, a été publiée en février 2025 et compte plus de 2400 étoiles sur GitHub. Il est simple et pratique, en particulier pour les développeurs qui déboguent des pages web ou optimisent des sites web, et toutes les données sont stockées localement sans faire appel à des services tiers.

Liste des fonctions

• Capturez les journaux de la console du navigateur en temps réel pour localiser les problèmes de code.
• Surveiller les demandes de réseau pour connaître l'état de la demande et les erreurs.
• Capturez l'écran Web actuel, enregistrez-le ou collez-le dans l'éditeur.
• Analyser les éléments DOM d'une page web pour en extraire des données spécifiques.
• Effectuez un audit de performance pour découvrir la cause des lenteurs de chargement.
• Vérifier l'optimisation du référencement et proposer des améliorations.
• Effectue des audits d'accessibilité et est conforme aux normes WCAG.
• Soutien à l'audit des projets NextJS afin d'optimiser les problèmes liés au cadre de travail.
• Fournit un mode de débogage permettant d'exécuter tous les outils de débogage dans l'ordre.
• Fournit un mode d'audit qui exécute tous les outils d'audit dans l'ordre.

Utiliser l'aide

BrowserTools MCP nécessite trois composants pour fonctionner : l'extension Chrome, le serveur Node et le serveur MCP. Voici un guide d'installation et d'utilisation détaillé pour vous permettre de démarrer rapidement.

Processus d'installation

1. Installer l'extension Chrome
   • Téléchargez l'extension à partir de https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip.
   • Extraire le fichier ZIP dans un dossier local.
   • Ouvrez Chrome et allez dans chrome://extensions/.
   • Activez le "Developer Mode" et cliquez sur "Load Extension".
   • Sélectionnez le dossier extrait et assurez-vous que l'extension apparaît dans la liste.
2. Exécution du serveur Node
   • Assurez-vous que Node.js est installé sur votre ordinateur (18+ recommandé).
   • Ouvrez un terminal et exécutez le programme :

     npx @agentdeskai/browser-tools-server@latest
     

   • Le fait de voir "Server running on port 3025" indique que le démarrage a réussi.
   • S'il y a un conflit de port, fermez le processus occupant et réessayez.
3. Configuration du serveur MCP (exemple du curseur)
   • Ouvrez Cursor et allez dans Paramètres > MCP.
   • Cliquez sur Add New Global MCP Service (Ajouter un nouveau service MCP global).
   • compilateur ~/.cursor/mcp.jsonAjouter :

     {
     "mcpServers": {
     "browser-tools-mcp": {
     "command": "npx",
     "args": ["@agentdeskai/browser-tools-mcp@latest"]
     }
     }
     }
     

   • Après avoir sauvegardé et actualisé les paramètres, un point vert indique une connexion réussie.

Fonctionnement des principales fonctions

1. Surveillance des journaux de la console
   • Ouvrez la page web cible et appuyez sur F12 pour accéder aux outils de développement.
   • Cliquez sur "Connect" dans le panneau "BrowserToolsMCP".
   • Les journaux sont affichés en temps réel et peuvent être enregistrés localement en cliquant sur "Enregistrer les journaux".
2. Capturer les requêtes web
   • Consultez les détails de la demande dans l'onglet Réseau.
   • Tapez dans le curseur mcp_getNetworkLogs Obtenir toutes les demandes, ou mcp_getNetworkErrors Demande d'erreur de visualisation.
3. capture d'écran
   • Définir le chemin d'enregistrement dans le panneau d'extension (par défaut) /mcp-screenshots).
   • Cliquez sur "Prendre une capture d'écran" pour enregistrer la capture d'écran.
   • Lorsque l'option "Autoriser le collage automatique dans le curseur" est activée, la capture d'écran est automatiquement collée lorsque la zone de saisie du curseur est au premier plan.
4. Exécution de l'outil d'audit
   • Assurez-vous que l'extension est activée et que ses pages sont actives.
   • Saisissez la commande suivante au niveau du curseur :
     • runAccessibilityAuditLes critères d'accessibilité : vérifier l'accessibilité (WCAG).
     • runPerformanceAuditLes goulets d'étranglement : Analyser les goulets d'étranglement des performances.
     • runSEOAudit: Optimiser le référencement.
     • runBestPracticesAuditLes pratiques exemplaires : Vérifier les pratiques exemplaires.
     • runNextJSAudit: Audit du projet NextJS.
     • runAuditModeLes audits peuvent être exécutés de manière séquentielle.
     • runDebuggerModeLancement de tous les outils de débogage dans l'ordre : Lancement de tous les outils de débogage dans l'ordre.
   • Les résultats sont renvoyés au format JSON avec le score et les détails de la question.
5. Mode de commissionnement ou mode d'audit
   • importation runDebuggerModeLancez les outils de débogage l'un après l'autre afin de localiser le problème.
   • importation runAuditModeDe cette manière, l'outil d'audit est exécuté de manière séquentielle afin de détecter tous les points d'optimisation.
   • Le projet NextJS reconnaît automatiquement les audits pertinents et les exécute en plus.

mise en garde

• N'ouvrez qu'une seule fenêtre de l'outil de développement, des ouvertures multiples pouvant entraîner une confusion des données.
• Le redémarrage du service ou l'actualisation de la page effacera le journal, il est donc recommandé de le sauvegarder à l'avance.
• Contactez @tedx_ai (plate-forme X) ou consultez la documentation à l'adresse https://browsertools.agentdesk.ai/ si vous rencontrez des problèmes.

Ces étapes vous permettent de tirer pleinement parti de la puissance de BrowserTools MCP pour améliorer l'efficacité de votre développement web.

scénario d'application

1. débogage web
   Les développeurs l'utilisent pour surveiller les journaux et les réseaux afin de trouver rapidement les erreurs de code.
2. Optimisation du site web
   Améliorez l'expérience des utilisateurs grâce à des outils d'audit qui analysent les performances et le référencement.
3. Soutien au développement de l'IA
   Les développeurs d'IA intègrent Cursor pour optimiser les applications intelligentes à l'aide de données en temps réel.

QA

1. Pourquoi le journal ne s'affiche-t-il pas ?
   Confirmez que l'extension et le serveur sont connectés et vérifiez que la fenêtre des outils de développement n'est pas ouverte plus d'une fois.
2. Où sont consultés les résultats de l'audit ?
   Après avoir exécuté la commande dans un client MCP tel que Cursor, les résultats sont renvoyés au format JSON.
3. D'autres navigateurs sont-ils pris en charge ?
   Actuellement, seul Chrome est pris en charge, avec des extensions possibles à l'avenir.