DevRecorder

¿Qué es DevRecorder?

DevRecorder es un grabador de pantalla diseñado para desarrolladores que captura contexto de depuración junto con lo que ocurre en la interfaz. Graba un vídeo con una línea de tiempo sincronizada de logs de consola, solicitudes de red y eventos de navegación para que puedas desplazarte hasta el momento exacto en que ocurre un error.

El grabador también captura detalles de solicitudes y respuestas (incluidos encabezados, cargas útiles y cuerpos de respuesta) y puede añadir audio del micrófono mientras explicas la reproducción. Está diseñado para ayudar a los equipos a compartir informes de errores con todo el contexto mediante un enlace compartible.

Características principales

• Línea de tiempo de depuración sincronizada por fotogramas: Los logs, la red y los cambios de ruta/navegación están anclados a los fotogramas del vídeo, permitiéndote desplazarte directamente al momento de la grabación.
• Captura de consola con detalles preservados: Registra logs de consola, advertencias y errores con trazas completas de pila y cargas útiles de argumentos “exactamente como los mostraría DevTools”.
• Captura de red con fidelidad similar a DevTools: Captura solicitudes de red completas con encabezados, cargas útiles, cuerpos de respuesta e información de tiempos comparable a lo que muestra DevTools.
• Seguimiento de navegación y cambios de ruta: Registra eventos de navegación para SPAs y flujos de páginas tradicionales, de modo que la grabación refleja la ruta que siguió el usuario.
• Soporte de narración por micrófono: Permite añadir audio del micrófono durante la grabación para explicar lo que ocurre sin salir del grabador.
• Salida de enlace compartible (sin inicio de sesión para ver): Genera una URL que los compañeros pueden abrir para ver el vídeo con los datos de depuración sincronizados.
• Contexto de asistente IA mediante MCP: Puedes conectarte a través de MCP para que un asistente de IA acceda al contexto de la grabación (vídeo, logs y red). La página menciona flujos de trabajo como arrastrar una grabación a Cursor.

Cómo usar DevRecorder

1. Instalar la extensión: Añade la extensión DevRecorder para Chrome desde la Chrome Web Store.
2. Iniciar una grabación: Haz clic en el punto de grabación y reproduce el problema que quieres capturar.
3. Grabar lo que importa: Opcionalmente selecciona una ventana o dibuja una región para incluir solo la parte relevante de tu pantalla.
4. Verificar la captura: Al reproducir, DevRecorder captura automáticamente la salida de consola, la actividad de red y los eventos de navegación (con narración por micrófono si está activada).
5. Compartir para revisión: Usa la opción de compartir para generar una URL compartible y que tu equipo pueda ver el contexto de depuración sincronizado.
6. (Opcional) Enviar contexto a herramientas de IA: Conéctate mediante MCP para que las herramientas de IA compatibles puedan usar el contenido de la grabación.

Casos de uso

• Reproducir un error del lado del cliente: Graba mientras activas un flujo JavaScript/TypeError y desplázate hasta el fotograma preciso donde aparece el error en la salida de consola.
• Depurar discrepancias entre solicitud y respuesta: Captura una llamada API fallida (incluyendo estado, carga útil, encabezados y cuerpo de respuesta) y correlaciónala con el estado de la interfaz y el tiempo mostrado en el vídeo.
• Rastrear transiciones de ruta en SPAs: Cuando un error aparece tras una navegación (por ejemplo, de productos a carrito a pago), usa los eventos de navegación para confirmar la ruta real del usuario.
• Escribir un informe de error narrado: Graba y explica los pasos de reproducción, para que los revisores puedan seguir el razonamiento mientras ven los logs y la actividad de red subyacentes.
• Preparar análisis asistido por IA: Proporciona el contexto de la grabación a un asistente de IA conectado mediante MCP, permitiendo que el asistente consulte lo ocurrido en el vídeo junto con los datos de depuración registrados.

Preguntas frecuentes

¿DevRecorder requiere inicio de sesión para compartir grabaciones?

La página indica que los espectadores del equipo pueden abrir el enlace compartible sin necesidad de iniciar sesión.

¿Qué captura DevRecorder durante la grabación?

Captura logs de consola sincronizados (incluidas trazas de pila y argumentos), solicitudes de red (incluidos encabezados, cargas útiles, cuerpos de respuesta y tiempos) y eventos de navegación, y puede incluir narración por micrófono.

¿Puedo grabar solo parte de mi pantalla?

Sí. La página describe seleccionar una ventana o dibujar una región para capturar solo el área elegida.

¿Cómo obtienen contexto los asistentes de IA desde DevRecorder?

El sitio indica que puedes conectarte mediante MCP para que el asistente de IA acceda al contexto de la grabación (vídeo, logs y red). También menciona arrastrar una grabación a Cursor como ejemplo de flujo de trabajo.

¿Qué configuración de navegador se menciona?

La guía de instalación en la página es añadir la extensión DevRecorder desde la Chrome Web Store.

Alternativas

• Flujo de trabajo de grabación de rendimiento/red/consola en DevTools: Integrado en Chrome DevTools y centrado en trazas capturadas y detalles de red; normalmente requiere exportación manual y correlación, en lugar de una única línea de tiempo de vídeo sincronizada por fotogramas.
• Herramientas de grabación de pantalla de uso general con anotaciones: Herramientas que graban vídeo para tutoriales o reproducción de errores pueden combinarse con exportación de logs por separado, pero no suelen sincronizar automáticamente los datos de consola y red con el vídeo.
• Herramientas de informes de errores que recopilan sesiones (por ejemplo, reproducción de sesiones): Los productos de reproducción de sesiones capturan líneas de tiempo de interacción del usuario y, a veces, detalles de red; el enfoque suele estar en las interacciones del usuario más que en una captura tipo DevTools de consola/red con correlación bloqueada por fotogramas.