BrowserTools MCP: servicio MCP para la supervisión en tiempo real de la actividad del navegador

Introducción general

BrowserTools MCP es un proyecto de código abierto desarrollado por el equipo AgentDeskAI. Utiliza extensiones de Chrome y servicios Node.js para permitir a la IA supervisar la actividad del navegador en tiempo real, incluidos registros, solicitudes de red y capturas de pantalla, así como analizar el rendimiento web, el SEO y la accesibilidad. El proyecto se basa en Antrópico Protocolo MCP, adecuado para su uso con Cursor La última versión, 1.2.0, fue lanzada en febrero de 2025 y tiene 2400+ estrellas en GitHub. La última versión, 1.2.0, se publicó en febrero de 2025 y cuenta con más de 2400 estrellas en GitHub. Es sencillo y práctico, especialmente para los desarrolladores que depuran páginas web u optimizan sitios web, y todos los datos se almacenan localmente sin implicar servicios de terceros.

Lista de funciones

• Capture los registros de la consola del navegador en tiempo real para localizar problemas de código.
• Supervisar el estado y los errores de las solicitudes de red.
• Captura la pantalla web actual, guárdala o pégala en el editor.
• Analice los elementos DOM de las páginas web para extraer datos específicos.
• Realice una auditoría de rendimiento para descubrir la causa de la lentitud de carga.
• Comprobar la optimización SEO y aportar sugerencias de mejora.
• Realiza auditorías de accesibilidad y cumple las normas WCAG.
• Compatibilidad con la auditoría de proyectos NextJS para optimizar los problemas del marco.
• Proporciona el modo de depuración para ejecutar todas las herramientas de depuración en secuencia.
• Proporciona un modo de auditoría que ejecuta todas las herramientas de auditoría en secuencia.

Utilizar la ayuda

BrowserTools MCP requiere tres componentes para funcionar: la extensión de Chrome, el servidor Node y el servidor MCP. Aquí tienes una guía detallada de instalación y uso para que puedas empezar rápidamente.

Proceso de instalación

1. Instalar extensión de Chrome
   • Descargue la extensión de https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip.
   • Extraiga el archivo ZIP a una carpeta local.
   • Abra Chrome y vaya a chrome://extensions/.
   • Active el "Modo desarrollador" y haga clic en "Cargar extensión".
   • Seleccione la carpeta extraída y asegúrese de que la extensión aparece en la lista.
2. Ejecutar el servidor Node
   • Asegúrate de que Node.js está instalado en tu ordenador (se recomiendan mayores de 18 años).
   • Abre un terminal y ejecútalo:

     npx @agentdeskai/browser-tools-server@latest
     

   • Ver "Servidor ejecutándose en el puerto 3025" indica un arranque correcto.
   • Si hay un conflicto de puertos, cierre el proceso que lo ocupa y vuelva a intentarlo.
3. Configuración del servidor MCP (Cursor como ejemplo)
   • Abra Cursor y vaya a Configuración > MCP.
   • Haga clic en Añadir nuevo servicio MCP global.
   • compilador ~/.cursor/mcp.jsonAñade:

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

   • Tras guardar y actualizar los ajustes, un punto verde indica que la conexión se ha realizado correctamente.

Funcionamiento de las funciones principales

1. Supervisión de los registros de la consola
   • Abra la página web de destino y pulse F12 para acceder a las herramientas de desarrollo.
   • Haga clic en "Conectar" en el panel "BrowserToolsMCP".
   • Los registros se muestran en tiempo real y pueden guardarse localmente haciendo clic en "Guardar registros".
2. Captura de solicitudes web
   • Vea los detalles de la solicitud en la pestaña Red.
   • En la entrada Cursor mcp_getNetworkLogs Obtener todas las solicitudes, o mcp_getNetworkErrors Ver solicitud de error.
3. captura de pantalla
   • Establecer la ruta de guardado en el panel de extensión (por defecto) /mcp-screenshots).
   • Haz clic en "Hacer captura de pantalla" para guardar la captura.
   • Cuando la opción "Permitir pegado automático en el cursor" está activada, la captura de pantalla se pega automáticamente al centrarse en el cuadro de entrada del cursor.
4. Ejecutar la herramienta de auditoría
   • Asegúrese de que la extensión está activada y tiene páginas activas.
   • Introduzca el siguiente comando en Cursor:
     • runAccessibilityAuditComprobación de accesibilidad (WCAG).
     • runPerformanceAudit: Analizar los cuellos de botella del rendimiento.
     • runSEOAuditOptimización SEO.
     • runBestPracticesAudit: Comprobación de las mejores prácticas.
     • runNextJSAuditAuditoría del proyecto NextJS.
     • runAuditModeEjecute todas las auditorías secuencialmente.
     • runDebuggerModeEjecuta todas las herramientas de depuración en secuencia.
   • Los resultados se devuelven en formato JSON con la puntuación y los detalles de la pregunta.
5. Modo de puesta en servicio frente a modo de auditoría
   • importación runDebuggerModeejecute las herramientas de depuración en secuencia para ayudar a localizar el problema.
   • importación runAuditModeDe este modo, la herramienta de auditoría se ejecuta secuencialmente para detectar todos los puntos de optimización.
   • El proyecto NextJS reconoce automáticamente y ejecuta adicionalmente las auditorías pertinentes.

advertencia

• Abra sólo una ventana de la herramienta de desarrollo, las aperturas múltiples pueden dar lugar a confusión de datos.
• Reiniciar el servicio o actualizar la página borrará el registro, por lo que se recomienda guardarlo con antelación.
• Póngase en contacto con @tedx_ai (Plataforma X) o consulte la documentación en https://browsertools.agentdesk.ai/ si tiene problemas.

Estos pasos le permitirán aprovechar al máximo la potencia de BrowserTools MCP para mejorar la eficacia de su desarrollo web.

escenario de aplicación

1. depuración web
   Los desarrolladores lo utilizan para supervisar los registros y las redes y encontrar rápidamente errores de código.
2. Optimización del sitio web
   Mejore la experiencia del usuario con herramientas de auditoría que analizan el rendimiento y el SEO.
3. Apoyo al desarrollo de la IA
   Los desarrolladores de IA incorporan Cursor para optimizar aplicaciones inteligentes utilizando datos en tiempo real.

CONTROL DE CALIDAD

1. ¿Por qué no aparece el registro?
   Confirme que la extensión y el servidor están conectados y compruebe que la ventana de herramientas de desarrollo no se abre más de una vez.
2. ¿Dónde se consultan los resultados de la auditoría?
   Tras ejecutar el comando en un cliente MCP como Cursor, los resultados se devuelven en formato JSON.
3. ¿Se admiten otros navegadores?
   Actualmente sólo es compatible con Chrome, con posibles ampliaciones en el futuro.