BrowserTools MCP: MCP-Dienst zur Echtzeit-Überwachung von Browser-Aktivitäten

Allgemeine Einführung

BrowserTools MCP ist ein Open-Source-Projekt, das vom AgentDeskAI-Team entwickelt wurde. Es nutzt Chrome-Erweiterungen und Node.js-Dienste, um die KI in die Lage zu versetzen, die Browseraktivität in Echtzeit zu überwachen, einschließlich Protokolle, Netzwerkanfragen und Screenshots, sowie die Web-Performance, SEO und Barrierefreiheit zu analysieren. Das Projekt basiert auf Anthropisch MCP-Protokoll, geeignet für die Verwendung mit Cursor Die letzte Version 1.2.0 wurde im Februar 2025 veröffentlicht und hat 2400+ Sterne auf GitHub. Die neueste Version, 1.2.0, wurde im Februar 2025 veröffentlicht und hat 2400+ Sterne auf GitHub. Es ist einfach und praktisch, insbesondere für Entwickler, die Webseiten debuggen oder optimieren, und alle Daten werden lokal gespeichert, ohne dass Dienste von Drittanbietern beteiligt sind.

Funktionsliste

• Erfassen Sie die Protokolle der Browser-Konsole in Echtzeit, um Code-Probleme zu lokalisieren.
• Überwachen Sie Netzwerkanfragen auf Anfragestatus und Fehler.
• Erfassen Sie den aktuellen Web-Bildschirm, speichern Sie ihn oder fügen Sie ihn in den Editor ein.
• Analysieren Sie die DOM-Elemente von Webseiten, um bestimmte Daten zu extrahieren.
• Führen Sie eine Leistungsprüfung durch, um die Ursache für langsames Laden zu ermitteln.
• Überprüfen Sie die SEO-Optimierung und machen Sie Vorschläge zur Verbesserung.
• Führt Zugänglichkeitsprüfungen durch und ist WCAG-konform.
• Unterstützung für NextJS-Projektaudits zur Optimierung von Framework-Problemen.
• Bietet einen Debug-Modus, um alle Debugging-Tools nacheinander auszuführen.
• Bietet einen Prüfmodus, der alle Prüfwerkzeuge nacheinander ausführt.

Hilfe verwenden

Für die Ausführung von BrowserTools MCP sind drei Komponenten erforderlich: die Chrome-Erweiterung, der Node-Server und der MCP-Server. Hier finden Sie eine detaillierte Anleitung zur Installation und Nutzung, damit Sie schnell loslegen können.

Einbauverfahren

1. Chrome-Erweiterung installieren
   • Laden Sie die Erweiterung von https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip herunter.
   • Entpacken Sie die ZIP-Datei in einen lokalen Ordner.
   • Öffnen Sie Chrome und gehen Sie zu chrome://extensions/.
   • Schalten Sie den "Entwicklermodus" ein und klicken Sie auf "Erweiterung laden".
   • Wählen Sie den extrahierten Ordner aus und stellen Sie sicher, dass die Erweiterung in der Liste erscheint.
2. Ausführen des Node-Servers
   • Stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist (18+ empfohlen).
   • Öffnen Sie ein Terminal und führen Sie es aus:

     npx @agentdeskai/browser-tools-server@latest
     

   • Die Meldung "Server läuft an Port 3025" weist auf einen erfolgreichen Start hin.
   • Wenn es einen Portkonflikt gibt, schließen Sie den belegenden Prozess und versuchen Sie es erneut.
3. Konfiguration des MCP-Servers (Cursor als Beispiel)
   • Öffnen Sie Cursor und gehen Sie zu Einstellungen > MCP.
   • Klicken Sie auf Neuen globalen MCP-Dienst hinzufügen.
   • Compiler ~/.cursor/mcp.jsonHinzufügen:

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

   • Nach dem Speichern und Aktualisieren der Einstellungen zeigt ein grüner Punkt eine erfolgreiche Verbindung an.

Bedienung der Hauptfunktionen

1. Protokolle der Überwachungskonsole
   • Öffnen Sie die Ziel-Webseite und drücken Sie F12, um auf die Entwickler-Tools zuzugreifen.
   • Klicken Sie auf "Verbinden" im Fenster "BrowserToolsMCP".
   • Die Protokolle werden in Echtzeit angezeigt und können lokal gespeichert werden, indem Sie auf "Protokolle speichern" klicken.
2. Erfassen von Webanfragen
   • Zeigen Sie die Details der Anfrage auf der Registerkarte Netzwerk an.
   • Cursor eintippen mcp_getNetworkLogs Alle Anfragen erhalten, oder mcp_getNetworkErrors Fehlerabfrage anzeigen.
3. Bildschirmfoto
   • Legen Sie den Speicherpfad im Erweiterungspanel fest (Standard) /mcp-screenshots).
   • Klicken Sie auf "Screenshot erstellen", um den Screenshot zu speichern.
   • Wenn "Automatisches Einfügen in Cursor erlauben" aktiviert ist, wird der Screenshot automatisch eingefügt, wenn das Cursor-Eingabefeld im Fokus ist.
4. Ausführen des Audit-Tools
   • Stellen Sie sicher, dass die Erweiterung aktiviert ist und über aktive Seiten verfügt.
   • Geben Sie am Cursor den folgenden Befehl ein:
     • runAccessibilityAuditPrüfung auf Zugänglichkeit (WCAG).
     • runPerformanceAuditAnalyse von Leistungsengpässen.
     • runSEOAuditSEO-Optimierung.
     • runBestPracticesAuditCheck für bewährte Praktiken.
     • runNextJSAuditAudit des NextJS-Projekts.
     • runAuditModeAlle Audits der Reihe nach durchführen.
     • runDebuggerMode: Führen Sie alle Debugging-Tools nacheinander aus.
   • Die Ergebnisse werden im JSON-Format mit dem Ergebnis und den Fragedetails zurückgegeben.
5. Inbetriebnahmemodus versus Auditmodus
   • Einfuhr runDebuggerModeFühren Sie die Debugging-Tools nacheinander aus, um das Problem zu lokalisieren.
   • Einfuhr runAuditModeAuf diese Weise wird das Audit-Tool sequentiell ausgeführt, um alle Optimierungspunkte zu ermitteln.
   • Das NextJS-Projekt erkennt automatisch relevante Audits und führt diese zusätzlich durch.

caveat

• Öffnen Sie nur ein Fenster der Entwicklungswerkzeuge, mehrere Öffnungen können zu Datenverwechslungen führen.
• Ein Neustart des Dienstes oder ein Aktualisieren der Seite löscht das Protokoll, daher wird empfohlen, es im Voraus zu speichern.
• Wenden Sie sich an @tedx_ai (Plattform X) oder lesen Sie die Dokumentation unter https://browsertools.agentdesk.ai/, wenn Sie Probleme haben.

Diese Schritte ermöglichen es Ihnen, die Leistungsfähigkeit von BrowserTools MCP voll auszuschöpfen, um die Effizienz Ihrer Webentwicklung zu verbessern.

Anwendungsszenario

1. Web-Fehlersuche
   Entwickler verwenden es zur Überwachung von Protokollen und Netzwerken, um Codefehler schnell zu finden.
2. Website-Optimierung
   Verbessern Sie die Nutzererfahrung mit Audit-Tools, die Leistung und SEO analysieren.
3. Unterstützung bei der AI-Entwicklung
   KI-Entwickler setzen Cursor ein, um intelligente Anwendungen anhand von Echtzeitdaten zu optimieren.

QA

1. Warum wird das Protokoll nicht angezeigt?
   Vergewissern Sie sich, dass die Erweiterung und der Server verbunden sind, und stellen Sie sicher, dass das Fenster der Entwicklertools nicht mehrfach geöffnet ist.
2. Wo werden die Prüfungsergebnisse eingesehen?
   Nach Ausführung des Befehls in einem MCP-Client wie Cursor werden die Ergebnisse im JSON-Format zurückgegeben.
3. Werden andere Browser unterstützt?
   Derzeit wird nur Chrome unterstützt, wobei in Zukunft Erweiterungen möglich sind.