ExecBro

ExecBro

Dale a tu asistente de IA ojos y manos dentro de tu app React Native en ejecución. Como Chrome DevTools — pero para agentes de IA.

Compila, depura y verifica funciones de principio a fin — sin salir del chat.

ExecBro es el puente en tiempo de ejecución entre tu asistente de codificación con IA y tu app React Native en ejecución — exponiendo herramientas MCP para leer registros y red, inspeccionar estado de componentes, capturar capturas de pantalla, tocar la interfaz y ejecutar JS. Configuración cero, sin necesidad de SDK ni cambios de código para comenzar — y se recomienda instalar el SDK opcional para la captura de registros y red más robusta.

Comenzar

1. Configura ExecBro como servidor MCP para tu agente de preferencia
2. Configura los ayudantes de automatización de interfaz
3. Instala el SDK en tu app React Native — opcional, pero recomendado para la experiencia más robusta de registros, red y estado
4. Autoriza y vincula al panel web — opcional, para estadísticas de uso e historial de sesiones
5. Inicia tu app React Native (npm start / expo start)
6. Pregunta a tu asistente de IA en lenguaje natural — p. ej. "Conéctate al simulador e investiga qué causó el error en la pantalla"

Consulta tu uso — execbro.com

Inicia sesión en execbro.com para ver tu actividad de ExecBro renderizada de vuelta: qué herramientas usas más, tasas de error de herramientas y tu historial de sesiones — para que puedas detectar herramientas inestables, rastrear el uso a lo largo del tiempo y entender cómo tu agente maneja la app entre sesiones. Está construido a partir de la misma telemetría anónima descrita en Telemetría y Privacidad, vinculada a tu ID de instalación.

El enlace es solo para el panel: adjunta tus instalaciones a tu cuenta para que las estadísticas sean tuyas. Nada en las herramientas está restringido detrás de él.

Características

Interacción en Tiempo de Ejecución

• Captura de Registros de Consola - Captura console.log, warn, error, info, debug con filtrado y búsqueda. Nota: en un arranque en frío (primer lanzamiento de la app), los registros emitidos antes de que el servidor MCP se conecte se pierden — las recargas posteriores capturan todo. Instala el SDK opcional para almacenar en búfer los registros desde la primera línea del arranque de la app
• Seguimiento de Solicitudes de Red - Monitorea solicitudes/respuestas HTTP con encabezados, tiempos y contenido del cuerpo. Como con los registros, las solicitudes de red tempranas en un arranque en frío pueden perderse antes de que se establezca la conexión. Instala el SDK opcional para captura completa desde el arranque de la app, incluidos los cuerpos de solicitud/respuesta
• Simulación de Respuestas - Reemplaza o manipula respuestas HTTP para que las rutas de error se alcancen a través del código real de la app — el constructor de solicitudes, la rama de error, el reintento — en lugar de falsificarse escribiendo estado directamente. Simula modo sin conexión, retrasa respuestas, falla solo el primer intento para probar un reintento, o reemite una solicitud capturada con un campo modificado. Las reglas sobreviven a la recarga, y el tráfico alterado siempre está etiquetado. Consulta el tutorial de simulación
• Ejecución de JavaScript - Ejecuta código directamente en tu app (estilo REPL) e inspecciona resultados
• Depuración de Estado Global - Descubre e inspecciona Apollo Client, stores de Redux, Expo Router y globales personalizados. Conecta stores y otros internos de la app directamente al agente con el SDK opcional para acceso de estado directo y confiable
• Detección de Errores de Bundle - Obtén errores del bundler Metro y problemas de compilación con ubicaciones de archivos
• Tocar para Ver Fuente - Señala cualquier elemento con el Inspector de Elementos de RN y obtén el archivo fuente absoluto y la línea donde se renderiza, resuelto desde el _debugStack del fiber de React mediante simbolización de Metro. Funciona en React 19, donde _debugSource ya no existe. Las selecciones se almacenan en búfer en segundo plano, por lo que los toques que hagas durante una sesión manual de inspector se capturan sin preguntar primero al agente

Control de Dispositivos

• Simulador iOS - Capturas de pantalla, gestión de apps, manejo de URLs, arranque/terminación (vía simctl)
• Dispositivos Android - Capturas de pantalla, instalación/lanzamiento de apps, gestión de paquetes (vía ADB)
• Toque Unificado - Herramienta única tap con cadena de respaldo automática: árbol de fibers → accesibilidad → OCR → coordenadas. Detecta automáticamente la plataforma, acepta coordenadas de capturas de pantalla y herramientas de diseño sin cambios. Devuelve captura de pantalla posterior al toque y verifica el cambio visual por defecto
• Deslizamiento Unificado - Herramienta única swipe que enruta automáticamente a iOS o Android según el dispositivo conectado. Toma coordenadas en el mismo espacio de pantalla que las herramientas de diseño y capturas de pantalla — sin conversión — y devuelve una señal verification.meaningful para que los agentes detecten fin de lista, superficies no desplazables y coordenadas fallidas — y en una pantalla sin conexión React Native dice que no pudo inspeccionar en lugar de adivinar. Esencial para desplazar listas virtualizadas (FlatList/SectionList) donde los elementos fuera de pantalla no están en el árbol de fibers
• Pellizco Multi-Táctil Real (solo emulador Android — iOS en progreso) - Herramienta pinch que envía dos contactos táctiles genuinos del kernel a través del puente multi-táctil del emulador Android, para que haga zoom en mapas, galerías, WebViews y vistas nativas por igual — funciona debajo de la app, no a través de React Native. Devuelve la misma señal verification.meaningful que swipe, y se niega en objetivos no compatibles en lugar de falsificar un resultado
• Automatización de Interfaz - Deslizamiento, presión prolongada (tap con duration, resolviendo el objetivo por testID/texto/componente), eventos de teclado y entrada de texto en ambas plataformas. input_text apunta a un campo en sí y verifica la escritura leyéndolo de vuelta; en apps Bridgeless/Fabric replace:true sobrescribe valores prellenados actualizando el estado de React a través de onChangeText, para que los componentes controlados (Formik, react-hook-form, useState) se mantengan consistentes. native:true escribe en lo que el sistema operativo reporta como enfocado, sin necesidad de conexión RN, y dismiss_keyboard opera de la misma manera
• Inspección de Accesibilidad - Consulta la jerarquía de interfaz para encontrar elementos por texto, etiqueta o ID de recurso
• Extracción de Texto OCR - Extrae texto visible con coordenadas listas para tocar vía Google Cloud Vision (funciona en cualquier contenido de pantalla)

Seguridad de Credenciales

• Los secretos nunca entran en la transcripción - La salida de cada herramienta pasa por un punto único de redacción, por lo que un token se reemplaza por un identificador ([secret:auth_api.acme.io]) ya sea que aparezca en un encabezado de red, un store de Redux, una línea de registro o una URL. Los encabezados de credenciales se comparan por patrón en lugar de una lista fija, por lo que los de espacio de nombres de proveedor (x-shopify-access-token, x-goog-api-key, x-hasura-admin-secret) también están cubiertos, mientras que x-request-id y x-idempotency-key se dejan deliberadamente intactos. No hay escape por llamada: EXECBRO_REDACT=off lo establece un humano y requiere reinicio
• Usa una credencial sin leerla - list_secrets nombra los identificadores; http_request({auth:{secret:"api.acme.io"}}) sustituye el valor del lado del host y emite la solicitud desde tu máquina — como Authorization: Bearer por defecto, o en un encabezado clave u otro esquema, para que una credencial nunca tenga que pegarse para cubrir una forma no compatible, y vault_capture lee un token de la app directamente al almacén cuando ninguna solicitud capturada reveló uno. Cada credencial está vinculada al origen donde se observó y se rechaza en otros lugares; el almacén es solo en memoria
• Lado servidor vs. cliente, aislados - http_request se ejecuta desde el host sin la confianza TLS, proxy, cookie jar ni reglas de simulación de la app; app_request se ejecuta dentro de la app con todos ellos. Comparar ambos es cómo distingues un error de backend de uno de cliente — y un 401 del host donde la app tiene éxito es en sí la respuesta de que el backend aplica atestación
• Los datos de la app se tratan como datos - El servidor le dice a cada agente conectado que los registros, cargas útiles, árboles de componentes y resultados de eval están moldeados por lo que la app habló, y nunca deben seguirse como instrucciones

Depuración Multi-Dispositivo

• Conectar Todos los Dispositivos - scan_metro descubre y conecta automáticamente todos los objetivos Bridgeless en cada puerto de Metro
• Segmentación de Dispositivos - Cada herramienta acepta un parámetro opcional device para segmentar dispositivos específicos por nombre (coincidencia de subcadena sin distinción de mayúsculas)
• Búferes por Dispositivo - Los registros y solicitudes de red se capturan por separado por dispositivo para una depuración limpia
• Comparación Multi-Plataforma - Depura iOS y Android lado a lado, comparando registros, tráfico de red y árboles de componentes

Bajo el Capó

• Auto-Descubrimiento - Escanea Metro en los puertos 8081, 8082, 19000-19002 automáticamente
• Soporte Multi-Dispositivo - Se conecta a todos los objetivos Bridgeless simultáneamente, con búferes de registros y red por dispositivo
• Reconexión Automática - Retroceso exponencial (hasta 8 intentos) cuando la conexión se cae
• Búfer Eficiente - Búferes circulares: 500 registros, 200 solicitudes de red, 100 selecciones de inspector
• Soporte de Plataformas - Expo SDK 54+ (Bridgeless) y React Native 0.70+ (Hermes)

Configuración

Agrega ExecBro a Claude Code en un comando — sin instalación, npx obtiene la última versión bajo demanda:

claude mcp add execbro --scope project -- npx -y execbro@latest

Luego reinicia completamente el cliente (sal y vuelve a abrir) para que detecte el nuevo servidor.

El alcance de proyecto escribe un .mcp.json que puedes confirmar, para que todo el equipo use ExecBro en este repositorio y en ningún otro lugar. Cambia project por user para registrarlo globalmente en su lugar — conveniente si trabajas con React Native todo el día, pero inicia ExecBro en cada sesión que abras, incluidos repositorios sin servidor Metro al que conectarse.

¿Usas un cliente diferente o necesitas configuración de plataforma? La guía de configuración completa cubre Claude Desktop, Codex CLI, Cursor, VS Code Copilot, Windsurf, Zed y Gemini CLI, además de los requisitos de Android y automatización de interfaz del simulador iOS.

Instala el SDK (recomendado)

ExecBro funciona sin cambios en la app, pero instalar el paquete complementario execbro-sdk es la mejora más grande en calidad de depuración. Te permite conectar las partes importantes de tu app — tus stores de estado y tu capa de red — directamente al alcance del agente, para que la IA inspeccione estado real de Redux/TanStack Query y cuerpos completos de solicitud/respuesta en lugar de adivinar desde afuera.

	Sin SDK	Con SDK
Stores de estado (Redux, TanStack Query, …)	Manual vía execute_in_app	Conectados — referencias directas
Cuerpos de solicitud/respuesta	No disponibles	Completos (incluido GraphQL)
Solicitudes de red de arranque (auth, config)	Perdidas	Capturadas desde la primera solicitud
Registros de consola desde el arranque	Puede perder registros tempranos	Capturados desde el primer registro
Funciona en Bridgeless (Expo SDK 52+)	Parcial	Completo

Es un npm install más una sola llamada init() en el archivo de entrada de tu app. Consulta la guía del SDK para instalación, inicialización y cada opción de configuración.

Requisitos

• Node.js 20.9+
• App React Native ejecutándose con bundler Metro
• Recomendado: execbro-sdk en tu app — conecta stores y la capa de red al agente para una depuración dramáticamente mejor (opcional; ExecBro funciona sin él)
• Automatización de interfaz iOS: AXe CLI (brew install cameroncooke/axe/axe, predeterminado) o Facebook IDB (brew install idb-companion, opta vía IOS_DRIVER=idb) — requerido para tocar, deslizar, entrada de texto y accesibilidad en el Simulador iOS
• Opcional para respaldo OCR sin conexión: Python 3.6+ (solo se necesita cuando el OCR en la nube no está disponible, consulta la guía de OCR)

Habilidades de Claude Code

Habilidades predefinidas para flujos de depuración comunes: configuración de sesión, inspección de registros, depuración de red y más. Consulta la guía de habilidades para ver la lista completa y las instrucciones de instalación.

Herramientas disponibles

Consulta la referencia completa de herramientas para ver todas las herramientas con descripciones. Herramientas clave:

Herramienta	Descripción
scan_metro	Empieza aquí: escanea servidores Metro y conéctate automáticamente
get_logs / search_logs	Captura y busca registros de consola con filtrado y resúmenes
get_network_requests	Supervisa solicitudes HTTP con filtrado por método/estado
get_screen_state	Instantánea de orientación: ruta activa, superposiciones y cada elemento con un (x, y) listo para tocar
get_screen_layout	Mapa de pantalla de componentes visibles con posiciones, tamaños y contenido de texto
tap	Toque unificado: detecta automáticamente la plataforma, prueba fibra → accesibilidad → OCR → coordenadas
pinch	Pellizco para hacer zoom con dos dedos real — solo emulador de Android (iOS en progreso)
input_text	Escribe texto: apunta y enfoca un campo por sí mismo, o native:true para lo que esté enfocado. replace:true borra primero (Fabric)
dismiss_keyboard	Desenfoca la entrada enfocada y cierra el teclado en pantalla
execute_in_app	Ejecuta expresiones JS en el tiempo de ejecución de la aplicación (estilo REPL)
ios_screenshot / android_screenshot	Toma capturas de pantalla del dispositivo — ios_screenshot también funciona en un iPhone/iPad físico conectado por USB (solo captura)

Uso

1. Inicia tu aplicación React Native:

   npm start
   # or
   expo start
   

2. Simplemente describe lo que quieres en lenguaje natural: el agente elige las herramientas adecuadas. No necesitas saber los nombres de las herramientas ni pedir una específica. Por ejemplo:

   Connect to the simulator and investigate what caused the error on the screen
   

   Check the network logs and investigate why this error is happening
   

   Why is the current screen empty? Take a look and figure it out
   

   Tap the "Sign in" button and tell me what happens
   

   The list won't scroll — scroll it down and check what's going on
   

   Why does this button look wrong — what component renders it and where?
   

   El agente se conecta a Metro, lee registros y red, inspecciona la pantalla y maneja la interfaz de usuario según sea necesario para responder.

Guías detalladas

Guía	Descripción
Configuración	Configuración de MCP por cliente (Claude, Codex, Cursor, VS Code, …), configuración de Android e iOS
Configuración del SDK	Instala y init() el SDK dentro de la aplicación para conectar almacenes + capa de red al agente
Registro de consola	get_logs parámetros, filtrado, modo resumen, optimización de tokens
Seguimiento de red	Configuración del SDK para captura completa, filtrado, detalles de solicitudes, estadísticas
Simulación de red	Tutorial: fuerza un 500, elimina un campo, prueba un reintento, desconéctate, reproduce una solicitud
Inspección de aplicaciones	Depura globales (Apollo, Redux, Expo Router), execute_in_app, limitaciones
Inspección de diseño y componentes	get_screen_layout, árbol de componentes, inspect_at_point, find_components
Interacción con dispositivos	tap unificado, gestos específicos de plataforma, entrada de texto, eventos de teclado
Extracción de texto OCR	OCR de Cloud Vision dentro de tap, respaldo sin conexión, configuración de idioma
Habilidades de Claude Code	Habilidades predefinidas para configuración de sesión, depuración y automatización
Referencia completa de herramientas	Lista completa de las 62 herramientas con descripciones

Cómo funciona

1. Obtiene la lista de dispositivos del endpoint /json de Metro
2. Se conecta al tiempo de ejecución principal de JS mediante CDP (Protocolo de Herramientas de Desarrollo de Chrome) WebSocket
3. Habilita Runtime.enable para recibir eventos Runtime.consoleAPICalled
4. Captura de red a través de dos rutas:
   • Con SDK: Lee del búfer interno de la aplicación del SDK mediante Runtime.evaluate — captura todas las solicitudes desde el inicio con encabezados y cuerpos completos, incluidos eventos de inicio en frío que CDP pasaría por alto
   • Sin SDK: Habilita Network.enable de CDP (en objetivos compatibles) o inyecta un interceptor de fetch JS como respaldo. En el inicio en frío, los eventos emitidos antes de que se establezca la conexión CDP se pierden; las recargas posteriores capturan todo
5. La simulación de respuestas se ejecuta en ese mismo interceptor inyectado: las reglas se comparan antes de que la solicitud llegue al cable y se vuelven a enviar a cada nuevo contexto JS para que sobrevivan a una recarga
6. Almacena registros y solicitudes de red en búferes circulares para su recuperación

Gestión de conexiones

• Un servidor por sesión: cada sesión de agente (cada ventana de terminal o IDE) ejecuta su propia instancia del servidor MCP de ExecBro.
• Se conecta a petición, no al inicio: el servidor nunca se conecta automáticamente. Solo se adjunta a tu aplicación React Native en ejecución cuando se lo pides (por ejemplo, scan_metro), por lo que se mantiene fuera del camino hasta que realmente necesitas un dispositivo.
• Un controlador por dispositivo: si dos o más sesiones en el mismo proyecto apuntan al mismo Metro/dispositivo, competirán por controlarlo, como un automóvil con dos volantes. Mantén la interacción en una sola sesión por dispositivo.
• ¿Quieres sesiones paralelas? Dale a cada una su propio dispositivo y puerto: ejecuta trabajo separado en un worktree de git con su propia instancia de Metro en un puerto diferente y conecta un segundo dispositivo (simulador/emulador) a él. Por ejemplo, mantén main en el 8081 predeterminado e inicia el Metro del worktree en 8082 (npx react-native start --port 8082, o npx expo start --port 8082), luego lanza la aplicación de ese worktree apuntando a 8082. Cada sesión de agente entonces scan_metro y controla su propio dispositivo, por lo que los dos nunca pelean por la conexión.

Solución de problemas

No se encontraron dispositivos

• Asegúrate de que la aplicación se esté ejecutando en un simulador/dispositivo
• Verifica que el empaquetador Metro esté en ejecución (npm start)

Los registros no aparecen

• Asegúrate de que la aplicación esté ejecutándose activamente (no solo Metro)
• Intenta clear_logs y luego activa algunas acciones en la aplicación
• Verifica get_apps para confirmar el estado de la conexión
• En el inicio en frío (primer lanzamiento): La conexión CDP se establece después de que el código de inicialización temprana de la aplicación ya se haya ejecutado, por lo que se pierden los registros de inicio y las solicitudes de red. Una vez conectado, usa reload_app — la recarga posterior captura todo desde el principio porque la conexión ya está en su lugar. Para capturar eventos de inicio en cada lanzamiento, instala el SDK opcional

Telemetría y privacidad

Nunca se envía código fuente, rutas de archivos ni contenido de la aplicación. Tu aplicación y tu repositorio permanecen en tu máquina.

ExecBro envía dos señales pequeñas:

• Analítica de producto (opcional): nombres de herramientas, éxito/fracaso y duraciones. Esto es lo que impulsa tu panel de uso y me dice qué herramientas son inestables y vale la pena corregir. Desactívalo en cualquier momento con EXECBRO_TELEMETRY=false en la configuración de tu servidor MCP.
• Conteo de uso: un total acumulado de cuántas llamadas a herramientas has realizado. Es un número, no contenido, y es la única señal que sigue funcionando cuando la analítica está desactivada.

Consulta la guía de Telemetría y recopilación de datos para ver el desglose completo campo por campo, y PRIVACY.md para la política de privacidad completa.

Versiones compatibles de React Native

Versión	Arquitectura	Motor	Estado
Expo SDK 54+	Bridgeless (Nueva Arq.)	Hermes	✓ Totalmente compatible
RN 0.76+	Bridgeless (Nueva Arq.)	Hermes	✓ Totalmente compatible
RN 0.73 - 0.75	Bridge (Arq. Antigua)	Hermes	✓ Totalmente compatible (mejor captura de red vía CDP)
RN 0.70 - 0.72	Bridge (Arq. Antigua)	Hermes / JSC	✓ Compatible
RN < 0.70	Bridge	JSC	No probado

Precios

ExecBro es gratuito. Cada herramienta, sin límite, sin necesidad de cuenta. Vincular una cuenta es opcional y solo te da el panel de uso.

Comentarios y solicitudes de funciones

Por favor, ejecuta esto al final de tu sesión para ayudarme a mejorar las herramientas. ExecBro está construido para agentes de IA, por lo que los comentarios más valiosos provienen del propio agente: pega este mensaje a tu agente:

Escribe un informe sobre tu experiencia con las herramientas de ExecBro: dónde tuviste dificultades y qué podría mejorarse. Guárdalo como un archivo Markdown para mí, luego envíalo usando la herramienta send_feedback (escribe "feedback") para que se convierta en un problema de GitHub.

Toma 30 segundos: tu agente ejecuta send_feedback, te entrega una URL de problema de GitHub prellenada (la información del entorno ya está adjunta) y haces clic en enviar — sin configuración de GitHub, sin copiar y pegar. Los registros de fricción reales de sesiones reales son lo que da forma a la hoja de ruta y se corrigen primero, así que por favor envía uno. 🙏 Y si solo tienes una idea o pregunta rápida, entra en Debates de GitHub para compartir comentarios, solicitar funciones y votar sobre lo que se construye a continuación.

Nombres de paquetes y mantenerse actualizado

Se distribuye como el paquete npm execbro. El paquete se publicó anteriormente como react-native-ai-devtools y antes de eso como react-native-ai-debugger — ambos nombres heredados siguen recibiendo compilaciones idénticas mediante publicación espejo, por lo que las instalaciones existentes y las configuraciones de MCP siguen funcionando sin cambios. Las nuevas instalaciones deben usar execbro.

[!IMPORTANTE] ¿Ya usas ExecBro? npx almacena paquetes en caché indefinidamente, por lo que podrías estar atascado en una versión antigua sin darte cuenta. Actualiza tu configuración de MCP para usar npx -y execbro@latest (consulta Configuración) para que cada sesión obtenga la última versión con nuevas herramientas y correcciones de errores. Las nuevas instalaciones después de este cambio se actualizan automáticamente.

Licencia

MIT